/* Twoja Sprawa.nl, strona główna v3.
   Wygląd: strona/design/DESIGN-HANDOFF.md (v3) + prototyp/hero.html. Słowa: strona/strona-glowna-v2.md.
   Wszystkie wartości z tokens.css (v3, razem z bazą). */

/* ── Pomocnicze ── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.on-dark { --logo-ink: var(--cream-100); --logo-accent: var(--gold-400); color: var(--fg-on-dark-muted); }
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.nowrap { white-space: nowrap; }
.skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: var(--z-skip);
  padding: var(--space-3) var(--space-4);
  background: var(--cream-100); color: var(--wine-800);
  font-weight: 500; border-radius: var(--radius-sm);
  translate: 0 -200%;
}
.skip:focus-visible { translate: 0 0; }

/* ── Nagłówek ── */
.header-sentinel { position: absolute; top: 1.5rem; width: 1px; height: 1px; }
.site-header {
  position: relative; z-index: var(--z-header);
  height: var(--header-h);
  transition: background-color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.js .site-header { position: sticky; top: 0; }
.site-header > .container {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  border-bottom: 1px solid var(--line-on-dark);
  transition: border-color var(--dur) var(--ease);
}
.site-header[data-scrolled] { background: var(--cream-100); --logo-ink: var(--wine-800); --logo-accent: var(--gold-600); }
.site-header[data-scrolled] > .container { border-color: var(--line); }
.site-header[data-scrolled] .nav a { color: var(--ink-900); }
.site-header[data-scrolled] .burger { color: var(--ink-900); border-color: var(--line); }
.site-header[data-scrolled] .btn--secondary { background: var(--wine-800); border-color: var(--wine-800); color: var(--cream-100); }
.site-header[data-scrolled] :focus-visible { outline-color: var(--focus); }
@media (max-width: 47.99em) { .site-header.is-hidden:not(:focus-within) { translate: 0 -100%; } }
/* Telefon: pływający przycisk nie zasłania elementu z fokusem (WCAG 2.4.11) */
@media (max-width: 47.99em) { html.js { scroll-padding-bottom: calc(var(--control-h) + var(--space-8)); } }

.logo { display: flex; align-items: center; min-height: var(--tap-min); }
.logo svg { height: 1.875rem; width: auto; }
.logo svg path { transition: fill var(--dur) var(--ease); }
.header__side { display: flex; align-items: center; gap: var(--space-5); }
.nav { display: none; align-items: center; gap: var(--space-1); }
.nav a { padding: var(--space-3); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-on-dark-muted); text-decoration: none; }
.site-header .header__cta { display: none; }
.burger {
  display: none; place-items: center;
  width: var(--tap-min); height: var(--tap-min); padding: 0;
  background: transparent; color: var(--cream-100);
  border: 1px solid var(--line-on-dark); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.js .burger { display: grid; }
@media (min-width: 48em) { .logo svg { height: 2.625rem; } .site-header .header__cta { display: inline-flex; } }
@media (min-width: 75em) { .nav { display: flex; } .js .burger { display: none; } }
@media (hover: hover) {
  .nav a:hover { color: var(--cream-100); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
  .site-header[data-scrolled] .nav a:hover { color: var(--wine-800); }
  .burger:hover { background: rgb(201 164 106 / .12); }
}

/* ── Menu na telefonie (dialog na cały ekran) ── */
.menu {
  width: 100vw; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--wine-950); color: var(--cream-100);
}
.menu[open] { display: flex; flex-direction: column; overflow-y: auto; animation: menu-in var(--dur) var(--ease); }
.menu::backdrop { background: var(--wine-950); }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu__bar { flex-shrink: 0; height: var(--header-h); }
.menu__bar > .container {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-on-dark);
}
.menu .menu__close { display: grid; }
.menu__nav { display: grid; padding-inline: var(--gutter); }
.menu__nav a {
  min-height: var(--control-h-lg);
  display: flex; align-items: center;
  font: 400 var(--fs-menu) / 1.1 var(--font-serif);
  color: var(--cream-100); text-decoration: none;
  border-bottom: 1px solid var(--line-on-dark);
  transition: color var(--dur) var(--ease);
}
.menu__nav a:active { color: var(--gold-400); }
@media (hover: hover) { .menu__nav a:hover { color: var(--gold-400); } }
.menu__foot { margin-top: auto; padding: var(--space-6) var(--gutter); }
.menu__foot .btn { width: 100%; }

