/* ===========================================================================
   KUBA — podstrona Aloha Fungi
   ---------------------------------------------------------------------------
   Kolory i typografia wyciągnięte 5 sierpnia 2026 z żywego sklepu
   alohafungi.com (_next/static/css) oraz z pliku icon.svg. Jeśli marka
   zmieni tokeny, poprawia się je TYLKO w bloku :root poniżej.
   =========================================================================== */

:root {
  /* --- prosto ze sklepu --- */
  --papier:      oklch(0.991 0.004 91.445);   /* tło strony, ciepły krem */
  --papier-cien: oklch(0.985 0.008 91.481);   /* pas tła, o ton głębiej */
  --karta:       #ffffff;
  --tekst:       oklch(0.154 0.010 60.049);
  --przygasz:    oklch(0.502 0.018 67.396);   /* tekst drugoplanowy */
  --subtelny:    oklch(0.662 0.017 67.529);   /* podpisy, metryczki */
  --linia:       oklch(0.917 0.016 86.428);
  --terra:       oklch(0.574 0.148 41.326);   /* akcent główny */
  --terra-c:     oklch(0.514 0.142 39.759);   /* hover, tekst na kremie */
  --terra-j:     oklch(0.729 0.135 46.005);   /* akcent na ciemnym tle */
  --terra-mgla:  rgba(210, 98, 47, 0.12);
  --lawenda:     oklch(0.693 0.090 302.450);
  --lawenda-tlo: rgba(154, 138, 214, 0.12);

  /* --- z sygnetu marki (icon.svg) --- */
  --las:         #0E1A13;                     /* głęboka leśna zieleń */
  --las-2:       #16281D;
  --zloto:       #E0B45C;
  --zloto-j:     #F0CD7E;

  /* --- typografia --- */
  --font-tekst:  'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-naglowek: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- sygnet marki jako maska, wklejony wprost w CSS ---
     Plik `img/znak.svg` zostaje w repo jako źródło, ale maski SVG
     nie ładują się z adresów file://, więc w stylach siedzi data: URI.
     Po zmianie znaku przelicz go z img/znak.svg. */
  --znak: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='11.5 11.7 40.5 40.2'> <g transform='translate(9.5,9.5) scale(0.02225)' fill='%23000'> <path d='M 1422.8 1027.0 C 1397.6 1070.0 1351.0 1112.2 1309.4 1138.3 C 1297.0 1146.1 1257.1 1169.2 1245.1 1172.6 C 1239.2 1174.3 1239.3 1168.3 1240.7 1165.1 C 1241.8 1162.8 1271.6 1137.0 1277.5 1130.2 C 1308.3 1094.8 1368.9 1016.6 1337.4 969.7 C 1320.6 944.8 1282.6 939.3 1254.6 938.6 C 1134.6 935.5 987.7 992.2 881.4 1045.9 C 792.6 1090.8 652.8 1193.8 555.7 1194.5 C 385.4 1195.6 450.6 973.0 487.4 876.7 C 592.8 601.7 835.1 445.8 1129.7 543.2 C 1204.2 567.8 1274.7 609.8 1333.0 661.6 C 1339.8 668.2 1407.4 741.4 1437.6 827.9 C 1460.0 893.7 1458.2 966.2 1422.8 1027.0 M 1892.2 1118.3 L 1717.0 910.1 L 1823.8 659.9 C 1830.8 643.6 1822.1 624.8 1805.1 619.5 L 1545.2 539.1 L 1499.8 270.9 C 1496.9 253.4 1479.4 242.3 1462.2 247.0 L 1200.1 319.9 L 1016.9 118.8 C 1005.0 105.6 984.2 105.8 972.4 119.0 L 791.3 322.0 L 528.4 251.9 C 511.3 247.3 493.9 258.6 491.1 276.2 L 448.5 544.9 L 189.5 628.0 C 172.6 633.4 164.1 652.3 171.2 668.5 L 280.6 917.6 L 107.6 1127.6 C 96.3 1141.3 99.4 1161.8 114.2 1171.6 L 340.9 1322.0 L 308.9 1592.1 C 306.8 1609.8 320.5 1625.4 338.2 1625.6 L 610.3 1629.6 L 666.6 1745.2 C 704.0 1684.1 745.5 1602.9 777.2 1502.5 C 808.4 1403.7 820.9 1315.1 825.6 1246.0 C 825.8 1242.4 828.1 1239.4 831.4 1238.1 C 841 1234.4 850.6 1230.7 860.2 1227.0 C 866.2 1224.7 872.7 1229.1 872.6 1235.5 C 871.8 1313.0 862.8 1415.8 829.8 1531.7 C 795.3 1652.9 744.6 1747.5 701.2 1816.2 L 729.4 1874.1 C 737.2 1890.1 757.1 1895.9 772.2 1886.5 L 1003.1 1742.7 L 1097.5 1800.1 C 1109.5 1753.6 1121.7 1705.9 1128.9 1652.2 C 1154.9 1458.9 1143.4 1334.7 1121.6 1158.2 C 1124.7 1157.7 1119.9 1158.5 1122.9 1158.0 C 1152.2 1243.1 1186.7 1359.2 1197.5 1500.1 C 1208.3 1641.2 1195.6 1761.3 1179.6 1850.0 L 1235.6 1884.1 C 1250.8 1893.3 1270.6 1887.4 1278.2 1871.3 L 1394.8 1625.5 L 1666.8 1618.7 C 1684.5 1618.3 1698.0 1602.6 1695.7 1584.9 L 1660.9 1315.1 L 1886.1 1162.4 C 1900.8 1152.4 1903.6 1131.9 1892.2 1118.3'/> <path d='M 1389.8 499.6 L 1419.9 618.1 C 1431.1 662.1 1465.5 696.5 1509.5 707.7 L 1628.0 737.7 L 1509.5 767.8 C 1465.5 779.0 1431.1 813.4 1419.9 857.4 L 1389.8 975.9 L 1359.8 857.4 C 1348.6 813.4 1314.2 779.0 1270.2 767.8 L 1151.7 737.7 L 1270.2 707.7 C 1314.2 696.5 1348.6 662.1 1359.8 618.1 Z'/> </g> </svg>");

  /* --- rytm --- */
  --wrap: 1180px;
  --waski: 68ch;
  --sekcja: clamp(72px, 9vw, 132px);
  --r: 18px;   /* promień narożnika */
  --r-mala: 12px;
}

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 17.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--terra-c); text-decoration: none; border-bottom: 1px solid rgba(210,98,47,.28); transition: color .2s, border-color .2s; }
a:hover { color: var(--terra); border-color: var(--terra); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 4px;
}

