/* ============================================================
       Fundacja PK KAR — site styles
       Built on top of colors_and_type.css design tokens.
       ============================================================ */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *{animation:none !important; transition:none !important}
    }
    body{
      margin:0;
      font-family:var(--font-sans);
      color:var(--body);
      background:var(--bg);
      line-height:var(--lh-body);
      -webkit-font-smoothing:antialiased;
      font-feature-settings:"cv11","ss01";
    }
    h1,h2,h3{color:var(--ink); line-height:var(--lh-tight); margin:0 0 .5em}
    h1{font-size:var(--fs-display); font-weight:var(--fw-black); letter-spacing:var(--ls-tight)}
    h2{font-size:var(--fs-h2); font-weight:var(--fw-bold); letter-spacing:var(--ls-tighter)}
    h3{font-size:var(--fs-h3); font-weight:var(--fw-bold)}
    p{margin:0 0 1rem}
    a{color:var(--teal-600); text-decoration:none}
    strong{color:var(--ink)}

    .container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--space-6)}
    .narrow{max-width:var(--maxw-narrow)}

    /* Focus rings */
    :is(a,button,input,[tabindex]):focus-visible{
      outline:none;
      box-shadow: var(--shadow-focus);
      border-radius:8px;
    }

    /* Skip link */
    .skip-link{
      position:absolute; left:-9999px; top:8px;
      background:var(--ink); color:#fff; padding:10px 14px;
      border-radius:8px; font-weight:600; z-index:100;
    }
    .skip-link:focus{left:8px}

    /* ----- HEADER ----- */
    .site-header{
      position:sticky; top:0; z-index:50;
      background:rgba(255,255,255,.9);
      backdrop-filter:saturate(180%) blur(10px);
      -webkit-backdrop-filter:saturate(180%) blur(10px);
      border-bottom:1px solid var(--line);
    }
    .nav-wrap{display:flex; align-items:center; justify-content:space-between; height:var(--header-h); position:relative}
    .brand{display:flex; align-items:center; gap:12px}
    .brand-mark{
      display:inline-grid; place-items:center;
      background:var(--teal-600); color:#fff;
      font-weight:var(--fw-black); font-size:.85rem; letter-spacing:.02em;
      padding:8px 10px; border-radius:var(--radius-md);
    }
    .brand-name{font-weight:var(--fw-bold); color:var(--ink)}
    .nav{display:flex; align-items:center; gap:24px}
    .nav a{color:var(--body); font-weight:var(--fw-medium); font-size:.96rem; transition:color var(--t-base)}
    .nav a:hover{color:var(--teal-600)}
    .nav-cta{background:var(--teal-600); color:#fff !important; padding:9px 18px; border-radius:var(--radius-md); transition:background var(--t-base)}
    .nav-cta:hover{background:var(--teal-800)}

    /* Language toggle */
    .lang-toggle{
      display:inline-flex; background:var(--bg-alt);
      border:1px solid var(--line); border-radius:var(--radius-pill);
      padding:2px; gap:2px;
    }
    .lang-toggle button{
      border:0; background:transparent; cursor:pointer;
      font-family:inherit; font-weight:var(--fw-semibold); font-size:.78rem;
      letter-spacing:.04em; color:var(--muted);
      padding:6px 12px; border-radius:var(--radius-pill);
      transition:background var(--t-base), color var(--t-base);
    }
    .lang-toggle button.is-active{
      background:#fff; color:var(--teal-800);
      box-shadow:0 1px 2px rgba(15,23,42,.08);
    }

    /* Brand mark SVG (replaces text wordmark) */
    .brand-mark-svg{display:block; border-radius:var(--radius-md)}

    /* Mobile burger */
    .nav-burger{display:none; background:none; border:0; padding:8px; cursor:pointer; flex-direction:column; gap:5px}
    .nav-burger span{width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--t-base), opacity var(--t-base)}
    .nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-burger.is-open span:nth-child(2){opacity:0}
    .nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    /* ----- HERO ----- */
    .hero{background: var(--hero-gradient); border-bottom:1px solid var(--line); overflow:hidden}
    .hero-grid{
      display:grid; grid-template-columns:1.15fr .85fr;
      gap:48px; align-items:center;
      padding:80px var(--space-6) 72px;
    }
    .hero-copy{max-width:580px}
    .hero-collage{
      position:relative;
      height:420px;
    }
    .hero-collage figure{
      position:absolute; margin:0;
      border-radius:var(--radius-xl);
      overflow:hidden;
      box-shadow:var(--shadow-lg);
      background:linear-gradient(135deg,#0f766e,#115e59); /* fallback */
    }
    .hero-collage img{
      width:100%; height:100%; object-fit:cover; display:block;
    }
    .hero-collage .hc-1{width:62%; height:62%; top:0; right:0; transform:rotate(2deg)}
    .hero-collage .hc-2{width:52%; height:54%; bottom:0; left:0;  transform:rotate(-3deg)}
    .hero-collage .hc-3{width:42%; height:42%; bottom:8%; right:6%; transform:rotate(4deg); border:6px solid #fff}
    .eyebrow{
      color:var(--teal-800); font-weight:var(--fw-semibold); text-transform:uppercase;
      letter-spacing:var(--ls-eyebrow); font-size:.8rem; margin-bottom:18px;
    }
    .lead{font-size:var(--fs-lead); color:var(--body); max-width:580px}
    .hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 18px}
    .hero-meta{color:var(--muted); font-size:.88rem; margin:0}

    /* ----- ABOUT (split with figure) ----- */
    .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
    .about-copy{max-width:520px}
    .about-figure{margin:0; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); background:var(--bg-alt)}
    .about-figure img{display:block; width:100%; height:380px; object-fit:cover}
    .about-figure figcaption{padding:14px 18px; font-size:.85rem; color:var(--muted); background:#fff}

    /* ----- STORIES (project gallery) ----- */
    .stories{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px}
    .story-card{
      background:#fff; border:1px solid var(--line);
      border-radius:var(--radius-xl); overflow:hidden;
      box-shadow:var(--shadow-md);
      transition:transform var(--t-slow);
    }
    .story-card:hover{transform:translateY(-4px)}
    .story-img{position:relative; aspect-ratio:4/3; background:var(--bg-alt); overflow:hidden}
    .story-img img{width:100%; height:100%; object-fit:cover; display:block}
    .story-tag{
      position:absolute; top:14px; left:14px;
      background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
      color:var(--teal-800); font-size:.72rem; font-weight:var(--fw-semibold);
      text-transform:uppercase; letter-spacing:.06em;
      padding:5px 10px; border-radius:var(--radius-pill);
    }
    .story-body{padding:20px 22px 24px}
    .story-body h3{margin:0 0 6px; font-size:1.05rem}
    .story-body p{margin:0; color:var(--muted); font-size:.94rem}

    /* ----- BUTTONS ----- */
    .btn{
      display:inline-block; font-weight:var(--fw-semibold);
      padding:13px 24px; border-radius:var(--radius-lg); border:0;
      cursor:pointer; font-family:inherit; font-size:.96rem;
      transition:transform var(--t-fast), background var(--t-base), box-shadow var(--t-base), color var(--t-base), border-color var(--t-base);
    }
    .btn:hover{transform:translateY(-1px)}
    .btn-primary{background:var(--amber-500); color:var(--amber-ink)}
    .btn-primary:hover{background:var(--amber-600); color:#fff; box-shadow:var(--shadow-cta)}
    .btn-ghost{background:#fff; color:var(--teal-800); border:1px solid var(--line)}
    .btn-ghost:hover{border-color:var(--teal-600); color:var(--teal-600)}

    /* ----- SECTIONS ----- */
    .section{padding:var(--space-section) 0}
    .section-alt{background:var(--bg-alt)}
    .kicker{
      color:var(--teal-800); font-weight:var(--fw-semibold); text-transform:uppercase;
      letter-spacing:var(--ls-eyebrow); font-size:var(--fs-eyebrow); margin:0 0 10px;
    }
    .section-intro{max-width:680px; font-size:1.08rem; color:var(--body)}

    /* ----- CARDS ----- */
    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px}
    .card{
      background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl);
      padding:28px 24px; box-shadow:var(--shadow-md);
      transition:transform var(--t-slow);
    }
    .card:hover{transform:translateY(-4px)}
    .card-ico{
      width:46px; height:46px; display:grid; place-items:center;
      border-radius:var(--radius-lg);
      background:var(--teal-tint-bg); color:var(--teal-600);
      margin-bottom:14px;
    }
    .card-ico svg{width:22px; height:22px; stroke-width:1.75}
    .card h3{margin-bottom:.35em}
    .card p{margin:0; color:var(--muted)}

    /* ----- DONATE ----- */
    .donate{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; margin-top:34px}
    .donate-box, .donate-note{
      background:#fff; border:1px solid var(--line);
      border-radius:var(--radius-xl); padding:30px;
      box-shadow:var(--shadow-md);
    }
    .donate-note{background:var(--teal-600); color:#d7f4f0; border-color:transparent}
    .donate-note h3{color:#fff}

    /* Donation widget chips */
    .amount-chips{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px}
    .chip{
      background:#fff; border:1.5px solid var(--line); color:var(--ink);
      padding:10px 14px; border-radius:var(--radius-md);
      font-family:inherit; font-weight:var(--fw-semibold); font-size:.92rem;
      cursor:pointer; transition:border-color var(--t-base), background var(--t-base), color var(--t-base);
      font-variant-numeric:tabular-nums;
    }
    .chip:hover{border-color:var(--teal-600)}
    .chip.is-active{background:var(--teal-tint-bg); border-color:var(--teal-600); color:var(--teal-800)}
    .chip-custom{display:inline-flex; align-items:center; gap:6px; padding:6px 10px}
    .chip-custom input{
      width:64px; border:0; outline:none; background:transparent;
      font:inherit; color:var(--ink); padding:4px 0;
      font-variant-numeric:tabular-nums;
    }
    .chip-custom .cur{font-size:.78rem; color:var(--muted)}

    .kv{margin:16px 0 8px}
    .kv dt{color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; margin-top:14px; font-weight:var(--fw-semibold)}
    .kv dd{margin:2px 0 0; color:var(--ink); font-size:1.02rem}

    .iban-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
    .iban{
      font-family:var(--font-mono); font-size:.9rem;
      background:var(--bg-alt); padding:6px 10px; border-radius:6px;
      letter-spacing:.02em; color:var(--ink);
    }
    .copy-btn{
      background:transparent; border:1px solid var(--line); color:var(--teal-800);
      font:inherit; font-size:.78rem; font-weight:var(--fw-semibold);
      padding:6px 10px; border-radius:8px; cursor:pointer;
      transition:border-color var(--t-base), background var(--t-base);
    }
    .copy-btn:hover{border-color:var(--teal-600); background:var(--teal-tint-bg)}

    .fineprint{color:var(--muted); font-size:.86rem; margin-top:12px}
    .donate-note .fineprint{color:#bfeae4}

    .ticks{list-style:none; padding:0; margin:14px 0 22px}
    .ticks li{padding-left:28px; position:relative; margin-bottom:12px; color:#e6fbf8}
    .ticks li::before{content:"✓"; position:absolute; left:0; color:var(--amber-500); font-weight:var(--fw-black)}
    .donate-note .btn-primary{margin-top:6px}

    /* ----- REGISTRY GRID ----- */
    .reg-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:32px 0 18px}
    .reg-grid > div{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px}
    .reg-grid span{display:block; color:var(--muted); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; font-weight:var(--fw-semibold)}
    .reg-grid strong{color:var(--ink); font-weight:var(--fw-semibold)}

    /* ----- CONTACT ----- */
    .contact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:24px 0}
    .contact-grid > div{background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px}
    .contact-grid span{display:block; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; font-weight:var(--fw-semibold)}

    /* ----- FOOTER ----- */
    .site-footer{background:var(--dark-bg); color:var(--dark-text); padding:48px 0 28px}
    .footer-wrap{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap}
    .site-footer .brand-mark{margin-bottom:12px}
    .site-footer p{margin:.2rem 0; font-size:.9rem; color:var(--dark-muted)}
    .footer-links{display:flex; flex-direction:column; gap:8px}
    .footer-links a{color:var(--dark-text); font-size:.92rem; transition:color var(--t-base)}
    .footer-links a:hover{color:#fff}
    .copyright{border-top:1px solid var(--dark-line); margin-top:28px; padding-top:18px; font-size:.82rem; color:#64748b}

    /* ----- RESPONSIVE ----- */
    @media (max-width:920px){
      .cards{grid-template-columns:1fr 1fr}
      .stories{grid-template-columns:1fr 1fr}
      .donate{grid-template-columns:1fr}
      .reg-grid{grid-template-columns:1fr}
      .hero-grid{grid-template-columns:1fr; gap:32px}
      .hero-collage{height:340px; max-width:520px}
      .about-grid{grid-template-columns:1fr; gap:32px}
      .about-figure img{height:280px}
    }
    @media (max-width:720px){
      .cards{grid-template-columns:1fr}
      .stories{grid-template-columns:1fr}
      .contact-grid{grid-template-columns:1fr}
      .hero-grid{padding:56px var(--space-6) 48px}
      .hero-collage{height:280px}
      .nav-burger{display:flex}
      .nav{
        position:absolute; top:var(--header-h); left:0; right:0;
        background:#fff; flex-direction:column; align-items:stretch;
        gap:0; border-bottom:1px solid var(--line);
        max-height:0; overflow:hidden; transition:max-height var(--t-slow);
      }
      .nav.is-open{max-height:420px}
      .nav a{padding:14px 24px; border-top:1px solid var(--line)}
      .nav-cta{margin:12px 24px; text-align:center}
      .lang-toggle{margin:12px 24px; align-self:flex-start}
    }

    /* ============================================================
       2026 — ruch, głębia, wyróżniki
       ============================================================ */
    /* pasek postępu scrolla */
    .scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:200;
      background:linear-gradient(90deg,var(--teal-600),var(--amber-500)); transition:width .12s linear}

    /* cień nagłówka po przewinięciu */
    .site-header.scrolled{box-shadow:0 10px 30px -16px rgba(15,23,42,.28); background:rgba(255,255,255,.95)}

    /* animacje wejścia przy scrollu (klasa dodawana przez JS — brak JS = nic nie znika) */
    .reveal{opacity:0; transform:translateY(28px); will-change:opacity,transform;
      transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1)}
    .reveal.in{opacity:1; transform:none}

    /* hero: aurora + delikatny grain */
    .hero{position:relative}
    .hero::before{content:""; position:absolute; inset:-25% -10% -10% -10%; z-index:0; pointer-events:none;
      background:
        radial-gradient(38% 48% at 18% 22%, rgba(245,158,11,.22), transparent 70%),
        radial-gradient(42% 52% at 84% 14%, rgba(16,185,129,.24), transparent 72%),
        radial-gradient(40% 50% at 62% 92%, rgba(13,148,136,.20), transparent 72%);
      filter:blur(6px); animation:aurora 20s ease-in-out infinite alternate}
    .hero::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
    .hero-grid{position:relative; z-index:1}
    @keyframes aurora{from{transform:translate3d(-2%,-1%,0) scale(1)} to{transform:translate3d(3%,2%,0) scale(1.08)}}

    /* karty — akcent „bento" na hover */
    .card{position:relative; overflow:hidden}
    .card::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%;
      background:linear-gradient(90deg,var(--teal-600),var(--amber-500));
      transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.16,.84,.44,1)}
    .card:hover{box-shadow:var(--shadow-lg); border-color:transparent}
    .card:hover::before{transform:scaleX(1)}
    .card:hover .card-ico{background:var(--teal-600); color:#fff; transition:background var(--t-base),color var(--t-base)}

    /* połysk na głównym przycisku */
    .btn-primary{position:relative; overflow:hidden}
    .btn-primary::after{content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
      background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
      transform:skewX(-20deg); transition:left .6s ease}
    .btn-primary:hover::after{left:150%}

    /* ----- WSPÓŁPRACA / PARTNERSTWO ----- */
    .partner{padding:var(--space-section) 0}
    .partner-cta{position:relative; overflow:hidden;
      background:linear-gradient(135deg,var(--teal-800) 0%, var(--teal-600) 100%);
      color:#eafffb; border-radius:28px; padding:52px 48px; box-shadow:var(--shadow-lg)}
    .partner-cta::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
      background:
        radial-gradient(40% 60% at 88% 10%, rgba(245,158,11,.30), transparent 70%),
        radial-gradient(45% 70% at 6% 100%, rgba(255,255,255,.14), transparent 70%)}
    .partner-cta > *{position:relative; z-index:1}
    .partner-cta h2{color:#fff; max-width:20ch; margin-bottom:.4em}
    .partner-cta p{color:#cdeee9; max-width:60ch; font-size:1.06rem}
    .kicker-on-dark{color:#7fe3d4}
    .partner-tags{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 4px}
    .partner-tag{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
      color:#eafffb; padding:7px 14px; border-radius:var(--radius-pill); font-size:.85rem; font-weight:var(--fw-semibold)}
    .partner-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px}
    .btn-on-dark{background:#fff; color:var(--teal-800)}
    .btn-on-dark:hover{background:#eafffb; color:var(--teal-800); box-shadow:var(--shadow-cta)}
    @media (max-width:720px){ .partner-cta{padding:36px 24px} }