/* ── Przyciski ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--fs-button); font-weight: 500; letter-spacing: var(--track-button);
  line-height: 1.2; text-align: center; text-decoration: none;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.on-dark .btn--primary { background: var(--gold-400); color: var(--wine-950); }
.on-dark .btn--secondary { border: 1.5px solid var(--gold-400); color: var(--gold-400); }
.btn--sm { min-height: var(--control-h-sm); font-size: var(--fs-button-sm); }
@media (max-width: 47.99em) { .btn--full { width: 100%; font-size: var(--fs-button-sm); padding-inline: var(--space-3); } }
@media (min-width: 48em) { .btn--lg { min-height: var(--control-h-lg); font-size: var(--fs-button-lg); padding-inline: var(--space-8); } }
@media (hover: hover) {
  .on-dark .btn--primary:hover { background: var(--gold-300); box-shadow: var(--shadow-hover); translate: 0 -1px; }
  .on-dark .btn--secondary:hover { background: rgb(201 164 106 / .12); color: var(--gold-300); border-color: var(--gold-300); }
}
.on-dark .btn--primary:active { background: var(--gold-500); box-shadow: none; translate: 0 0; }

/* Gradient liczony na miejscu: w tokens.css --grad-wine zamraża --grad-at na poziomie :root (30% 30%),
   więc --grad-at ustawione w sekcji nie działało. Ta sama definicja, tylko na elemencie. */
.hero, .end, .e404, .compare__col--ts {
  --grad-wine: radial-gradient(circle at var(--grad-at, 30% 30%), var(--wine-600) 0%, var(--wine-800) 50%, var(--wine-950) 100%);
}

/* ── HERO: konstelacja spraw (z prototypu v3) ── */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-rows: 1fr;
  margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h);
  background: var(--grad-wine); --grad-at: 50% 38%;
}
.hero__inner {
  display: grid; justify-items: center; align-content: center; gap: var(--space-4);
  padding-block: var(--space-8); text-align: center;
}
.hero h1 { font-size: var(--fs-hero); line-height: 1.02; color: var(--cream-100); }
.hero h1 span { display: block; font-style: italic; color: var(--gold-400); }
.hero__lead { max-width: 36rem; font-size: var(--fs-lead); text-wrap: balance; }
.hero__cta { margin-top: var(--space-2); justify-self: stretch; }
.hero__note { font-size: var(--fs-sm); }

