/* ---------- CSS: Mobile-first, variables ---------- */
    :root{
      --max-content-width: 1200px;
      --gap: 1rem;
      --radius: 12px;
      --color-bg: #ffffff;
      --color-text: #111217;
      --color-accent: #0b5fff;
      --color-muted: #6b7280;
      --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      --focus-ring: 3px solid highlight;
      --container-padding: 1rem;
    }

    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
      :root{
        --color-bg: #0b0d10;
        --color-bg-white: #ffffff;
        --color-text: #e6eef8;
        --color-muted: #9aa4b2;
      }
    }

    /* Base reset & accessible defaults */
    *,*::before,*::after{box-sizing:border-box}
    html{font-family:var(--font-sans);font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
    body{margin:0;background:var(--color-bg-white);color:var(--color-text);-webkit-font-smoothing:antialiased}
    img{max-width:100%;height:auto;display:block}
    a{color:var(--color-accent);text-decoration:none}
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible{
      outline: 3px solid var(--color-accent); outline-offset:2px;
    }

    /* Skip link */
    .skip-link{
      position: absolute;
      left: -999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    .skip-link:focus{
      left: 1rem;
      top: 1rem;
      width: auto;
      height: auto;
      padding: .5rem .75rem;
      background:#000;
      color:#fff;
      z-index:1000;
      border-radius:6px;
    }

    /* Layout container */
    .site {
      display:flex;
      min-height:100vh;
      flex-direction:column;
    }

    header, main, nav, footer { /* landmarks for AT */
      display:block;
    }

    /* Topbar header */
    .site-header{
      border-bottom:1px solid rgba(0,0,0,0.06);
      padding: .75rem var(--container-padding);
      background: linear-gradient(0deg, rgba(255,255,255,0.02), transparent);
    }
    .site-brand{
      display:flex;
      align-items:center;
      gap:.75rem;
    }
    .logo {
      width:40px;height:40px;border-radius:8px;background:var(--color-accent);
      display:inline-block;
    }

    /* Nav: accessible hamburger + menu */
    .nav-toggle{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      background:transparent;
      border:0;
      padding:.5rem;
      font-size:1rem;
    }
    .nav-toggle[aria-expanded="true"] .hamburger { transform: rotate(90deg); }

    nav[aria-label="Główna nawigacja"] ul{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      gap:var(--gap);
      align-items:center;
    }
    /* Mobile: hide full menu initially */
    .main-nav{display:none}
    .main-nav[data-open="true"]{display:block}

    /* Content wrapper */
    .container{
      width:100%;
      padding:1rem var(--container-padding);
      margin-inline:auto;
      max-width:var(--max-content-width);
      flex:1 0 auto;
    }

    /* Simple responsive grid: 1 col mobile -> 2/3/4 cols */
    .grid{
      display:grid;
      gap:var(--gap);
      grid-template-columns: 1fr;
    }
    .card{
      background: linear-gradient(180deg, rgba(0,0,0,0.01), transparent);
      border-radius: var(--radius);
      padding:1rem;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    /* Footer */
    .site-footer{
      padding:1rem var(--container-padding);
      border-top:1px solid rgba(0,0,0,0.06);
      font-size:.95rem;
      color:var(--color-muted);
    }

    /* Focus visible enhancements for keyboard users */
    :focus{ outline:none }
    :focus-visible{ box-shadow: 0 0 0 4px rgba(11,95,255,0.12); border-radius:6px }

    /* ---------- BREAKPOINTS (mobile-first -> desktop) ---------- */
    /* Small phones: 320 - 374 handled by base */

    /* >= 375px (modern phones) */
    @media (min-width: 375px){
      html{font-size:16px}
    }

    /* >= 480px: landscape phones / large phones */
    @media (min-width: 480px){
      .grid{ grid-template-columns: repeat(2,1fr) }
      .nav-toggle{ display:inline-flex }
    }

    /* >= 600px: small tablets / large phones */
    @media (min-width: 600px){
      .grid{ grid-template-columns: repeat(2,1fr) }
    }

    /* >= 768px: tablets portrait */
    @media (min-width: 768px){
      .container{ padding:1.25rem }
      .grid{ grid-template-columns: repeat(3,1fr) }
      .main-nav{ display:block } /* show full nav on tablets+ */
    }

    /* >= 1024px: small laptops / tablets landscape */
    @media (min-width: 1024px){
      .grid{ grid-template-columns: repeat(4,1fr) }
      .site-header{ display:flex; align-items:center; justify-content:space-between }
    }

    /* >= 1200px: desktops */
    @media (min-width:1200px){
      :root{ --max-content-width: 1300px }
    }

    /* >= 1366px, 1440px, 1920px can be addressed by increasing container width or changing grid */
    @media (min-width:1366px){
      .grid{ grid-template-columns: repeat(4,1fr); gap:1.25rem }
    }

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important }
    }

    /* Tiny accessibility helpers */
    .sr-only{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }