:root {
      --bg: #FFF9F2;
      --bg-alt: #F6F3E4;
      --card: #ffffff;
      --text: #342B27;
      --muted: #71665E;
      --accent: #6E7500;
      --accent-dark: #565C00;
      --line: #DED8C8;
      --soft: #F0EFDC;
      --shadow: 0 18px 50px rgba(92, 63, 43, 0.12);
      --shadow-hover: 0 22px 58px rgba(92, 63, 43, 0.16);
      --content-width: 70ch;
      --heading-font: "Lora", Georgia, serif;
      --brand-brown: #8C5A3C;
      --heart: #FF4040;
	  --header-height: 86px;
    }


    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at top, rgba(110, 117, 0, 0.12), transparent 22rem),
        radial-gradient(circle at top left, rgba(140, 90, 60, 0.12), transparent 34rem),
        linear-gradient(180deg, var(--bg), #fff);
      color: var(--text);
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }


    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.055;
      background-image:
        radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0);
      background-size: 18px 18px;
      z-index: -1;
    }

    .wrap {
      width: min(1040px, calc(100% - 32px));
      margin: 0 auto;
    }

    .hero {
      padding: 26px 0 44px;
      text-align: center;
    }

    .hero-card {
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(234, 216, 204, 0.95);
      box-shadow: var(--shadow);
      border-radius: 34px;
      padding: clamp(28px, 6vw, 64px);
      overflow: hidden;
      position: relative;
      animation: fadeUp 700ms ease both;
    }


    .hero-logo {
      display: block;
      width: min(290px, 60vw);
      margin: 0 auto 16px;
      border-radius: 24px;
      box-shadow: none;
    }

    h1, h2, h3 {
      overflow-wrap: anywhere;
    }

    h1, h2 {
      font-family: var(--heading-font);
    }

    h1 {
      margin: 0;
      font-size: clamp(2.4rem, 7vw, 4.5rem);
      line-height: 1;
      letter-spacing: -0.045em;
      color: var(--brand-brown);
    }

    .slogan {
      margin: 16px auto 0;
      max-width: 720px;
      font-size: clamp(1.4rem, 8vw, 2.8rem);
      line-height: 1.05;
      letter-spacing: -0.055em;
      font-weight: 700;
      color: var(--text);
    }

    .lead {
      max-width: var(--content-width);
      margin: 26px auto 0;
      font-size: clamp(1.15rem, 2.4vw, 1.55rem);
      line-height: 1.45;
      color: var(--text);
    }

    .lead strong { color: var(--accent-dark); }

    .received {
      max-width: 760px;
      margin: 34px auto 0;
      padding: clamp(22px, 4vw, 34px);
      border-radius: 28px;
      background: linear-gradient(180deg, var(--card), var(--bg));
      border: 1px solid var(--line);
      box-shadow: 0 12px 34px rgba(92, 63, 43, 0.08);
      text-align: left;
    }

    .received h2 {
      margin: 0 0 12px;
      color: var(--accent-dark);
      font-size: clamp(1.55rem, 4vw, 2.3rem);
      line-height: 1.1;
      letter-spacing: -0.025em;
    }

    .received p {
      margin: 0;
      max-width: var(--content-width);
      font-size: 1.12rem;
    }

    .received p + p { margin-top: 10px; }

    .cta-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 32px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 0 22px;
      border-radius: 999px;
      background: var(--accent);
      color: white;
      text-decoration: none;
      font-weight: 800;
      transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(92, 63, 43, 0.18);
      filter: brightness(1.05);
    }

    .button.secondary {
      background: transparent;
      color: var(--accent-dark);
      border: 2px solid var(--accent);
      box-shadow: none;
    }

    .button.secondary:hover {
      background: var(--soft);
    }

    a:focus-visible, .button:focus-visible {
      outline: 3px solid var(--accent-dark);
      outline-offset: 4px;
    }

    section {
      padding: 56px 0;
      scroll-margin-top: 20px;
    }

    section:nth-of-type(even) {
      background: linear-gradient(180deg, transparent, var(--bg-alt), transparent);
    }

    .section-title {
      max-width: 760px;
      margin-bottom: 28px;
    }

    .section-title.center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    h2 {
      margin: 0 0 14px;
      font-size: clamp(2rem, 4vw, 3.35rem);
      line-height: 1.05;
      letter-spacing: -0.035em;
    }

    .section-title p {
      margin: 0;
      max-width: var(--content-width);
      color: var(--muted);
      font-size: 1.12rem;
    }

    .section-title.center p { margin-inline: auto; }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      align-items: stretch;
    }

    .card, .step, .example {
      display: flex;
      flex-direction: column;
      height: 100%;
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: 0 12px 34px rgba(92, 63, 43, 0.07);
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
      animation: fadeUp 650ms ease both;
    }

    .card:hover, .step:hover, .example:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    }

    .card {
      border-radius: 26px;
      padding: clamp(22px, 4vw, 34px);
    }

    .card h3, .step h3, .example h3 {
      margin: 0 0 10px;
      font-size: 1.35rem;
      line-height: 1.2;
      color: var(--accent-dark);
    }

    .card p, .card ul, .step p, .example p {
      margin-top: 0;
      margin-bottom: 0;
      max-width: var(--content-width);
      color: var(--text);
    }