/* Dymki: wspólne */
.cases { justify-self: stretch; min-width: 0; }
.cases__label {
  margin-bottom: var(--space-3);
  font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--fg-on-dark-soft);
}
.cases__list { list-style: none; margin: 0; padding: 0; }
.case a {
  position: relative; display: flex; align-items: center;
  min-height: var(--tap-min); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 0;
  white-space: nowrap; text-decoration: none; line-height: 1.25;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.case a::after {
  content: ""; position: absolute; top: 100%; left: 0;
  width: .875rem; height: .5rem; background: inherit;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cases__list--right .case a { border-radius: var(--radius-bubble) var(--radius-bubble) 0 var(--radius-bubble); }
.cases__list--right .case a::after { left: auto; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* trzy warstwy głębi */
.case--front a { background: var(--cream-100); color: var(--ink-900); font-size: var(--fs-base); font-weight: 500; filter: drop-shadow(var(--shadow-bubble)); }
.case--mid a { background: var(--bubble-mid); color: var(--cream-100); font-size: var(--fs-sm); }
.case--back a { background: var(--bubble-back); color: var(--fg-on-dark-muted); font-size: var(--fs-xs); }
@media (hover: hover) { .case a:hover { background: var(--cream-100); color: var(--ink-900); translate: 0 -2px; } }
.case a:active { background: var(--gold-300); color: var(--wine-950); translate: 0 0; }
.case a:focus-visible { background: var(--cream-100); color: var(--ink-900); }

/* Telefon: dwa rzędy przewijane palcem w bok, bez automatu */
@media (max-width: 47.99em) {
  .cases__scroll {
    display: grid; gap: var(--space-4);
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--space-3);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    scroll-padding-inline: var(--space-10);
    mask-image: linear-gradient(90deg, transparent, #000 var(--space-5), #000 calc(100% - var(--space-10)), transparent);
  }
  .cases__scroll::-webkit-scrollbar { display: none; }
  .cases__list { display: flex; gap: var(--space-2); width: max-content; }
  .cases__list--right { padding-left: var(--space-8); }
  .case a { font-size: var(--fs-sm); }
}
/* Tablet i mały laptop: wyśrodkowana chmurka pod przyciskiem */
@media (min-width: 48em) and (max-width: 81.99em) {
  .cases { max-width: 46rem; justify-self: center; margin-top: var(--space-4); }
  .cases__scroll { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-3); }
  .cases__list { display: contents; }
}
@media (min-width: 48em) {
  .hero { min-height: min(100svh, 54rem); }
  .hero__inner { gap: var(--space-5); padding-block: var(--space-12); }
  .hero__cta { justify-self: center; }
}
/* Desktop od 1312 px: konstelacja po bokach, środek zawsze wolny */
@media (min-width: 82em) {
  .hero { --play: clamp(0rem, 50vw - var(--hero-clear) - 16.5rem, 10rem); }
  .cases { position: absolute; inset: var(--header-h) 0 3.5rem; margin: 0; max-width: none; pointer-events: none; }
  .cases__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cases__scroll, .cases__list { display: contents; }
  .case { position: absolute; top: var(--y); translate: 0 -50%; pointer-events: auto; }
  .cases__list--left .case { right: calc(50% + var(--hero-clear) + var(--k) * var(--play)); }
  .cases__list--right .case { left: calc(50% + var(--hero-clear) + var(--k) * var(--play)); }
}
@media (min-width: 82em) and (max-height: 44em) { .hero__inner { padding-block: var(--space-6); } }
/* Wejście: wiadomości przychodzą jedna po drugiej i zostają. Żadnego ruchu w pętli. */
@media (prefers-reduced-motion: no-preference) {
  .case a { animation: case-in 480ms var(--ease) both; animation-delay: calc(240ms + var(--i) * 90ms); }
  @keyframes case-in { from { opacity: 0; transform: translateY(.625rem) scale(.96); } to { opacity: 1; transform: none; } }
}

/* ── Sekcje jasne ── */
.section { padding-block: var(--section-y); }
.section--cream { background: var(--cream-100); }
.section--paper { background: var(--cream-50); }
.section h2 { margin-bottom: var(--space-8); font-size: var(--fs-h2); line-height: var(--lh-display); }
.section h2 em { font-style: italic; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-700); }

/* Znacznik [DO …]: tylko podgląd, nigdy produkcja */
.todo {
  display: inline-block; padding: 2px var(--space-2);
  font-size: var(--fs-eyebrow); font-weight: 500; line-height: 1.3;
  color: var(--gold-text); background: rgb(201 164 106 / .14);
  border: 1px dashed var(--gold-600); border-radius: var(--radius-sm);
}
.todo--dark { color: var(--cream-100); background: rgb(201 164 106 / .16); border-color: var(--gold-400); }

/* Link tekstowy ze strzałką (na jasnym) */
.text-link {
  display: inline-block; padding-block: var(--space-3);
  font-size: var(--fs-base); font-weight: 500; line-height: 1.5;
  color: var(--wine-800);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
.text-link:active { color: var(--wine-950); }
.text-link .icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-left: var(--space-2); transition: translate var(--dur) var(--ease); }
@media (hover: hover) {
  .text-link:hover { color: var(--wine-950); text-decoration-thickness: 2px; }
  .text-link:hover .icon { translate: 3px 0; }
}

/* 2. Każda sprawa jest inna */
.statement { text-align: center; }
.statement h2 { margin-bottom: var(--space-5); }

/* 3. Nie tylko doradzam. Załatwiam. */
.compare { display: grid; gap: var(--space-4); }
@media (min-width: 48em) { .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.compare__col { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-8); border-radius: var(--radius-md); }
@media (max-width: 47.99em) { .compare__col { padding: var(--space-6); } }
.compare__col h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.compare__col p { font-size: var(--fs-lead); line-height: var(--lh-body); }
.compare__col--plain { background: var(--cream-100); border: 1px solid var(--line); }
.compare__col--plain h3, .compare__col--plain p { color: var(--ink-500); }
.compare__col--ts { --grad-at: 85% 15%; background: var(--grad-wine); border: 1px solid var(--gold-400); box-shadow: var(--shadow-hover); }
.compare__col--ts h3 { font-style: italic; color: var(--gold-400); }
.compare__col--ts p { color: var(--cream-100); }
.compare__after {
  max-width: var(--container-narrow); margin-top: var(--space-8);
  padding-left: var(--space-6); border-left: 2px solid var(--gold-400);
  font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-700);
}

/* 4. W czym pomagam */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 64em) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.tile {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-8);
  background: var(--cream-50);
  border: 1px solid var(--line); border-top: 2px solid var(--gold-400); border-radius: var(--radius-md);
}
@media (max-width: 47.99em) { .tile { padding: var(--space-5); } }
.tile h3 { font-size: var(--fs-h3); line-height: 1.12; }
.tile p { color: var(--ink-700); }
.tiles__more { margin-top: var(--space-6); }

/* 5. Jak to wygląda */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10); } }
@media (min-width: 64em) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); } }
.step { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-6); border-top: 1px solid var(--gold-400); }
.step__n { font: 400 var(--fs-step) / 1 var(--font-serif); color: var(--gold-text); }
.step p { color: var(--ink-700); }

