/*
 * Style strony głównej helpaw.pl - wspólne dla index.html (PL) i en.html (EN).
 * Jeden plik, żeby poprawka (np. cień odznak z 29.09.2026) nie musiała być
 * robiona dwa razy i żeby wersje językowe się nie rozjeżdżały.
 * Źródło: ~/projects/helpaw-web (6.08.2026), przeniesione do repo 29.09.2026.
 */
  :root {
    color-scheme: light dark;
    --bg: #F8F7F5;
    --bg-alt: #F1EEE9;
    --surface: #FFFFFF;
    --text: #1A1816;
    --text-soft: #635D57;
    --primary: #7C3AED;
    --primary-strong: #6D28D9;
    --primary-deep: #5B21B6;
    --primary-soft: rgba(124, 58, 237, .09);
    --primary-chip: #F1EAFE;
    --on-primary: #FFFFFF;
    --amber: #FBBF24;
    --border: #E7E4DD;
    --shadow: 0 10px 30px rgba(26, 24, 22, .08);
    --shadow-lift: 0 16px 40px rgba(26, 24, 22, .12);
    --header-bg: rgba(248, 247, 245, .82);
    --radius: 20px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0F1420;
      --bg-alt: #151B2A;
      --surface: #1B2233;
      --text: #F4F5F7;
      --text-soft: #A8AFBD;
      --primary: #A78BFA;
      --primary-strong: #8B5CF6;
      --primary-deep: #7C3AED;
      --primary-soft: rgba(167, 139, 250, .12);
      --primary-chip: rgba(167, 139, 250, .16);
      --on-primary: #14101F;
      --border: #2A3247;
      --shadow: 0 10px 30px rgba(0, 0, 0, .35);
      --shadow-lift: 0 16px 40px rgba(0, 0, 0, .45);
      --header-bg: rgba(15, 20, 32, .82);
    }
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 92px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
  body {
    font-family: "Nunito", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; height: auto; display: block; }
  /* Atrybut hidden przegrywa z display ustawionym przez klasę (np. inline-flex
     na .store-badge), a na nim wisi przełącznik premiera/sklepy. */
  [hidden] { display: none !important; }
  a { color: var(--primary-strong); }
  :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--surface); color: var(--text);
    padding: 10px 18px; border-radius: 0 0 12px 0; z-index: 60;
  }
  .skip-link:focus { left: 0; }

  .wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

  h1, h2, h3 { line-height: 1.15; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
  h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 900; }
  h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); }
  h3 { font-size: 1.1rem; }
  .section-intro { color: var(--text-soft); max-width: 42em; margin-top: .7em; font-size: 1.05rem; }

  .icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- Nagłówek ---------- */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .site-header.scrolled { border-color: var(--border); box-shadow: 0 4px 24px rgba(26, 24, 22, .06); }
  .site-header .wrap {
    display: flex; align-items: center; gap: 28px;
    min-height: 68px;
  }
  .logo {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--text);
    font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em;
  }
  .logo svg { width: 32px; height: 35px; flex: none; }
  .paw-under { display: none; } /* biały podkład znaku widoczny tylko na ciemnym tle */
  @media (prefers-color-scheme: dark) { .paw-under { display: inline; } }
  .site-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
  .site-nav a:not(.btn-primary) {
    text-decoration: none; color: var(--text-soft);
    font-weight: 700; font-size: .95rem;
    padding: 8px 14px; border-radius: 999px;
    transition: color .15s ease, background-color .15s ease;
  }
  .site-nav a:not(.btn-primary):hover { color: var(--text); background: var(--primary-soft); }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-strong); color: var(--on-primary);
    font-family: inherit; font-weight: 800; font-size: .95rem; text-decoration: none;
    padding: 10px 20px; border-radius: 999px; border: 0;
    box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(124, 58, 237, .34); }
  @media (prefers-color-scheme: dark) {
    .btn-primary { color: #FFFFFF; /* wyjątek: biel na kolorze akcentu */ background: var(--primary-deep); }
  }
  .site-nav .btn-primary { margin-left: 10px; }
  @media (max-width: 760px) {
    .site-nav a:not(.btn-primary):not(.lang-switch) { display: none; }
    .site-nav .btn-primary { margin-left: 0; }
  }

  /* ---------- Hero ---------- */
  .hero { position: relative; overflow: hidden; }
  .hero::before {
    content: ""; position: absolute; inset: -30% -10% auto;
    height: 140%; pointer-events: none;
    background:
      radial-gradient(44% 58% at 84% 42%, var(--primary-soft), transparent 70%),
      radial-gradient(30% 42% at 4% 4%, var(--primary-soft), transparent 70%);
  }
  .hero .wrap {
    position: relative;
    display: grid; gap: 44px; align-items: center;
    padding-block: clamp(44px, 7vw, 96px);
  }
  @media (min-width: 880px) {
    .hero .wrap { grid-template-columns: 1.12fr .88fr; }
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--primary-chip); color: var(--primary-deep);
    font-weight: 800; font-size: .84rem; letter-spacing: .02em;
    padding: 6px 14px; border-radius: 999px;
  }
  @media (prefers-color-scheme: dark) { .eyebrow { color: var(--primary); } }
  .eyebrow svg { width: 14px; height: 15px; }
  .hero h1 { margin-top: 18px; }
  .hero h1 .accent { color: var(--primary-strong); }
  .hero .lead {
    margin-top: 18px; font-size: 1.15rem; color: var(--text-soft); max-width: 33em;
  }

  .download { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin-top: 32px; }
  .store-badge {
    display: inline-flex; align-items: center; gap: 12px;
    background: #101014; color: #fff; /* wyjątek: badge sklepu wg wytycznych Apple/Google */
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 14px; padding: 9px 20px 11px 16px;
  }
  a.store-badge { text-decoration: none; transition: transform .15s ease; }
  a.store-badge:hover { transform: translateY(-1px); }
  .store-badge svg { width: 26px; height: 30px; fill: currentColor; flex: none; }
  .store-badge small { display: block; font-size: .66rem; line-height: 1.2; opacity: .8; letter-spacing: .04em; }
  .store-badge strong { display: block; font-size: 1.18rem; line-height: 1.25; font-weight: 700; }
  .qr-card {
    display: flex; align-items: center; gap: 14px;
    background: #FFFFFF; /* stałe - kod QR wymaga jasnego tła */
    border: 1px solid var(--border); border-radius: 16px;
    padding: 10px 18px 10px 10px; box-shadow: var(--shadow);
  }
  .qr-card img { width: 92px; height: 92px; border-radius: 8px; }
  .qr-card figcaption {
    font-size: .86rem; font-weight: 700; line-height: 1.35;
    color: #1A1816; /* stałe - tekst na białej karcie QR */
    max-width: 9em;
  }
  .fine { margin-top: 16px; font-size: .92rem; color: var(--text-soft); }
  .fine strong { color: var(--text); }

  .hero-art { position: relative; justify-self: center; width: min(420px, 84vw); }
  .hero-art .blob {
    position: absolute; inset: 8% 3% 0;
    background: radial-gradient(closest-side, var(--primary-soft) 0%, var(--primary-soft) 55%, transparent 78%);
    border-radius: 50%;
  }
  .hero-art .paw-float {
    position: absolute; color: var(--primary); opacity: .16; pointer-events: none;
  }
  .hero-art .paw-float.p1 { width: 64px; top: 3%; left: -3%; transform: rotate(-22deg); }
  .hero-art .paw-float.p2 { width: 42px; bottom: 10%; right: -4%; transform: rotate(18deg); }
  .hero-art > img { position: relative; filter: drop-shadow(0 24px 32px rgba(26, 24, 22, .16)); }

  /* ---------- Sekcje ---------- */
  section { padding-block: clamp(52px, 7vw, 92px); }

  .cards { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 38px; }
  .card {
    /* 300 px, nie 240: po zdjęciu karty „Baza schronisk" jest ich 6, a przy
       240 układały się 4 + 2 z dwiema ostatnimi rozciągniętymi na pół strony.
       Teraz 3 + 3 na desktopie, 2 + 2 + 2 na tablecie, jedna kolumna na telefonie. */
    flex: 1 1 300px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 26px 24px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; }
  .card .chip {
    display: inline-grid; place-items: center;
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--primary-chip); color: var(--primary-strong);
    margin-bottom: 16px;
  }
  @media (prefers-color-scheme: dark) { .card .chip { color: var(--primary); } }
  .card p { margin-top: 8px; color: var(--text-soft); font-size: .97rem; }

  /* ---------- Jak to działa ---------- */
  .how { background: var(--bg-alt); }
  .steps {
    list-style: none; counter-reset: step;
    display: grid; gap: 34px 20px; margin-top: 44px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  .steps li { counter-increment: step; position: relative; }
  .steps .art {
    position: relative;
    background: #F6F3FC; /* stały jasny podkład - ilustracje projektowano na jasne tło */
    border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
  }
  .steps .art::after {
    content: counter(step);
    position: absolute; top: -14px; left: -10px;
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary-strong); color: #FFFFFF; /* wyjątek: biel na kolorze akcentu */
    font-size: 1.05rem; font-weight: 800;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .35);
  }
  .steps h3 { margin-top: 18px; }
  .steps p { margin-top: 6px; color: var(--text-soft); font-size: .95rem; }

  /* ---------- Społeczność ---------- */
  .community .panel {
    position: relative; overflow: hidden;
    background: linear-gradient(140deg, #7C3AED, #5B21B6); /* stały gradient marki */
    border-radius: 28px; color: #FFFFFF; /* biel na fiolecie */
    padding: clamp(32px, 5vw, 60px);
    display: grid; gap: 32px; align-items: center;
  }
  @media (min-width: 820px) {
    .community .panel { grid-template-columns: 1.2fr .8fr; }
  }
  .community .panel .deco {
    position: absolute; right: -60px; bottom: -90px; width: 340px; height: auto;
    color: #FFFFFF; opacity: .12; pointer-events: none; transform: rotate(-14deg);
  }
  .community .panel > div { position: relative; }
  .community .panel h2 { color: #FFFFFF; }
  .community .panel > div > p { margin-top: 14px; max-width: 36em; color: rgba(255, 255, 255, .92); }
  .badge-row { display: flex; gap: 14px; margin-top: 24px; padding: 0; list-style: none; }
  /* Cień jako box-shadow na kole, NIE filter: drop-shadow. Filtr razem
     z transform przy najechaniu dostaje (zwłaszcza w Safari) własną warstwę
     o rozmiarze pudełka obrazka, a cień, który z niej wystaje, jest ucinany
     prostymi krawędziami - stąd „kwadratowe cienie" wokół odznak (zgłoszenie
     29.09.2026). box-shadow przeglądarki animują razem z transform bez
     ucinania, jak na kartach funkcji. Odznaka to koło z marginesem 28/512
     obrazka, więc spread -3px zwęża cień do jej realnej średnicy (~52 px). */
  .badge-row img {
    width: 58px; height: 58px;
    border-radius: 50%;
    box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .28);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .badge-row li:hover img {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 9px 16px -3px rgba(0, 0, 0, .32);
  }
  .btn-inverse {
    display: inline-block; margin-top: 28px;
    background: #FFFFFF; color: #5B21B6;
    font-weight: 800; font-size: 1.05rem; text-decoration: none;
    padding: 14px 32px; border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-inverse:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .24); }
  .community .mascot { width: min(300px, 70vw); justify-self: center; position: relative; }

  /* ---------- FAQ ---------- */
  .faq-list { margin-top: 36px; max-width: 760px; }
  .faq-list details {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; margin-bottom: 12px;
    transition: box-shadow .2s ease;
  }
  .faq-list details[open] { box-shadow: var(--shadow); }
  .faq-list summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    cursor: pointer; list-style: none;
    font-weight: 800; font-size: 1.02rem;
    padding: 18px 22px;
  }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after {
    content: ""; flex: none; width: 12px; height: 12px;
    border-right: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary);
    transform: rotate(45deg); margin-top: -4px;
    transition: transform .2s ease, margin-top .2s ease;
  }
  .faq-list details[open] summary::after { transform: rotate(225deg); margin-top: 6px; }
  .faq-list details p { padding: 0 22px 20px; color: var(--text-soft); max-width: 56em; }

  /* ---------- Stopka ---------- */
  footer { border-top: 1px solid var(--border); padding-block: 48px 40px; background: var(--bg-alt); }
  .foot { display: grid; gap: 36px; }
  @media (min-width: 720px) { .foot { grid-template-columns: 1.5fr 1fr 1fr; } }
  .foot .brand { display: flex; align-items: flex-start; gap: 14px; }
  .foot .brand svg { width: 42px; height: 46px; flex: none; }
  .foot .brand .name { font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; }
  .foot h2 { font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); margin-bottom: 12px; }
  .foot ul { list-style: none; }
  .foot li { margin-block: 8px; }
  .foot a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .foot a:hover { color: var(--primary-strong); }
  .foot p, .foot li { font-size: .95rem; }
  .foot .muted { color: var(--text-soft); }
  .legal-note {
    margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
    font-size: .88rem; color: var(--text-soft);
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  }

  /* ---------- Animacje wejścia ---------- */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.in { opacity: 1; transform: none; }

  /* ---------- Przełącznik języka ---------- */
  .site-nav a.lang-switch {
    font-weight: 800; font-size: .82rem; letter-spacing: .06em;
    padding: 6px 12px; border: 1px solid var(--border);
    color: var(--text-soft);
  }
  .site-nav a.lang-switch:hover { color: var(--text); border-color: var(--primary); }
  @media (max-width: 760px) { .site-nav .lang-switch { margin-right: 6px; } }