.card.wide p,
.card.wide .quote {
    max-width: 100%;
}

    .card ul { padding-left: 1.2rem; }
    .card li + li { margin-top: 8px; }
    .wide { grid-column: 1 / -1; }

    .quote {
      border-left: 5px solid var(--accent);
      padding: 18px 22px;
      background: var(--card);
      border-radius: 0 20px 20px 0;
      font-size: 1.18rem;
      color: var(--text);
      margin: 24px 0 0;
      max-width: var(--content-width);
    }

    .steps {
      counter-reset: step;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-top: 26px;
      align-items: stretch;
    }

    .step {
      counter-increment: step;
      border-radius: 24px;
      padding: 24px;
    }

    .step::before {
      content: counter(step);
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--soft);
      color: var(--accent-dark);
      font-weight: 900;
      margin-bottom: 16px;
      flex: 0 0 auto;
    }


    .step-illustration {
      display: block;
      width: 100%;
      height: clamp(150px, 18vw, 220px);
      object-fit: contain;
      margin: 4px 0 18px;
      border-radius: 20px;
      background: radial-gradient(circle at center, rgba(255, 64, 64, 0.08), transparent 68%);
    }

    .step h3 {
      margin-bottom: 12px;
    }

    .examples {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      align-items: stretch;
    }

    .example {
      border-radius: 24px;
      padding: 24px;
    }

    .example h3 { margin: 0 0 8px; }

    .final {
      text-align: center;
      padding-bottom: 76px;
    }

    .final .card {
      max-width: 820px;
      margin: 0 auto;
      background: linear-gradient(180deg, var(--card), var(--bg));
      align-items: center;
    }

    .final p {
      max-width: var(--content-width);
      font-size: 1.22rem;
      margin: 0;
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 22px 0;
      color: var(--muted);
      font-size: 0.95rem;
      text-align: center;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
      }
    }

    @media (max-width: 820px) {
      .grid, .steps, .examples { grid-template-columns: 1fr; }
      .hero { padding-top: 18px; }
      .hero-card { border-radius: 24px; }
      .hero-logo {
        width: min(260px, 64vw);
        border-radius: 22px;
      }
      .slogan { font-size: clamp(1rem, 8vw, 11.0rem); }
      .lead { font-size: 1.12rem; }
      h1 { font-size: 3.0rem; }
      section { padding: 44px 0; }
    }

    
.section-divider{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:1px auto;
}

.section-divider + section{
    padding-top:1px;
}

section + .section-divider{
    margin-top:-35px;
}

    .section-divider img{display:block;max-width:585px;width:min(90%,285px);height:auto;}



 
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: var(--header-height);
      background: linear-gradient(
        to bottom,
        rgba(255, 249, 242, 0.97),
        rgba(255, 249, 242, 0.88)
      );
      border-bottom: 1px solid rgba(222, 216, 200, 0.72);
      box-shadow: 0 8px 30px rgba(92, 63, 43, 0.07);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      will-change: transform;
    }
    .site-header::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -22px;
      height: 22px;
      background: linear-gradient(
        to bottom,
        rgba(255, 249, 242, 0.38),
        rgba(255, 249, 242, 0)
      );
      pointer-events: none;
    }
    .site-header-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .site-brand {
      display: inline-flex;
      align-items: center;
      min-width: max-content;
      color: var(--brand-brown);
      text-decoration: none;
      font-family: var(--heading-font);
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -0.015em;
    }
    .site-brand:hover {
      color: var(--accent-dark);
    }
    .site-menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      border-radius: 10px;
    }
    .site-menu-toggle:hover { background: rgba(110, 117, 0, 0.08); }
    .site-menu-toggle:focus-visible {
      outline: 3px solid var(--accent-dark);
      outline-offset: 3px;
    }
    .site-menu-toggle span {
      display: block;
      width: 24px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 180ms ease, opacity 180ms ease;
    }
    .site-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .site-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .site-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(16px, 2.5vw, 30px);
    }
    .site-nav a {
      color: var(--text);
      text-decoration: none;
      font-size: 0.93rem;
      font-weight: 700;
      white-space: nowrap;
      transition: color 180ms ease;
    }
    .site-nav a:hover {
      color: var(--accent);
    }
    .site-header-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 17px;
      border-radius: 999px;
      background: var(--accent);
      color: #fff;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 800;
      white-space: nowrap;
      transition: background 180ms ease, transform 180ms ease;
    }
    .site-header-cta:hover {
      background: var(--accent-dark);
      transform: translateY(-1px);
    }
    main {
      padding-top: var(--header-height);
    }
    #wiecej,
    #jak-przekazac {
      scroll-margin-top: 0;
    }
    @media (max-width: 760px) {
      .site-header-inner { gap: 12px; }
      .site-brand { font-size: 0.98rem; }
      .site-menu-toggle {
        display: inline-flex;
        margin-left: auto;
      }
      .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 16px 16px;
        background: rgba(255, 249, 242, 0.98);
        border-bottom: 1px solid rgba(222, 216, 200, 0.9);
        box-shadow: 0 16px 30px rgba(92, 63, 43, 0.12);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
      }
      .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
      .site-nav a {
        width: 100%;
        padding: 13px 8px;
        border-bottom: 1px solid rgba(222, 216, 200, 0.72);
        font-size: 0.96rem;
      }
      .site-nav a:last-child { border-bottom: 0; }
      .site-header-cta {
        min-height: 40px;
        padding: 0 14px;
        font-size: 0.84rem;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .site-header {
        transform: none !important;
      }
    }
  

    /* Breadcrumbs: czytelna struktura strony dla użytkownika i wyszukiwarek */
    .breadcrumb {
      width: min(1040px, calc(100% - 32px));
      margin: 0 auto;
      padding: 14px 0 0;
      font-size: 0.9rem;
      color: var(--muted);
    }
    .breadcrumb ol {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .breadcrumb li + li::before {
      content: "›";
      margin-right: 7px;
      color: var(--line);
    }
    .breadcrumb a {
      color: var(--accent-dark);
      text-decoration: none;
      font-weight: 700;
    }
    .breadcrumb a:hover { text-decoration: underline; }