/* 6. Kim jestem */
.about { display: grid; gap: var(--space-8); justify-items: start; }
@media (min-width: 64em) { .about { grid-template-columns: auto minmax(0, 40rem); gap: var(--space-20); align-items: center; justify-content: center; } }
.about__text { display: grid; gap: var(--space-5); }
.about h2 { margin-bottom: 0; }
.about h2 em { display: block; }
.about h2 em::before {           /* oddzielnik: złota belka jak w logo (kreska w „A”) */
  content: ""; display: block;
  width: 2.5rem; height: 4px;
  margin-block: var(--space-3) var(--space-2);
  background: var(--gold-600);
}
.about__text p:not(.lead) { color: var(--ink-700); }
.arch {
  position: relative; isolation: isolate; aspect-ratio: 5 / 6;
  width: min(100% - var(--space-4), 17.5rem); margin-left: var(--space-4);
  --arch-radius: 50% 50% var(--radius-md) var(--radius-md) / 41.667% 41.667% var(--radius-md) var(--radius-md);
}
@media (min-width: 64em) { .arch { width: 21.25rem; } }
.arch::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  translate: calc(-1 * var(--space-4)) var(--space-4);
  border: 1.5px solid var(--gold-600); border-radius: var(--arch-radius);
}
.arch { display: block; }
.arch img {
  position: relative; width: 100%; height: 100%;
  object-fit: cover;
  background: var(--cream-200);
  border-radius: var(--arch-radius);
}

/* 8. Cena */
.price-card {
  display: grid; gap: var(--space-4);
  padding: var(--space-10);
  background: var(--cream-100);
  border: 1.5px solid var(--gold-400); border-radius: var(--radius-md);
  text-align: center;
}
@media (max-width: 47.99em) { .price-card { padding: var(--space-6); } }
.price-card h2 { margin-bottom: 0; }

/* 9. Pytania */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--space-16); padding-block: var(--space-2);
  cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { border-radius: var(--radius-sm); }
.faq__item h3 {
  font-family: var(--font-sans); font-size: var(--fs-faq); font-weight: 500; line-height: 1.3;
  color: var(--ink-900); text-wrap: pretty;
  transition: color var(--dur) var(--ease);
}
.faq__icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--gold-text); }
.faq__icon .v { transform-box: fill-box; transform-origin: center; transition: scale var(--dur) var(--ease); }
.faq__item[open] .faq__icon .v { scale: 1 0; }
.faq__item p { padding: 0 var(--space-12) var(--space-6) 0; line-height: 1.6; color: var(--ink-700); }
@media (max-width: 47.99em) { .faq__item p { padding-right: 0; } }
@media (hover: hover) { .faq__item summary:hover h3 { color: var(--wine-800); } }

/* 10. Koniec strony */
.end { --grad-at: 75% 20%; padding-block: var(--section-y); background: var(--grad-wine); }
.end__inner { display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.end h2 { font-size: var(--fs-display); line-height: var(--lh-display); color: var(--cream-100); }
.end h2 em { font-style: italic; color: var(--gold-400); }
.end__note { font-size: var(--fs-sm); }

/* Pływający przycisk: tylko telefon, tylko z JS */
.float-cta {
  position: fixed; z-index: var(--z-fab);
  inset-inline: var(--space-4); bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--control-h);
  background: var(--wine-800); color: var(--cream-100);
  border: 1px solid var(--gold-400); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-float);
  font-size: var(--fs-button); font-weight: 500; text-decoration: none;
  transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease), visibility var(--dur);
}
.float-cta .icon { color: var(--gold-400); }
.float-cta[hidden] { display: none; }
.float-cta:not(.is-visible) { opacity: 0; translate: 0 120%; visibility: hidden; }
@media (min-width: 48em) { .float-cta { display: none; } }
@media (hover: hover) { .float-cta:hover { background: var(--wine-950); } }

/* ── Strona 404 ── */
.e404 {
  --grad-at: 50% 40%;
  min-height: 100svh;
  display: grid; place-items: center;
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + var(--space-12)) var(--space-12);
  background: var(--grad-wine);
}
.e404__inner { max-width: 45rem; display: grid; justify-items: center; gap: var(--space-6); text-align: center; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-on-dark-soft); }
.e404 h1 { font-size: var(--fs-display); line-height: var(--lh-display); color: var(--cream-100); }
.e404 h1 span { display: block; font-style: italic; color: var(--gold-400); }
.link {
  padding-block: var(--space-3);
  font-size: var(--fs-base); font-weight: 500; line-height: 1.5;
  color: var(--gold-400);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.link:active { color: var(--gold-300); }
.link .icon { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; margin-left: var(--space-2); transition: translate var(--dur) var(--ease); }
@media (hover: hover) { .link:hover { color: var(--gold-300); } .link:hover .icon { translate: 3px 0; } }

@media print {
  .site-header, .float-cta, .menu { display: none; }
  .hero, .end { background: #fff; }
  .hero h1, .end h2 { color: var(--ink-900); }
}