/* Jesteś OK, wariant N: wariant K ze zdjęciami pod rozmowę, coaching i terapię zamiast natury.
   Bez żółtego akcentu, numer telefonu w stopce w zwykłej wielkości, zdjęcia natury. */
:root {
  --bg: #f1f6fc;
  --surface: #dbe7f4;
  --ink: #15233a;
  --muted: #44546c;
  --dim: #5b6b85;
  --accent: #1d4a8c;
  --accent-ink: #f6f9fe;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-sub: clamp(1.625rem, 2.6vw, 2.5rem);
  --step-display: clamp(4rem, 9.2vw, 11rem);
  --step-big: var(--step-display);
  --step-giant: clamp(3rem, 13.4vw, 17rem);

  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(16px, 1.7vw, 24px);
  --section: clamp(88px, 11vw, 160px);
  --r: 4px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: #15233a #dbe7f4; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Erode', Georgia, 'Times New Roman', serif;
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: var(--accent-ink); }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.025em; line-height: 0.98; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 180ms ease, color 180ms ease; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 20; padding: 12px 16px; background: var(--accent); color: var(--accent-ink); border-radius: var(--r); }
.skip:focus { top: 12px; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-inline: var(--m); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 20px;
  background: var(--ink); color: var(--bg);
  font: inherit; font-weight: 600; font-size: var(--step-body); line-height: 1.1; text-decoration: none;
  border: 0; border-radius: var(--r); cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
}
.btn:hover { background: #2a3a55; }
.btn:active { transform: scale(0.97); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: #163a70; }

.inverse, .contact, .about, .footer { --bg: #13294b; --ink: #eef4fb; --muted: #c5d3e6; --dim: #9fb3cf; --surface: #1c3a66; background: var(--bg); color: var(--ink); }
.inverse .btn:not(.btn-accent):hover, .about .btn:not(.btn-accent):hover { background: #c9daee; }

/* ---------- Hero ---------- */
.hero { height: 220vh; }
.hero-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: clip; display: flex; flex-direction: column; justify-content: space-between; --fw: min(30vw, 46svh); --fh: calc(var(--fw) * 1.25); }
.nav { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px var(--m); }
.wordmark { font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.02em; text-decoration: none; }
.nav-links { display: flex; gap: clamp(16px, 2.2vw, 36px); margin-left: auto; }
.nav-links a { position: relative; text-decoration: none; padding: 12px 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav .btn { min-height: 44px; padding: 10px 16px; }

.sentence { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; align-items: baseline; padding-inline: var(--m); font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.03em; pointer-events: none; }
.half { display: block; }
.reel { position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(50% - var(--fw) / 2); width: var(--fw); }
.reel-track { position: absolute; left: 0; right: 0; top: calc(50% - var(--fh) / 2); transform: translate3d(0, calc(var(--p, 0) * -3 * (var(--fh) + 24px)), 0); will-change: transform; }
.frame { height: var(--fh); margin-bottom: 24px; border-radius: var(--r); overflow: hidden; background: #c9daee; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame-anna img { object-position: 50% 0; }

.hero-foot { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 0 var(--m) var(--m); }
.hero-pitch { max-width: min(31vw, 30rem); display: grid; gap: 20px; justify-items: start; }
.lead { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; }
.reel-caption { position: relative; width: min(28vw, 22rem); min-height: 3em; text-align: right; color: var(--muted); font-size: var(--step-body); }
.reel-caption span { position: absolute; right: 0; bottom: 0; opacity: 0; transform: translateY(8px); transition: opacity 320ms ease, transform 480ms var(--ease-out); }
.reel-caption span.is-on { opacity: 1; transform: none; }

/* ---------- Krytyk (żywy element) ---------- */
.critic { padding-block: var(--section); }
.critic-ask { grid-column: 1 / 6; display: grid; gap: 24px; align-content: start; }
.critic-ask h2 { font-size: var(--step-head); }
.critic-ask > p { max-width: 34ch; }
.critic-list { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }
.critic-btn { font: inherit; font-size: var(--step-lead); line-height: 1.2; text-align: left; color: var(--ink); background: var(--surface); border: 0; border-radius: var(--r); padding: 10px 14px; min-height: 48px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--ease-out); }
.critic-btn:hover { background: var(--surface); color: var(--ink); }
.critic-btn:active { transform: scale(0.98); }
.critic-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.critic-answer { grid-column: 7 / 13; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(24px, 3.4vw, 56px); background: var(--surface); border-radius: var(--r); }
.critic-soft { font-size: var(--step-head); font-weight: 500; line-height: 1; letter-spacing: -0.025em; min-height: 2.1em; }
.critic-soft span { display: inline-block; transition: opacity 260ms ease, transform 520ms var(--ease-expo), filter 260ms ease; }
.critic-soft span.out { opacity: 0; transform: translateY(0.25em); filter: blur(6px); }
.critic-course { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 24px; align-items: end; }
.critic-course img { border-radius: var(--r); aspect-ratio: 4 / 3; object-fit: cover; }
.critic-course > div { display: grid; gap: 12px; justify-items: start; }
.critic-course h3 { font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.1; }
.critic-course p { font-size: var(--step-body); }
.noscript-note { padding: 24px var(--m) 0; color: var(--muted); }

/* ---------- Wsparcie ---------- */
.support { padding-bottom: var(--section); }
.support-title { grid-column: 5 / 13; font-size: var(--step-head); padding-block: 4vh 12vh; }
.row { align-items: start; }
.row + .row { margin-top: clamp(72px, 8vw, 120px); }
.row-voice { grid-column: 1 / 5; font-size: var(--step-lead); line-height: 1.3; color: var(--muted); max-width: 16ch; }
.row-body { grid-column: 5 / 10; display: grid; gap: 20px; }
.row-body h3 { font-size: var(--step-sub); }
.row-body p { max-width: 40ch; }
.row-list { color: var(--ink); display: grid; gap: 6px; }
.row-list li { padding-left: 1.1em; position: relative; }
.row-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.row-price { font-weight: 600; }
.row-price a { font-weight: 400; }
.row-pic { grid-column: 10 / 13; justify-self: end; border-radius: var(--r); overflow: hidden; }
.row-pic img { width: 100%; height: 100%; object-fit: cover; }
.pic-a { width: 82%; aspect-ratio: 4 / 5; }
.pic-b { width: 100%; aspect-ratio: 3 / 2; }
.pic-c { width: 64%; aspect-ratio: 1; }

/* ---------- O mnie ---------- */
.about { padding-block: var(--section); }
.about .grid { align-items: start; }
.about-portrait { grid-column: 1 / 6; aspect-ratio: 4 / 5; background: #c9daee; border-radius: var(--r); overflow: hidden; position: sticky; top: var(--m); }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.about-text { grid-column: 7 / 13; display: grid; gap: 28px; }
.about-text h2 { font-size: var(--step-sub); line-height: 1.05; }
.bio { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; }
.about-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 20px; background: var(--surface); border-radius: var(--r); font-weight: 600; line-height: 1.35; }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); margin-top: 12px; }
.values dt { font-weight: 600; font-size: var(--step-lead); letter-spacing: -0.015em; }
.values dd { margin-top: 6px; }

/* ---------- Pierwsze spotkanie ---------- */
.steps { padding-block: var(--section); }
.steps-title { grid-column: 1 / -1; font-size: var(--step-head); margin-bottom: clamp(56px, 7vw, 112px); }
.step { align-items: end; }
.step + .step { margin-top: clamp(72px, 9vw, 144px); }
.verb { grid-column: 1 / 9; font-size: var(--step-big); letter-spacing: -0.035em; line-height: 1.05; }
.step-note { grid-column: 1 / 6; margin-top: 20px; font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.step-pic { grid-column: 9 / 13; grid-row: 1 / 3; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.step-pic img { width: 100%; height: 100%; object-fit: cover; }
.step:nth-of-type(even) .verb { grid-column: 5 / 13; text-align: right; }
.step:nth-of-type(even) .step-note { grid-column: 8 / 13; justify-self: end; }
.step:nth-of-type(even) .step-pic { grid-column: 1 / 5; }

/* ---------- Firmy ---------- */
.firms { padding-block: var(--section); }
.firms .grid { align-items: center; }
.firms-text { grid-column: 1 / 8; display: grid; gap: 28px; justify-items: start; }
.firms-text h2 { font-size: var(--step-head); }
.names { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; max-width: 34ch; }
.name { color: var(--dim); transition: color 400ms ease; }
.name.lit { color: var(--ink); }
.firms-text > p:not(.names) { max-width: 52ch; }
.firms-film { grid-column: 9 / 12; }
.firms-film video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--surface); border-radius: var(--r); }
.firms-film figcaption { margin-top: 12px; color: var(--muted); font-size: var(--step-small); }

/* ---------- Cennik ---------- */
.pricing { background: var(--surface); padding-block: var(--section); }
.price-line { grid-column: 1 / -1; font-size: var(--step-big); line-height: 1; letter-spacing: -0.035em; }
.price { display: inline-block; padding: 0.04em 0.16em 0.08em; background: var(--accent); color: var(--accent-ink); border-radius: var(--r); line-height: 0.95; }
.price-note { grid-column: 1 / 7; margin-top: 64px; font-size: var(--step-lead); line-height: 1.3; }
.price-btn { grid-column: 10 / 13; justify-self: end; align-self: end; }
.price-table { grid-column: 1 / -1; margin-top: clamp(64px, 7vw, 112px); width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.price-table tr:nth-child(odd) { background: var(--bg); }
.price-table th, .price-table td { padding: 18px 20px; text-align: left; vertical-align: baseline; }
.price-table th { font-weight: 500; font-size: var(--step-lead); letter-spacing: -0.015em; line-height: 1.2; }
.price-table td { color: var(--muted); }
.price-table .num { text-align: right; color: var(--ink); font-size: var(--step-lead); font-weight: 600; white-space: nowrap; }

/* ---------- Pytania ---------- */
.faq { padding-block: var(--section); display: grid; row-gap: clamp(48px, 5.6vw, 84px); }
.faq-row h2, .faq-row h3 { grid-column: 1 / 7; font-size: var(--step-sub); line-height: 1.08; }
.faq-row h2 { color: var(--dim); }
.faq-row p { grid-column: 8 / 13; max-width: 42ch; line-height: 1.55; padding-top: 0.2em; }

/* ---------- Kontakt ---------- */
.contact { min-height: 64svh; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(32px, 5vw, 72px) var(--m) var(--m); }
.contact-ask { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; max-width: 26ch; }
.contact-mail { display: block; margin-top: auto; font-size: var(--step-big); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; white-space: nowrap; text-decoration: none; transition: color 200ms ease, transform 600ms var(--ease-expo); transform-origin: left bottom; }
.contact-mail:hover { color: var(--muted); }
.contact-mail:active { transform: scale(0.99); }
.contact-foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: var(--step-body); }
.contact-foot a { margin-right: 20px; padding-block: 10px; display: inline-block; }

/* ---------- Stopka ---------- */
.footer { background: #0f2140; display: flex; flex-direction: column; justify-content: space-between; gap: 64px; padding: 40px var(--m) var(--m); }
.footer-top { display: flex; justify-content: space-between; gap: 24px; }
.footer-top p { max-width: 44ch; }
.footer-phone { font-size: var(--step-head); font-weight: 500; line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap; text-decoration: none; font-variant-numeric: lining-nums; transition: color 200ms ease; }
.footer-phone:hover { color: var(--muted); }
.footer-meta { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 24px; align-items: end; font-size: var(--step-small); color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--ink); }
.footer-links a, .footer-top a, .footer-legal a { display: inline-block; padding-block: 8px; }

/* ---------- Ruch ---------- */
.reveal.pre { opacity: 0; transform: translateY(24px); }
.reveal.pre.in { opacity: 1; transform: none; transition: opacity 700ms ease, transform 900ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 80ms); }
.open.pre > img, .open.pre > video { clip-path: inset(0 0 100% 0); transform: scale(1.14); }
.open.pre.in > img, .open.pre.in > video { clip-path: inset(0); transform: none; transition: clip-path 1200ms var(--ease-in-out), transform 1600ms var(--ease-expo); }
.js .half-l, .js .half-r { animation: rise 1000ms var(--ease-expo) both; }
.js .half-r { animation-delay: 140ms; }
.js .reel { animation: reel-in 1300ms var(--ease-in-out) 100ms both; }
.js .hero-pitch > * { animation: rise-s 900ms var(--ease-expo) 420ms both; }
.js .hero-pitch > *:nth-child(2) { animation-delay: 520ms; }
@keyframes rise { from { opacity: 0; transform: translateY(0.35em); } }
@keyframes rise-s { from { opacity: 0; transform: translateY(20px); } }
@keyframes reel-in { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: reduce) {

  .reveal.pre, .open.pre > img, .open.pre > video { opacity: 1; transform: none; clip-path: none; transition: none; }
  .js .half-l, .js .half-r, .js .reel, .js .hero-pitch > * { animation: none; }
  .hero { height: auto; }
  .hero-stage { position: relative; }
  .reel-track { transform: none; }
  .critic-soft span, .reel-caption span, .name { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .critic-ask { grid-column: 1 / 7; }
  .critic-answer { grid-column: 7 / 13; }
  .critic-course { grid-template-columns: 1fr; }
  .row-voice { grid-column: 1 / 4; }
  .row-body { grid-column: 4 / 9; }
  .row-pic { grid-column: 9 / 13; }
  .support-title { grid-column: 4 / 13; }
  .firms-text { grid-column: 1 / 8; }
  .firms-film { grid-column: 9 / 13; }
  .hero-pitch { max-width: 33vw; }
  .nav-links { display: none; }
}

/* ---------- Telefon ---------- */
@media (max-width: 720px) {
  :root { --step-display: 23vw; --step-big: 12vw; --step-giant: 12vw; }
  .hero { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: 0; display: block; --fw: calc(100vw - 2 * var(--m)); --fh: calc(var(--fw) * 0.75); }
  .sentence-wrap { position: relative; padding-top: 8px; }
  .sentence { position: static; transform: none; flex-direction: column; gap: calc(var(--fh) + 28px); }
  .half-r { align-self: flex-end; }
  .reel { top: calc(8px + var(--step-display) * 0.95 + 14px); bottom: auto; left: var(--m); height: var(--fh); overflow: hidden; border-radius: var(--r); }
  .reel-track { top: 0; transform: none; }
  .hero-foot { display: block; padding-top: 28px; padding-bottom: 8px; }
  .hero-pitch { max-width: none; }
  .hero-pitch .btn { width: 100%; }
  .reel-caption { display: none; }

  .critic-ask, .critic-answer, .support-title, .row-voice, .row-body, .row-pic, .about-portrait, .about-text, .firms-text, .firms-film, .price-note, .price-btn, .faq-row h2, .faq-row h3, .faq-row p { grid-column: 1 / -1; }
  .critic-answer { margin-top: 32px; }
  .critic-course { grid-template-columns: 1fr; }
  .critic-btn { width: 100%; }
  .critic-list { justify-items: stretch; }
  .support-title { padding-block: 0 56px; }
  .row-voice { max-width: none; margin-bottom: 12px; }
  .row-pic { margin-top: 28px; }
  .pic-a { width: 100%; aspect-ratio: 4 / 3; justify-self: stretch; }
  .pic-b { width: 72%; justify-self: end; }
  .pic-c { width: 56%; justify-self: start; }
  .about-portrait { position: static; margin-bottom: 32px; }
  .about-facts { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; }
  .verb, .step-note, .step-pic, .step:nth-of-type(even) .verb, .step:nth-of-type(even) .step-note, .step:nth-of-type(even) .step-pic { grid-column: 1 / -1; grid-row: auto; text-align: left; justify-self: start; }
  .step-pic { margin-top: 24px; width: 100%; }
  .firms-film { margin-top: 48px; max-width: 78%; }
  .price-note { margin-top: 32px; }
  .price-btn { justify-self: stretch; margin-top: 24px; }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table tr { padding: 16px; }
  .price-table th, .price-table td { padding: 0; }
  .price-table .num { text-align: left; margin-top: 6px; }
  .faq-row p { margin-top: 12px; }
  .contact { min-height: 0; gap: 72px; }
  .footer-top { flex-direction: column; }
  .footer-meta { grid-template-columns: 1fr; }
}

/* zdjęcia natury w jednym chłodnym, przygaszonym tonie: nastrój zamiast pocztówki */
/* wnętrza w lekko chłodnym tonie, żeby pasowały do błękitu i nie wyglądały jak katalog mebli */
.frame:not(.frame-anna) img, .row-pic img, .step-pic img { filter: grayscale(0.55) sepia(0.22) hue-rotate(176deg) saturate(1.2); }

/* na granatowych polach główny przycisk jest jasny, żeby odcinał się od tła */
.about .btn-accent, .contact .btn-accent, .footer .btn-accent { background: #eef4fb; color: #13294b; }
.about .btn-accent:hover, .contact .btn-accent:hover { background: #c9daee; }