/* ===========================================================================
   Typografia
   =========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-naglowek);
  font-weight: 400;
  font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 60;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.95rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.06rem; font-family: var(--font-tekst); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .715rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--terra-c);
  margin-bottom: 1.1rem;
}
.band-dark .eyebrow, .contact .eyebrow { color: var(--zloto); }

.lede { font-size: clamp(1.13rem, 1.7vw, 1.32rem); line-height: 1.6; color: var(--tekst); }
.lead-p { font-size: 1.1rem; }
.muted { color: var(--przygasz); }
.small { font-size: .93rem; }
.tiny  { font-size: .84rem; line-height: 1.6; color: var(--subtelny); }

/* akcent w zdaniu — subtelne podkreślenie, nie marker */
.accent {
  font-style: normal;
  background-image: linear-gradient(transparent 62%, var(--terra-mgla) 62%);
  padding: 0 .06em;
}
.band-dark .accent, .contact .accent {
  background-image: linear-gradient(transparent 62%, rgba(224,180,92,.22) 62%);
}

blockquote {
  margin: 1.9em 0;
  padding-left: 1.15em;
  border-left: 2px solid var(--terra);
  font-family: var(--font-naglowek);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.band-dark blockquote { border-color: var(--zloto); }

/* ===========================================================================
   Układ
   =========================================================================== */

.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 32px); } }

section { padding: var(--sekcja) 0; position: relative; }
section.tight { padding-top: clamp(38px, 6vw, 72px); }

.band       { background: var(--papier-cien); }
.band-linia { border-block: 1px solid var(--linia); }
.band-dark  { background: var(--las); color: rgba(255,255,255,.82); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .muted { color: rgba(255,255,255,.6); }
.band-dark a { color: var(--zloto-j); border-color: rgba(224,180,92,.4); }
.band-dark a:hover { color: #fff; border-color: #fff; }

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.grid2.top { align-items: start; }
.grid2.wide-left  { grid-template-columns: 1.08fr .92fr; }
.grid2.wide-right { grid-template-columns: .92fr 1.08fr; }

/* tekst + kolumna boczna */
.article { display: grid; grid-template-columns: minmax(0,1.42fr) minmax(0,.58fr); gap: clamp(32px, 5vw, 68px); align-items: start; }
.article .text { max-width: var(--waski); }

.rail { position: sticky; top: 92px; }
.rail-label {
  display: block; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--subtelny);
  padding-bottom: .7rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--linia);
}
.band-dark .rail-label { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.14); }

