: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: 74ch;
      --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: 0px 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;
    }

    
    .nav-note{
      display:inline-block;
      margin-bottom:4px;
      color:var(--accent-dark);
      text-decoration:none;
      font-weight:700;
    }
    .nav-note:hover{text-decoration:underline;}


    .hero-logo {
      display: block;
      width: min(230px, 54vw);
      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.3rem, 6.5vw, 4.2rem);
      line-height: 1;
      letter-spacing: -0.045em;
      color: var(--accent-dark);
    }

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

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

    .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.secondary {
      background: var(--soft);
      color: var(--accent-dark);
      border: 1px solid var(--line);
    }

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

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

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

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

    .section-title {
      max-width: 800px;
      margin-bottom: 26px;
    }

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

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

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

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

    .chapter {
      max-width: 900px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.76);
      border: 1px solid var(--line);
      box-shadow: 0 12px 34px rgba(92, 63, 43, 0.07);
      border-radius: 28px;
      padding: clamp(24px, 4vw, 42px);
      animation: fadeUp 650ms ease both;
    }

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

    .chapter p + p { margin-top: 14px; }


    .chapter-illustration {
      display: block;
      width: 100%;
      max-width: 820px;
      margin: 0 auto 26px;
      border-radius: 24px;
      box-shadow: 0 14px 36px rgba(92, 63, 43, 0.10);
      background: radial-gradient(circle at center, rgba(255, 64, 64, 0.07), transparent 70%);
    }

    .final-illustration {
      max-width: 680px;
      margin-bottom: 28px;
    }

    .quote {
      border-left: 5px solid var(--accent);
      padding: 18px 22px;
      background: var(--card);
      border-radius: 0 20px 20px 0;
      font-size: 1.16rem;
      color: var(--text);
      margin: 24px 0 0;
      max-width: var(--content-width);
      box-shadow: 0 8px 24px rgba(92, 63, 43, 0.06);
    }

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

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

    .example, .faq-item {
      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);
      border-radius: 24px;
      padding: 24px;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
      animation: fadeUp 650ms ease both;
    }

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

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

    .example p, .faq-item p {
      margin: 0;
      max-width: var(--content-width);
      color: var(--text);
    }

    .example p + p { margin-top: 12px; }
    .label {
      display: inline-block;
      margin-bottom: 6px;
      font-weight: 900;
      color: var(--accent-dark);
    }

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

    .step {
      counter-increment: step;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 20px;
      box-shadow: 0 10px 26px rgba(92, 63, 43, 0.06);
      animation: fadeUp 650ms ease both;
    }

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


    .step-icon {
      display: block;
      width: min(112px, 70%);
      aspect-ratio: 1 / 1;
      object-fit: contain;
      margin: 0 auto 14px;
      border-radius: 18px;
      background: radial-gradient(circle at center, rgba(255, 64, 64, 0.07), transparent 70%);
    }

    .step p {
      margin: 0;
      font-weight: 700;
      line-height: 1.35;
    }

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

    .final .chapter {
      background: linear-gradient(180deg, var(--card), var(--bg));
    }

    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: 900px) {
      .step-icon { width: min(120px, 52%); }
      .grid, .steps { grid-template-columns: 1fr; }
      .hero { padding-top: 18px; }
      .hero-card { border-radius: 24px; }
      .hero-logo {
        width: min(220px, 60vw);
        border-radius: 22px;
      }
      .lead { font-size: 1.12rem; }
      h1 { font-size: 3.3rem; }
      section { padding: 44px 0; }
    }
  
.section-divider{display:flex;justify-content:center;align-items:center;margin:8px auto;}
.section-divider img{display:block;max-width:285px;width:min(90%,585px);height:auto;}
section + .section-divider{margin-top:-15px;}
.section-divider + section{padding-top:12px;}



    /* Górny panel nawigacyjny, identyczny jak na stronie Gest Dobra */
    .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);
    }
    @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,.72); font-size: .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; }