:root {
      --bg: #f6f7f8;          /* stonowane, jasne tło */
      --paper: #ffffff;       /* karty */
      --ink: #1f2937;         /* ciemny tekst (slate-800) */
      --muted: #6b7280;       /* opisowy tekst (slate-500) */
      --brand: #374151;       /* akcent (slate-700) */
      --brand-2: #9ca3af;     /* akcent subtelny */
      --line: #e5e7eb;        /* linie */
      --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0c0f14;
        --paper: #131a29;
        --ink: #e6e5eb;
        --muted: #94a3b8;
        --brand: #cbd5e1;
        --brand-2: #475569;
        --line: #1f2a44;
        --shadow: 0 10px 30px rgba(0,0,0,.35);
      }
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--ink);
      background: var(--bg);
      text-rendering: optimizeLegibility;
    }

    .container { width: min(1100px, 92vw); margin: 0 auto; }
    .section { padding: 64px 0; }
    .section h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 16px; letter-spacing: .2px; }
    .section p.lead { color: var(--muted); max-width: 70ch; }

    .skip { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip:focus { left: 16px; top: 16px; width:auto; height:auto; padding:8px 12px; background: var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow: var(--shadow); }

    header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(8px); background: color-mix(in oklab, var(--bg), transparent 20%); border-bottom: 1px solid var(--line); }
    .nav { display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
    .brand { display:flex; align-items:center; gap: 14px; text-decoration:none; color: inherit; }
    .brand img { width: 44px; height:44px; border-radius: 12px; object-fit:cover; box-shadow: var(--shadow); }
    .brand span { font-weight: 650; letter-spacing: .3px; }

    nav ul { display:flex; gap: 22px; list-style:none; margin:0; padding:0; }
    nav a { color: var(--ink); text-decoration:none; font-weight: 500; opacity:.9; }
    nav a:hover { opacity: 1; }

    .menu-btn { display:none; background:none; border:1px solid var(--line); padding:8px 10px; border-radius:10px; }

    @media (max-width: 820px) {
      nav ul { position: fixed; inset: 60px 16px auto 16px; background: var(--paper); border:1px solid var(--line); border-radius: 14px; padding: 12px; flex-direction: column; gap: 8px; box-shadow: var(--shadow); display:none; }
      nav ul.open { display:flex; }
      .menu-btn { display:block; }
    }

    .hero {
      position: relative;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 32px;
      align-items:center;
      padding: 56px 0 24px;
      color: var(--ink);
      z-index: 1;
    }

    .hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.1; margin: 0 0 12px; }
    .hero p { color: var(--muted); margin: 0 0 24px; }
    .hero .actions { display:flex; gap:12px; flex-wrap: wrap; }
    .btn { display:inline-flex; align-items:center; gap:10px; padding: 10px 16px; border-radius: 12px; border:1px solid var(--line); text-decoration:none; color:var(--ink); background: var(--paper); box-shadow: var(--shadow); }
    .btn.primary { background: var(--ink); color: white; border-color: transparent; }
    .btn.listen { background: var(--ink); color: var(--paper); border-color: transparent; }
    .btn:hover { transform: translateY(-1px); }
    .btn.small { padding: 8px 12px; font-size: 14px; }

    .hero .cover { border-radius: 18px; overflow:hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); border:1px solid var(--line); }
    .hero .cover img { width:100%; height:100%; object-fit:cover; display:block; }

    @media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

    .grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .card { background: var(--paper); border:1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
    .card h3 { margin: 8px 0 6px; font-size: 18px; }
    .card p { margin: 0; color: var(--muted); }
    @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

    .gallery { display:grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
    .gallery img { width:100%; height:100%; object-fit:cover; border-radius: 12px; border:1px solid var(--line); box-shadow: var(--shadow); }
    .gallery .tall { grid-row: span 2; }
    .gallery .wide { grid-column: span 2; }
    .gallery .w3 { grid-column: span 3; }
    .gallery .w4 { grid-column: span 4; }
    .gallery .w6 { grid-column: span 6; }
    @media (max-width: 900px) {
      .gallery { grid-template-columns: repeat(6, 1fr); }
      .gallery .w6 { grid-column: span 6; }
      .gallery .w4 { grid-column: span 6; }
      .gallery .w3 { grid-column: span 3; }
    }

    .timeline { position: relative; margin: 20px 0; }
    .timeline::before { content: ""; position:absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--line); }
    .event { position: relative; margin-left: 36px; padding: 12px 14px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
    .event::before { content: ""; position:absolute; left: -26px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-2); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--line); }
    .event time { font-weight: 600; display:block; margin-bottom: 2px; }

    /* ✨ TABELA POBRAŃ (CSS Grid + responsywność) */
    .downloads-table { 
      display: grid; 
      grid-template-columns: 2fr 1fr 1fr; 
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    /* Używamy display: contents, by każda "komórka" układała się w jedną siatkę */
    .downloads-table .head,
    .downloads-table .row { display: contents; }

    .downloads-table .cell { 
      background: var(--paper);
      padding: 12px 14px; 
      border-top: 1px solid var(--line);
    }
    .downloads-table .head .cell { 
      border-top: none; 
      font-weight: 600; 
      color: var(--muted);
      background: var(--paper);
    }

    .downloads-actions { display:flex; gap: 8px; align-items:center; flex-wrap: wrap; }

    @media (max-width: 700px) {
      .downloads-table { grid-template-columns: 1fr; }
      .downloads-table .head { display: none; }
      .downloads-table .row { 
        display: grid; 
        grid-template-columns: 1fr; 
        border-top: 1px solid var(--line);
        background: var(--paper);
        padding: 6px 0;
      }
      .downloads-table .cell { 
        display: grid; 
        grid-template-columns: 0.9fr 1fr; 
        align-items: center; 
        gap: 10px;
        border: none; 
        padding: 10px 14px;
      }
      .downloads-table .cell::before { 
        content: attr(data-label); 
        color: var(--muted);
        font-weight: 600; 
      }
    }

    footer { border-top: 1px solid var(--line); padding: 28px 0 64px; color: var(--muted); }

    .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }