/* ============================================================
   Czuła Dietetyczka — v3  |  redakcyjnie, typograficznie, z oddechem
   Hierarchia à la jennellearnewnutrition.com · paleta „Stonowane Lato"
   Fonty: Fraunces (nagłówki, kursywa-akcent) + Work Sans (tekst, UI)
   ============================================================ */

:root {
  /* tła jasne (czytelność) */
  --ground:   #FAF6F3;
  --cream:    #F4EDE3;
  --tint:     #EADFD8;
  /* tekst */
  --ink:      #33272A;
  --ink-soft: #6E5C58;
  --cream-tx: #F2E8DE;
  --cream-soft:#D8C8BE;
  /* apla ciemne */
  --brown:    #33272A;
  --aubergine:#3B2A36;
  --navy:     #2A3A4E;
  --petrol:   #244F49;
  /* kolory marki / akcenty */
  --plum:     #77354A;
  --wine:     #8A3A55;
  --rose:     #C08794;
  --rose-lt:  #D9B4BB;
  --mauve:    #8A7E86;
  /* pola TEST */
  --f-bialko: #33272A;
  --f-wegle:  #77354A;
  --f-warzywa:#8A7E86;
  --f-tluszcz:#E7DCD7;

  --maxw: 1160px;
  --narrow: 780px;
  --radius: 30px;
  --ff-head: 'Fraunces', Georgia, serif;
  --ff-body: 'Work Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--ff-body);
  background: var(--ground);
  color: var(--ink);
  font-size: 17.5px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;            /* nie 'hidden' — psuje position:sticky */
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--rose-lt); color: var(--ink); }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 6px; }

/* ---------- typografia ---------- */
h1, h2, h3 {
  font-family: var(--ff-head);
  font-weight: 420;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 90;
}
h1 { font-size: clamp(2.7rem, 6vw, 4.9rem); line-height: 1.04; }
h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 470; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; letter-spacing: 0; }
p  { margin: 0 0 1.15em; text-wrap: pretty; max-width: 60ch; }

.kicker {
  font-family: var(--ff-body);
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 26px;
  color: var(--plum);
  display: inline-block;
}
.s-dark .kicker, .s-plum .kicker, .s-navy .kicker { color: var(--rose-lt); }

.lead { font-size: clamp(1.1rem, 1.45vw, 1.28rem); line-height: 1.65; font-weight: 400; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(22px, 5vw, 60px); }
.narrow { max-width: var(--narrow); }
section { position: relative; }
.sec-pad { padding: clamp(5.5rem, 11vw, 10.5rem) 0; overflow: hidden; }
.sec-head { max-width: 640px; margin-bottom: clamp(3rem, 6vw, 5rem); }

.s-cream { background: var(--cream); }
.s-tint  { background: var(--tint); }
.s-ground{ background: var(--ground); }
.s-dark  { background: var(--aubergine); color: var(--cream-tx); }
.s-brown { background: var(--brown); color: var(--cream-tx); }
.s-plum  { background: var(--plum); color: var(--cream-tx); }
.s-navy  { background: var(--navy); color: var(--cream-tx); }
.s-petrol{ background: var(--petrol); color: var(--cream-tx); }
.s-rose  { background: var(--rose); color: #2A1F23; }
.s-roselt{ background: var(--rose-lt); color: #3A2830; }
.s-dark h1,.s-dark h2,.s-plum h2,.s-navy h2,.s-brown h2,.s-petrol h2 { color: #fff; }
.s-dark p, .s-plum p, .s-navy p, .s-petrol p { color: var(--cream-soft); }
.s-rose p { color: #43303A; }

/* ---------- emblemat żurawi ---------- */
.crane-wm {
  position: absolute; pointer-events: none; z-index: 0;
  width: min(44vw, 460px); height: auto; right: -4%; bottom: -9%;
  opacity: 0.10;
}
.crane-wm-left { right: auto; left: -4%; transform: translate3d(0, var(--par, 0px), 0) scaleX(-1); }
.crane-wm-light { opacity: 0.06; }
.s-rose .crane-wm { opacity: 0.16; }
.s-roselt .crane-wm { opacity: 0.12; }
.container, .sec-inner { position: relative; z-index: 1; }

/* ---------- przyciski ---------- */
.btn {
  font-family: var(--ff-body); font-size: .98rem; font-weight: 500; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
  line-height: 1; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--plum); color: #fff; }
.btn-primary:hover { background: #692E42; box-shadow: 0 12px 26px -14px rgba(119,53,74,.75); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(51,39,42,.3); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(51,39,42,.04); }
.on-dark .btn-ghost, .s-dark .btn-ghost, .s-plum .btn-ghost, .s-navy .btn-ghost { color: var(--cream-tx); border-color: rgba(242,232,222,.42); }
.on-dark .btn-ghost:hover, .s-dark .btn-ghost:hover, .s-plum .btn-ghost:hover, .s-navy .btn-ghost:hover { border-color: var(--cream-tx); background: rgba(255,255,255,.06); }
.btn-light { background: var(--cream-tx); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* link tekstowy ze strzałką (redakcyjne CTA w panelach) */
.link-arrow {
  font-family: var(--ff-body); font-weight: 600; font-size: .98rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px;
  transition: gap .18s ease, opacity .18s ease;
}
.link-arrow::after { content: "→"; font-weight: 400; }
.link-arrow:hover { gap: 13px; opacity: .85; }

/* ---------- nawigacja ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,246,243,.88); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(51,39,42,.06);
  transition: box-shadow .25s ease;
}
.nav.scrolled { box-shadow: 0 8px 28px -20px rgba(51,39,42,.4); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px clamp(22px, 5vw, 60px); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.brand img { height: 46px; width: auto; flex: none; }
.brand span { font-family: var(--ff-head); font-weight: 470; font-size: 1.3rem; letter-spacing: 0; }
.nav-links { display: flex; gap: 30px; margin-left: auto; margin-right: 10px; }
.nav-links a { font-size: .93rem; font-weight: 500; text-decoration: none; color: var(--ink); opacity: .78; transition: opacity .15s; }
.nav-links a:hover { opacity: 1; }
.nav-cta { display: flex; gap: 10px; }
.nav-cta .btn { padding: 11px 21px; font-size: .88rem; }

/* ---------- hero (redakcyjny, wyśrodkowany) ---------- */
.hero { position: relative; padding: clamp(6.5rem, 13vw, 11.5rem) 0 clamp(6rem, 11vw, 10rem); overflow: hidden; text-align: center; }
.hero-mark { height: clamp(58px, 7vw, 84px); width: auto; margin: 0 auto clamp(2rem, 3.5vw, 3rem); opacity: .95; }
.hero h1 { max-width: 17ch; margin: 0 auto; }
.hero .lead { max-width: 46ch; margin: 30px auto 0; color: var(--cream-soft); }
.hero .btn-row { justify-content: center; margin-top: 44px; }

/* ---------- grid helpers ---------- */
.grid { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.two { grid-template-columns: repeat(2, minmax(min(300px,100%), 1fr)); align-items: center; }
.three { grid-template-columns: repeat(3, minmax(min(260px,100%), 1fr)); }

/* ---------- podejście: duża typografia zamiast boxów ---------- */
.statement { font-family: var(--ff-head); font-size: clamp(1.45rem, 2.7vw, 2.15rem); line-height: 1.35; font-weight: 400; max-width: 30ch; margin: 0; text-wrap: pretty; }
.statement em { font-style: italic; }

/* ---------- Metoda TEST teaser ---------- */
.test-hero-img { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -40px rgba(0,0,0,.55); }
.test-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.test-letters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(2.6rem, 5vw, 4rem); }
.tl { border-radius: 22px; padding: 26px 22px 24px; color: #fff; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s ease; }
.tl:hover { transform: translateY(-5px); }
.tl .big { font-family: var(--ff-head); font-size: 3rem; font-weight: 600; line-height: 1; }
.tl .lbl { font-size: .95rem; line-height: 1.35; font-weight: 500; }
.tl-bialko { background: var(--f-bialko); }
.tl-wegle  { background: #8A3A55; }
.tl-warzywa{ background: var(--f-warzywa); }
.tl-tluszcz{ background: var(--f-tluszcz); color: #4A3B33; }

/* ---------- podstrona TEST: pola ---------- */
.big-letter { font-family: var(--ff-head); font-weight: 600; font-size: 2.9rem; line-height: 1; display: block; margin-bottom: 8px; }
#pola .test-hero-img { aspect-ratio: 4 / 3; box-shadow: none; }
#pola .test-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.pole-card { background: var(--ground); border-radius: var(--radius); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.pole-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px -32px rgba(51,39,42,.5); }

/* ---------- kroki (podstrona TEST) ---------- */
.step { padding: 0; }
.step-num { font-family: var(--ff-head); font-style: italic; font-weight: 480; font-size: clamp(2.6rem, 4vw, 3.4rem); color: var(--plum); display: block; margin-bottom: 14px; line-height: 1; }
.step h3 { margin-bottom: 10px; }
.step p { font-size: 1rem; color: var(--ink-soft); }

/* ---------- pasek cytatu ---------- */
.quote-band { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; overflow: hidden; text-align: center; }
.quote-band .q { font-family: var(--ff-head); font-style: italic; font-weight: 420; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.25; max-width: 24ch; margin: 0 auto; text-wrap: balance; }

/* ---------- w czym pomagam: otwarta siatka, bez ramek ---------- */
.help-grid { display: grid; grid-template-columns: repeat(4, minmax(min(210px,100%), 1fr)); gap: clamp(26px, 3.4vw, 44px); }
.help-item { display: flex; flex-direction: column; }
.help-img { border-radius: 18px; overflow: hidden; aspect-ratio: 336 / 470; box-shadow: 0 22px 44px -30px rgba(51,39,42,.5); margin-bottom: 22px; }
.help-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .55s ease; }
.help-item:hover .help-img img { transform: scale(1.05); }
.help-item h3 { font-size: 1.35rem; margin-bottom: 10px; }
.help-item p { font-size: .98rem; color: var(--ink-soft); margin: 0; }

/* ---------- jak pracujemy: trzy duże panele kolorystyczne ---------- */
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(min(280px,100%), 1fr)); gap: clamp(18px, 2.2vw, 26px); }
.panel { border-radius: var(--radius); padding: clamp(30px, 3.6vw, 46px); min-height: 360px; display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease; }
.panel:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -34px rgba(51,39,42,.55); }
.panel .meta { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .65; margin-bottom: 18px; }
.panel h3 { margin-bottom: 14px; }
.panel p { font-size: 1rem; margin-bottom: 28px; }
.panel .link-arrow { margin-top: auto; align-self: flex-start; }
.panel-rose { background: var(--rose); color: #2A1F23; }
.panel-rose p { color: #43303A; }
.panel-deep { background: var(--aubergine); color: var(--cream-tx); }
.panel-deep h3 { color: #fff; }
.panel-deep p { color: var(--cream-soft); }
.panel-ground { background: var(--ground); color: var(--ink); }
.panel-ground p { color: var(--ink-soft); }

/* ---------- posiłki (podstrona TEST): karty + grafika ---------- */
.meals-wrap { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
.meals-list { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }
.meals-img { border-radius: var(--radius); overflow: hidden; min-height: 320px; }
.meals-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.meals-img:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .meals-wrap { grid-template-columns: 1fr; } .meals-img { min-height: 240px; } }

/* ---------- podejście: grafika obok statementu ---------- */
.approach-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 24px 48px -34px rgba(51,39,42,.45); }
.approach-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.approach-img:hover img { transform: scale(1.04); }

/* ---------- disclaimer wkomponowany ---------- */
.disclaimer { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 26px; border-top: 1px solid rgba(242,232,222,.16); font-size: .9rem; color: var(--cream-soft); max-width: 72ch; }

/* ---------- formularze ---------- */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.field label { font-size: .88rem; font-weight: 500; display: block; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--ff-body); font-size: 1rem; padding: 14px 17px;
  border-radius: 14px; border: 1.5px solid rgba(242,232,222,.25); background: rgba(255,255,255,.06);
  color: var(--cream-tx);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(242,232,222,.45); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--rose-lt); background: rgba(255,255,255,.1); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; line-height: 1.55; color: var(--cream-soft); cursor: pointer; }
.consent input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--rose); }
.consent a { color: var(--rose-lt); }
.form-msg { font-size: .95rem; font-weight: 500; padding: 12px 0; display: none; }
.form-msg.show { display: block; }
.form-light .field input, .form-light .field textarea, .form-light .field select { border-color: rgba(51,39,42,.22); background: #fff; color: var(--ink); }
.form-light .field input::placeholder, .form-light .field textarea::placeholder { color: rgba(51,39,42,.42); }
.form-light .consent { color: var(--ink-soft); }
.form-light .consent a { color: var(--plum); }

.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1.5px solid rgba(242,232,222,.22); border-radius: 14px; cursor: pointer; font-size: .93rem; }
.radio-opt input { margin-top: 3px; accent-color: var(--rose); }
.radio-opt:hover { border-color: rgba(242,232,222,.5); }

/* ---------- O mnie: zdjęcie swobodne, dominujące (bez kafla; multiply zdejmuje białe tło,
   miękka biała poświata za sylwetką jak na referencji Oli) ---------- */
/* plik ma ~20% białego marginesu z każdej strony, więc kadr może mocno wyjść poza kolumnę —
   sylwetka i tak nie dotyka tekstu, a tekst ma z-index i rysuje się na wierzchu */
.about-free { position: relative; background: var(--cream); width: 168%; margin-left: -40%; } /* własne tło pod multiply — .container tworzy stacking context i odcina tło sekcji */
.about-free::before {
  content: ""; position: absolute; inset: 12% 24% 8% 14%;
  background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
}
.about-free img { position: relative; width: 100%; mix-blend-mode: multiply; clip-path: inset(2px); } /* inset ucina subpikselową krawędź, która przy multiply rysowała cienką ramkę */
.about-grid { grid-template-columns: 1.15fr .9fr; }
.about-txt { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .about-free { width: 108%; margin-left: -8%; }
  .about-free::before { inset: 10% 8% 6% 8%; }
  .about-grid { grid-template-columns: 1fr; }
}

/* ---------- opinie: przesuwająca się linia (2 rzędy) ---------- */
.opinie { text-align: center; }
.op-seal { height: 76px; width: auto; margin: 0 auto 28px; display: block; opacity: .85; }
.op-note { max-width: 46ch; margin: 0 auto 10px; }
.op-marquee {
  overflow: hidden; margin-top: clamp(1.6rem, 3vw, 2.4rem); position: relative; z-index: 1;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.op-track { display: flex; gap: 22px; width: max-content; padding: 4px 0; animation: opmove 70s linear infinite; }
.op-marquee:hover .op-track { animation-play-state: paused; }
.op-row2 .op-track { animation-direction: reverse; animation-duration: 88s; }
@keyframes opmove { to { transform: translateX(-50%); } }
.op-card {
  width: min(430px, 82vw); flex: none; text-align: left;
  background: var(--ground); border-radius: 22px; padding: 26px 30px;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 38px -30px rgba(51,39,42,.4);
}
.op-card p { font-size: .93rem; line-height: 1.6; color: var(--ink); margin: 0 0 16px; max-width: none; }
.op-card .who { font-size: .85rem; font-weight: 600; margin-top: auto; }
.op-card .src { opacity: .5; font-weight: 400; }
.op-stars { color: var(--plum); letter-spacing: 4px; font-size: .78rem; margin-bottom: 12px; display: block; }
@media (prefers-reduced-motion: reduce) {
  .op-track { animation: none; }
  .op-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}

/* ---------- kafelki social (kontakt, ciemna apla) ---------- */
.social-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.social-tile {
  display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--cream-tx);
  border: 1.5px solid rgba(242,232,222,.25); border-radius: 18px; padding: 13px 22px 13px 17px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.social-tile:hover { background: rgba(255,255,255,.06); border-color: rgba(242,232,222,.55); transform: translateY(-2px); }
.social-tile svg { width: 23px; height: 23px; flex: none; }
.st-txt b { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.st-txt > span { display: block; font-size: .82rem; color: var(--cream-soft); }

/* ---------- co daje TEST: otwarta siatka korzyści ---------- */
.benefit-grid {
  display: grid; grid-template-columns: repeat(2, minmax(min(280px,100%), 1fr));
  gap: clamp(28px, 4vw, 52px) clamp(34px, 5vw, 72px);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
.benefit h3 { font-size: 1.22rem; margin-bottom: 8px; }
.benefit p { font-size: .98rem; color: var(--ink-soft); margin: 0; }

/* ---------- karty ogólne (dokumenty, posiłki, jest/nie jest) ---------- */
.card { background: var(--ground); color: var(--ink); border-radius: var(--radius); padding: clamp(26px, 3vw, 40px); transition: transform .22s ease, box-shadow .22s ease; }
.card h3 { color: var(--ink); }
.card.hoverable:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -30px rgba(51,39,42,.5); }
.card h3 { margin-bottom: 12px; }
.card p { font-size: 1rem; color: var(--ink-soft); margin-bottom: 0; }
.card-dark { background: var(--aubergine); color: var(--cream-tx); }
.card-dark h3 { color: #fff; }
.card-dark h3 { color: #fff; } .card-dark p { color: var(--cream-soft); }

/* ---------- modal zapisu ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(42,31,35,.55); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--ground); border-radius: 28px; position: relative;
  padding: clamp(30px, 4.4vw, 48px); width: 100%; max-width: 560px;
  max-height: 90vh; overflow: auto;
  animation: modalin .3s cubic-bezier(.22,.7,.3,1);
}
@keyframes modalin { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.modal-close {
  position: absolute; top: 14px; right: 20px; background: none; border: 0;
  font-size: 32px; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 6px;
}
.modal-close:hover { color: var(--ink); }
.modal .form { max-width: none; }
.modal.m-rose { background: var(--rose); color: #2A1F23; }
.modal.m-rose h3 { color: #2A1F23; }
.modal.m-rose .kicker { color: #5A3A44; }
.modal.m-rose .modal-close { color: #5A3A44; }
.modal.m-rose .field input, .modal.m-rose .field select { background: rgba(255,255,255,.65); border-color: rgba(42,31,35,.22); color: var(--ink); }
.modal.m-rose .field input::placeholder { color: rgba(42,31,35,.45); }
.modal.m-rose .consent { color: #43303A; }
.modal.m-rose .consent a { color: #5A2A3C; }
.modal.m-deep { background: var(--aubergine); color: var(--cream-tx); }
.modal.m-deep h3 { color: #fff; }
.modal.m-deep .kicker { color: var(--rose-lt); }
.modal.m-deep .modal-close { color: var(--cream-soft); }
.modal.m-deep .btn-primary { background: var(--cream-tx); color: var(--ink); }
.modal.m-deep .btn-primary:hover { background: #fff; box-shadow: none; }
/* przyciski-linki w panelach */
button.link-arrow { background: none; border: 0; border-bottom: 1.5px solid currentColor; padding: 0 0 3px; font-size: .98rem; color: inherit; cursor: pointer; }

/* ---------- stopka ---------- */
.footer { background: var(--brown); color: var(--cream-soft); padding: clamp(4rem, 7vw, 6rem) 0 2.5rem; }
.footer .brand span { color: #fff; }
.footer .brand img { height: 42px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 40px 80px; justify-content: space-between; margin-bottom: 3.5rem; }
.footer a { color: var(--cream-soft); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer h4 { font-family: var(--ff-body); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; font-size: .8rem; margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; padding-top: 2rem; border-top: 1px solid rgba(242,232,222,.14); font-size: .85rem; }

/* ---------- ruch: reveal + stagger + parallax ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.22,.7,.3,1), transform .75s cubic-bezier(.22,.7,.3,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal.rdone { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; will-change: auto; }

.tl.reveal { transform: translateY(18px) scale(.94); }
.tl.reveal.in { transform: none; }

.reveal .test-hero-img img, .reveal .help-img img { transform: scale(1.06); transition: transform 1.2s cubic-bezier(.22,.7,.3,1); }
.reveal.in .test-hero-img img, .reveal.in .help-img img { transform: scale(1); }
.reveal.in .test-hero-img:hover img { transform: scale(1.04); }
.reveal.in.help-item:hover .help-img img, .reveal.in .help-item:hover .help-img img { transform: scale(1.05); }

.crane-wm { transform: translate3d(0, var(--par, 0px), 0); transition: transform .15s linear; }

.ph-note { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; opacity: .45; display: block; margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .tl.reveal { opacity: 1; transform: none; transition: none; }
  .reveal .test-hero-img img, .reveal .help-img img, .about-photo.reveal img { transform: none; transition: none; }
  .crane-wm { transform: none; }
  .btn:hover, .panel:hover, .tl:hover, .card.hoverable:hover, .pole-card:hover { transform: none; }
}

/* ---------- responsywność ---------- */
@media (max-width: 1020px) {
  .nav-links { display: none; }
}
@media (max-width: 900px) {
  .two, .three, .path-grid { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .test-letters { grid-template-columns: repeat(2, 1fr); }
  .op-cards { grid-template-columns: 1fr; }
  .panel { min-height: 0; }
}
@media (max-width: 680px) {
  .brand span { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .nav-cta .btn { padding: 9px 14px; font-size: .8rem; }
  .nav-cta .btn-ghost { display: none; }
  .brand span { font-size: .98rem; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .help-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .help-item h3 { font-size: 1.1rem; }
}

/* ---------- wydarzenia z arkusza (lista nad stanem zerowym) ---------- */
.ev-mount[hidden] { display: none; }
.ev-mount { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ev-list { display: grid; gap: clamp(14px, 1.8vw, 20px); }
.ev-card {
  display: grid; grid-template-columns: 120px 1fr auto; gap: clamp(18px, 3vw, 40px);
  align-items: center; padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 36px);
  background: rgba(255,255,255,.055); border: 1px solid rgba(242,232,222,.16); border-radius: 22px;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.ev-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.085); border-color: rgba(242,232,222,.3); }
.ev-date { font-family: var(--ff-head); line-height: 1; color: #fff; }
.ev-day { display: block; font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 520; }
.ev-mon { display: block; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; font-family: var(--ff-body); color: var(--rose-lt); margin-top: 8px; }
.ev-body h3 { color: #fff; margin-bottom: 8px; }
.ev-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .84rem; color: var(--rose-lt); margin-bottom: 10px; }
.ev-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ev-body p { font-size: .97rem; color: var(--cream-soft); margin: 0; max-width: 62ch; }
.ev-card .btn { white-space: nowrap; }
.ev-tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(217,180,187,.16); color: var(--rose-lt); }
@media (max-width: 860px) {
  .ev-card { grid-template-columns: 1fr; gap: 16px; }
  .ev-date { display: flex; align-items: baseline; gap: 10px; }
  .ev-day { font-size: 1.9rem; }
  .ev-mon { margin-top: 0; }
  .ev-card .btn { width: 100%; justify-content: center; }
}

/* nazwa wydarzenia w oknie zapisu */
.modal-ev { font-size: .93rem; font-weight: 600; line-height: 1.45; margin: -6px 0 20px; padding: 12px 16px; border-radius: 14px; background: rgba(119,53,74,.09); color: var(--plum); }
.modal-ev[hidden] { display: none; }
.modal.m-rose .modal-ev { background: rgba(42,31,35,.12); color: #43303A; }
.modal.m-deep .modal-ev { background: rgba(255,255,255,.1); color: var(--rose-lt); }

/* ---------- dokumenty prawne (polityka prywatności) ---------- */
.doc h2 { font-size: clamp(1.35rem, 2.1vw, 1.7rem); margin: clamp(2.6rem, 4vw, 3.4rem) 0 14px; }
.doc h2:first-of-type { margin-top: 0; }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { margin: 0 0 1.15em; padding-left: 22px; line-height: 1.7; }
.doc li { margin-bottom: 8px; }
.doc li strong, .doc p strong { color: var(--ink); }
.tab { width: 100%; border-collapse: collapse; margin: 6px 0 1.3em; font-size: .95rem; }
.tab th { text-align: left; font-family: var(--ff-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); padding: 0 14px 10px 0; border-bottom: 1.5px solid rgba(119,53,74,.22); }
.tab td { padding: 12px 14px 12px 0; border-bottom: 1px solid rgba(51,39,42,.1); color: var(--ink-soft); vertical-align: top; line-height: 1.5; }
.luka { background: rgba(192,135,148,.3); padding: 1px 6px; border-radius: 5px; color: var(--ink); font-weight: 500; }
.do-sprawdzenia { background: var(--tint); border-radius: 20px; padding: clamp(20px,2.4vw,28px); margin-bottom: clamp(2.4rem,4vw,3.2rem); font-size: .97rem; line-height: 1.6; color: var(--ink-soft); }
.do-sprawdzenia strong { color: var(--ink); }
.uwaga { border-left: 3px solid var(--plum); padding: 4px 0 4px 20px; margin: 20px 0 0; font-size: .95rem; color: var(--ink-soft); }
.uwaga strong { color: var(--plum); }
@media (max-width: 560px) { .tab, .tab tbody, .tab tr, .tab td { display: block; width: 100%; } .tab thead { display: none; } .tab tr { padding: 12px 0; border-bottom: 1px solid rgba(51,39,42,.1); } .tab td { border: 0; padding: 2px 0; } }