@media (max-width: 900px) {
  .grid2, .grid2.wide-left, .grid2.wide-right, .article { grid-template-columns: 1fr; }
  .rail { position: static; }
  .article .text { max-width: none; }
}

/* ===========================================================================
   Nawigacja
   =========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--papier) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.nav.scrolled { border-bottom-color: var(--linia); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; }

.brand { display: inline-flex; align-items: center; gap: 11px; border: 0; color: var(--tekst); }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.brand b { font-family: var(--font-naglowek); font-weight: 400; font-size: 1.16rem; letter-spacing: -.01em; }
.brand span { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .17em; text-transform: uppercase; color: var(--subtelny); }
.brand .bd { display: flex; flex-direction: column; line-height: 1.2; }

.nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav a { border: 0; font-size: .93rem; color: var(--przygasz); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--tekst); }
/* przycisk w nawigacji musi wygrać z kolorem odnośnika powyżej */
.nav a.btn, .nav a.btn:hover { color: #fff; padding: 10px 20px; }
@media (max-width: 860px) { .hide-sm { display: none; } .nav ul { gap: 16px; } }

/* ===========================================================================
   Przyciski
   =========================================================================== */

.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.9rem; }
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 13px 26px; border-radius: 999px; border: 1px solid var(--terra);
  background: var(--terra); color: #fff;
  font-size: .96rem; font-weight: 500; letter-spacing: .005em;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 10px 24px -16px rgba(160,70,30,.9);
}
.btn:hover { background: var(--terra-c); border-color: var(--terra-c); color: #fff; transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--terra-c); box-shadow: none; }
.btn.ghost:hover { background: var(--terra-mgla); color: var(--terra-c); }
.band-dark .btn { background: var(--zloto); border-color: var(--zloto); color: var(--las); box-shadow: none; }
.band-dark .btn:hover { background: var(--zloto-j); border-color: var(--zloto-j); color: var(--las); }
.band-dark .btn.ghost { background: transparent; color: var(--zloto-j); border-color: rgba(224,180,92,.5); }
.band-dark .btn.ghost:hover { background: rgba(224,180,92,.12); color: var(--zloto-j); }

/* ===========================================================================
   Zdjęcia
   =========================================================================== */

.fr { position: relative; overflow: hidden; border-radius: var(--r); background: var(--papier-cien); }
/* Zdjęcia pochodzą z sesji do Splotu i są chłodne. Delikatne ocieplenie
   wprowadza je w tę samą temperaturę, co kremowe tło Aloha Fungi. */
.fr img { width: 100%; object-fit: cover; filter: sepia(.16) saturate(1.06) contrast(1.02) brightness(1.01); }
.fr-arch { border-radius: 260px 260px var(--r) var(--r); }
.fr-offset { border-radius: var(--r) 200px var(--r) 200px; }
.fr figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 20px 14px; font-size: .82rem; color: #fff;
  background: linear-gradient(transparent, rgba(14,26,19,.72));
}

/* delikatne odsłonięcie */
.reveal img { transform: scale(1.06); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.reveal.in img { transform: scale(1); }

.figrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(28px, 4vw, 52px); }
@media (max-width: 720px) { .figrow { grid-template-columns: 1fr 1fr; } .figrow > :last-child { display: none; } }

/* ===========================================================================
   Hero
   =========================================================================== */

.hero { padding-top: clamp(34px, 5vw, 66px); padding-bottom: clamp(46px, 6vw, 92px); }
.hero .fr { box-shadow: 0 40px 80px -46px rgba(30,18,10,.5); }

/* ===========================================================================
   Sygnet marki w tle
   ---------------------------------------------------------------------------
   Jeden duży znak na sekcję, celowo przycięty krawędzią kadru, bez obrotu.
   Rysowany maską CSS z `img/znak.svg`, więc barwę bierze z tła elementu
   i w każdej sekcji może być inna. Wcześniejsza wersja wklejała obrócony
   kafelek favicona — stąd wrażenie naklejki.
   =========================================================================== */

/* `clip` zamiast `hidden`: przycina znak do sekcji, ale nie robi z niej
   kontenera przewijania, więc lepki pasek boczny nadal działa. */
.ma-znak { overflow: clip; }
.ma-znak > .wrap { position: relative; z-index: 1; }

.znak {
  position: absolute; z-index: 0; pointer-events: none;
  aspect-ratio: 1;
  background: var(--terra); opacity: .055;
  -webkit-mask: var(--znak) no-repeat center / contain;
          mask: var(--znak) no-repeat center / contain;
  will-change: transform;
}
.band-dark .znak, .contact .znak { background: var(--zloto); opacity: .10; }

/* Hero: znak wychodzi zza portretu i ucieka za prawą krawędź. */
.znak-hero { width: min(680px, 62vw); right: -17%; top: 4%; opacity: .07; }
/* Ciemne pasy: znak zakotwiczony w dolnym rogu, w połowie poza kadrem. */
.znak-dol   { width: min(660px, 58vw); right: -20%; bottom: -30%; }
.znak-dol-l { width: min(580px, 52vw); left: -19%;  bottom: -28%; }

/* Delikatna siatka punktów — ta sama, której marka używa u siebie
   (radial-gradient co 26 px). Wygaszona ku brzegom, żeby nie robiła kraty. */
.kropki { position: relative; }
.kropki::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(224,180,92,.14) 1.3px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 12%, transparent 76%);
          mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 12%, transparent 76%);
}
.kropki > .wrap { position: relative; z-index: 1; }

/* Zdanie pod hero. Zastąpiło trzy liczniki, bo liczby same z siebie
   niewiele mówiły. Sygnet marki służy tu za znak przy cytacie. */
.deklaracja {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 2.5rem; padding-top: 24px;
  border-top: 1px solid var(--linia);
  font-family: var(--font-naglowek); font-weight: 400;
  font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 40;
  font-size: clamp(1.16rem, 1.8vw, 1.42rem); line-height: 1.34;
  letter-spacing: -.01em; max-width: 36ch; text-wrap: balance;
}
.deklaracja-znak {
  flex: none; width: 27px; height: 27px; margin-top: .18em;
  background: var(--terra);
  -webkit-mask: var(--znak) no-repeat center / contain;
          mask: var(--znak) no-repeat center / contain;
}

/* ===========================================================================
   Karty — oferta i cennik
   =========================================================================== */

.karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(34px, 4vw, 56px); align-items: stretch; }
@media (max-width: 900px) { .karty { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.karta {
  display: flex; flex-direction: column;
  background: var(--karta);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 30px 28px 28px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.karta:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -34px rgba(30,18,10,.42); border-color: rgba(210,98,47,.35); }
.karta.wyroznik { border-color: rgba(210,98,47,.42); box-shadow: 0 20px 44px -34px rgba(160,70,30,.55); }

.karta .naglowek-karty { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.karta h3 { margin: 0; font-size: 1.32rem; }
.karta .cena {
  font-family: var(--font-naglowek); font-size: 1.65rem; line-height: 1;
  color: var(--terra-c); white-space: nowrap;
}
.karta .cena.wolne { color: var(--las); }
.karta .czas {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--subtelny); margin-top: .7rem;
}
.karta p { margin-top: 1rem; font-size: .97rem; color: var(--przygasz); }
.karta ul { margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: .95rem; }
.karta ul li { position: relative; padding-left: 1.35em; margin-bottom: .5em; color: var(--przygasz); }
.karta ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--terra); opacity: .55;
}
.karta .stopka-karty { margin-top: auto; padding-top: 1.6rem; }
.karta .btn { width: 100%; justify-content: center; }

/* ścieżka wejścia: bezpłatna ankieta i to, co odblokowuje wersja płatna */
.ankieta {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(26px, 4vw, 54px); align-items: start;
  margin-top: clamp(30px, 4vw, 48px);
  background: var(--karta); border: 1px solid var(--linia);
  border-radius: var(--r); padding: clamp(26px, 3.5vw, 40px);
}
.ankieta h3 { margin-top: 0; }
.ankieta p { color: var(--przygasz); font-size: .99rem; }
.ankieta .btns { margin-top: 1.5rem; }
.ankieta-plus {
  border-left: 1px solid var(--linia);
  padding-left: clamp(22px, 3vw, 40px);
}
.ankieta-plus h4 { margin-top: 0; color: var(--terra-c); }
.ankieta-plus p { font-size: .94rem; }
@media (max-width: 900px) {
  .ankieta { grid-template-columns: 1fr; }
  .ankieta-plus { border-left: 0; border-top: 1px solid var(--linia); padding-left: 0; padding-top: 24px; }
}

/* lista „na czym to polega" */
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { position: relative; padding-left: 1.4em; margin-bottom: .72em; }
.plain li::before { content: ''; position: absolute; left: 0; top: .68em; width: 7px; height: 1px; background: var(--terra); }
.band-dark .plain li::before { background: var(--zloto); }

/* kroki — jak wygląda spotkanie */
.kroki { list-style: none; counter-reset: k; margin: 2rem 0 0; padding: 0; }
.kroki li { counter-increment: k; position: relative; padding-left: 3.2rem; margin-bottom: 1.5rem; }
.kroki li::before {
  content: counter(k, decimal-leading-zero);
  position: absolute; left: 0; top: .1em;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em;
  color: var(--terra); border: 1px solid var(--linia); border-radius: 50%;
  width: 2.3rem; height: 2.3rem; display: grid; place-items: center;
}
.band-dark .kroki li::before { color: var(--zloto); border-color: rgba(255,255,255,.18); }
.kroki b { display: block; margin-bottom: .2rem; font-weight: 600; }
.kroki span { color: var(--przygasz); font-size: .97rem; }
.band-dark .kroki span { color: rgba(255,255,255,.62); }

/* karta w kolumnie bocznej */
.rail-card {
  background: var(--karta); border: 1px solid var(--linia);
  border-radius: var(--r-mala); padding: 22px 22px 20px;
}
.band-dark .rail-card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.rail-card h4 { margin-top: 0; }
.rail-card ul { font-size: .93rem; color: var(--przygasz); }
.band-dark .rail-card ul { color: rgba(255,255,255,.72); }

/* wtrącenie / uwaga */
.note {
  background: var(--lawenda-tlo);
  border: 1px solid rgba(154,138,214,.28);
  border-radius: var(--r-mala);
  padding: 22px 24px;
  font-size: .96rem;
}
.note p { margin-bottom: .8em; }
.note :last-child { margin-bottom: 0; }

/* ===========================================================================
   Pytania
   =========================================================================== */

.faq { max-width: 800px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--linia); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-family: var(--font-naglowek); font-size: clamp(1.08rem, 1.7vw, 1.24rem);
  line-height: 1.3; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 1.5px solid var(--terra); border-bottom: 1.5px solid var(--terra);
  transform: rotate(45deg); transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 0 24px; color: var(--przygasz); max-width: 66ch; }

/* ===========================================================================
   Kontakt i stopka
   =========================================================================== */

.contact { background: var(--las); color: rgba(255,255,255,.82); }
.contact h2, .contact h3 { color: #fff; }
.contact .lede { color: rgba(255,255,255,.78); }
.contact .muted { color: rgba(255,255,255,.58); }
.contact a { color: var(--zloto-j); border-color: rgba(224,180,92,.4); }
.contact a:hover { color: #fff; border-color: #fff; }
.contact .btn { background: var(--zloto); border-color: var(--zloto); color: var(--las); box-shadow: none; }
.contact .btn:hover { background: var(--zloto-j); border-color: var(--zloto-j); }
.contact .btn.ghost { background: transparent; color: var(--zloto-j); border-color: rgba(224,180,92,.5); }
.contact .btn.ghost:hover { background: rgba(224,180,92,.12); }

footer {
  background: var(--las-2); color: rgba(255,255,255,.52);
  font-size: .87rem; padding: 34px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
footer a { color: rgba(255,255,255,.72); border: 0; }
footer a:hover { color: #fff; }
footer .fmark { display: flex; align-items: center; gap: 11px; }
footer .fmark img { width: 26px; height: 26px; border-radius: 7px; }

/* zastrzeżenie prawne */
.zastrzezenie {
  border-top: 1px solid var(--linia);
  padding-top: 22px; margin-top: clamp(40px, 5vw, 64px);
  font-size: .84rem; line-height: 1.65; color: var(--subtelny);
  max-width: 80ch;
}

/* ===========================================================================
   Animacje wejścia
   =========================================================================== */

[data-anim] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
[data-anim="left"]  { transform: translate3d(-26px, 0, 0); }
[data-anim="right"] { transform: translate3d(26px, 0, 0); }
[data-anim].in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .1s; }
[data-delay="2"] { transition-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; transform: none; }
  .reveal img { transform: none; }
}

/* ===========================================================================
   Druk — żeby dało się wysłać stronę jako PDF
   =========================================================================== */

@media print {
  .nav, .znak-tlo, .btns { display: none; }
  body { background: #fff; font-size: 11pt; }
  section { padding: 18pt 0; }
  .band-dark, .contact { background: #fff !important; color: #000 !important; }
  .band-dark h2, .contact h2, .band-dark h3, .contact h3 { color: #000 !important; }
}