/* CSS wydzielony z projektu (łatwiejsza edycja).
   Jeśli przeglądarka zgłasza błąd CSS – daj znać, poprawimy dokładną regułę.
*/


    :root{
      --bg:#fff7f8;          /* bardzo jasny róż */
      --panel:#fff2f4;       /* panel / karty */
      --txt:#2c2c2c;
      --muted:#6b6b6b;

      /* różowe złoto */
      --gold:#d7b26d;        /* ciepłe złoto */
      --gold-2:#b76e79;      /* róż */
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(183,110,121,.18), transparent 60%),
        radial-gradient(1000px 500px at 85% 0%, rgba(215,178,109,.16), transparent 55%),
        linear-gradient(180deg,#fff7f8,#fff1f4 55%,#f7efe6);
      color:var(--txt);
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue"}
    a{color:#7a3f4a;text-decoration:none}

/* Offset dla kotwic (#sekcja) przy sticky nagłówku */
:root{--header-offset:320px;--header-h:240px;--nav-h:58px;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset);}
section[id]{scroll-margin-top:var(--header-offset);}

    /*
      Nagłówek: wygładzenie przejścia czarny → złoto.
      - większy i „dłuższy” radial (miękkie wygaszenie) usuwa widoczne odcięcie przy logo (półksiężyc)
      - więcej przystanków w linear-gradient rozciąga przejście kolorów
    */
    header{position:sticky;top:0;z-index:9999;
      background:
        radial-gradient(340px 340px at 170px 125px,
          rgba(0,0,0,.96) 0px,
          rgba(0,0,0,.90) 140px,
          rgba(0,0,0,.55) 220px,
          rgba(0,0,0,.20) 300px,
          rgba(0,0,0,.00) 390px
        ),
        linear-gradient(90deg,
          #0b0b0b 0%,
          #151007 18%,
          #3a2600 38%,
          #7a5a1c 70%,
          #d7b26d 92%,
          #eadab8 100%
        );
      border-bottom:1px solid rgba(215,178,109,.50);
      box-shadow:0 8px 22px rgba(0,0,0,.14);
      overflow:visible;
    }
    .wrap{max-width:1100px;margin:0 auto;padding:0 20px}
    .nav{display:flex;align-items:center;justify-content:space-between;min-height:240px;height:auto;padding:14px 0;overflow:visible}
    .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
    .logo-img{height:210px;width:210px;border-radius:0;display:block;padding:0;background:transparent;border:0;box-shadow:none;object-fit:contain;image-rendering:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);}
    /* Tekst w nagłówku – stały kontrast na całym gradiencie */
    .brand{color:rgba(242,232,216,.84);font-weight:700;letter-spacing:.2px;text-shadow:0 1px 7px rgba(0,0,0,.55)}

    /* Menu ma być „zakotwiczone” pod nagłówkiem */
    nav{position:sticky;top:var(--header-h);z-index:9998;width:100%;
      background:rgba(255,242,244,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid rgba(183,110,121,.16);
      box-shadow:0 6px 18px rgba(0,0,0,.08)
    }
nav ul{display:flex;gap:12px;list-style:none;margin:0 auto;padding:10px 20px;flex-wrap:wrap;max-width:1100px;justify-content:center}
nav a{display:inline-block;color:#4b2b31;background:rgba(255,255,255,.56);border:1px solid rgba(183,110,121,.22);padding:9px 12px;border-radius:12px;text-shadow:none;transition:background .18s ease,border-color .18s ease,transform .18s ease}
nav a:hover{background:rgba(255,255,255,.82);border-color:rgba(183,110,121,.36)}
nav a:active{transform:translateY(1px)}
nav a:focus-visible{outline:2px solid rgba(215,178,109,.65);outline-offset:2px}

    .hero{padding:80px 0 40px;background:radial-gradient(900px 420px at 50% -10%, rgba(215,178,109,.18), transparent 60%)}
    h1{font-size:clamp(26px,3.6vw,40px);line-height:1.2;margin:0 0 12px}
    .subtitle{color:var(--muted);max-width:760px}
    section{padding:56px 0;border-top:1px solid rgba(183,110,121,.12)}
    h2{font-size:clamp(22px,2.6vw,30px);margin:0 0 14px}
    .grid{display:grid;gap:20px}
    @media(min-width:920px){.grid.two{grid-template-columns:1.1fr .9fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
    .card{background:rgba(255,242,244,.85);border:1px solid rgba(183,110,121,.14);border-radius:16px;padding:20px}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid rgba(183,110,121,.14);background:rgba(255,255,255,.85);color:#5a2f38}
    .btn.primary{background:linear-gradient(90deg,var(--gold-2),var(--gold));border:none;color:#2b1b1f}
    form{display:grid;gap:12px}
    input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(183,110,121,.18);background:#fff;color:#2c2c2c}
    .row{display:grid;gap:12px} @media(min-width:700px){.row{grid-template-columns:1fr 1fr}}
    .help{font-size:13px;color:var(--muted)}
    footer{padding:40px 0;color:#6d6063}

@media(max-width:520px){
  :root{--header-offset:260px;--header-h:196px;--nav-h:64px}

  .nav{min-height:196px}
  .logo-img{height:168px;width:168px}
  nav ul{gap:10px}
}
/* Nagłówek: logo do lewej krawędzi (pełna szerokość) */
#siteHeader .wrap{max-width:none;margin:0;padding-left:0;padding-right:0;}
#siteHeader .nav{justify-content:flex-start;}