/* ============================================================
   SkillUp · Lead magnet — design system
   Estetyka: płaskie tło, karty na wyraźnej krawędzi, bez poświat.
   Motyw w pełni adaptacyjny: light / dark (system + ręczny override).
   Akcenty: stalowy błękit = interakcje, bursztyn = wyróżnienie (Top 1).
   ============================================================ */

/* ------------------------------------------------------------
   PALETA „GRAFIT" (2026-08-25). Zastąpiła zieleń z teal — ta para
   jest znakiem rozpoznawczym generowanych szablonów i tak ją czytano.
   Baza: grafit neutralny. Akcent: stalowy błękit. Bursztyn z logo:
   wyłącznie marker wyróżnienia (Top 1, „Wybór Lukasza", eyebrow).
   Nazwy --teal / --gold zostają historyczne — zmiana wymagałaby
   ruszenia ~450 linii użyć bez żadnego zysku.
   ------------------------------------------------------------ */
:root {
  /* Tło płaskie. Był ukośny gradient w trzech przystankach plus dwie
     radialne poświaty w body::before — te ucięte na 42% rysowały na
     ciemnym tle widoczne kręgi. Usunięte 2026-09-01. */
  --bg:#eceef1;

  --ink:#16191d;
  --muted:#5a626c;
  --line: rgba(22,25,29,.16);

  /* Mniej mleka, więcej krawędzi. Cień: warstwa kontaktowa + jedna
     miękka, zamiast jednego rozlanego na 44 px. */
  --glass:#ffffff;
  --glass-strong:#ffffff;
  --glass-brd: rgba(22,25,29,.15);
  --glass-sh: 0 1px 2px rgba(16,20,26,.07), 0 8px 20px rgba(16,20,26,.07);

  --teal:#2f5d7c;
  --teal-strong:#24485f;
  --teal-soft: rgba(47,93,124,.11);
  --gold:#956109;                    /* #D38A0D przyciemniony do 4.5:1 */
  --gold-soft: rgba(149,97,9,.12);

  /* kolory rankingu (podium: złoto / srebro / brąz) */
  --rank1:#8a6a1f; --rank1-soft: rgba(138,106,31,.13);
  --rank2:#525a63; --rank2-soft: rgba(82,90,99,.13);
  --rank3:#7d5236; --rank3-soft: rgba(125,82,54,.12);

  /* Przycisk grafitowy, nie kolorowy — hierarchia z kontrastu. */
  --btn-grad:#1d2229;
  --btn-ink:#ffffff;
  --danger:#a63b38;

  /* Cienie. Wcześniej rgba(15,128,113) i rgba(23,43,71) wpisane
     na sztywno w siedmiu miejscach — to była zielona aureola pod CTA,
     która zostawała nawet po zmianie palety. */
  --accent-sh: rgba(16,20,26,.22);
  --accent-sh-strong: rgba(16,20,26,.30);
  --soft-sh: rgba(16,20,26,.07);
  --soft-sh-strong: rgba(16,20,26,.10);

  --radius:16px;
  /* 2026-07-07 (decyzja Lukasza): nagłówki tym samym fontem co tekst — Inter.
     Lora wycofana (zmienna --serif zostaje dla łatwego rollbacku). */
  --serif:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

/* Ciemny motyw zgrany z logo: koło SkillUp ma #2e323b, czyli łupek
   o odcieniu 222° i nasyceniu 12%, nie neutralną szarość. TŁO STRONY
   dostaje dokładnie ten kolor — logo leży na tle, więc to te dwie
   płaszczyzny oko porównuje. Karta i element podniesiony idą o krok
   i dwa jaśniej, tym samym odcieniem. */
:root[data-theme="dark"] {
  --bg:#2e323b;
  --ink:#e7e9ec;
  --muted:#aab2bd;
  --line: rgba(255,255,255,.12);
  --glass:#3b404c;
  --glass-strong:#464c5a;
  --glass-brd: rgba(255,255,255,.11);
  --glass-sh: 0 1px 2px rgba(0,0,0,.45);
  --teal:#7fb0d4;
  --teal-strong:#9cc5e3;
  --teal-soft: rgba(127,176,212,.15);
  --gold:#eb9a0e;                    /* #D38A0D rozjaśniony do 4.5:1 */
  --gold-soft: rgba(235,154,14,.15);
  --rank1:#d4a544; --rank1-soft: rgba(212,165,68,.16);
  --rank2:#9aa4ae; --rank2-soft: rgba(154,164,174,.15);
  --rank3:#c08a5e; --rank3-soft: rgba(192,138,94,.16);
  /* Odwrócony przycisk: jasny na grafitowym tle. */
  --btn-grad:#e7e9ec;
  --btn-ink:#14171a;
  --danger:#e07b78;
  --accent-sh: rgba(0,0,0,.55);
  --accent-sh-strong: rgba(0,0,0,.65);
  --soft-sh: rgba(0,0,0,.34);
  --soft-sh-strong: rgba(0,0,0,.42);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#2e323b;
    --ink:#e7e9ec;
    --muted:#aab2bd;
    --line: rgba(255,255,255,.12);
    --glass:#3b404c;
    --glass-strong:#464c5a;
    --glass-brd: rgba(255,255,255,.11);
    --glass-sh: 0 1px 2px rgba(0,0,0,.45);
    --teal:#7fb0d4;
    --teal-strong:#9cc5e3;
    --teal-soft: rgba(127,176,212,.15);
    --gold:#eb9a0e;                    /* #D38A0D rozjaśniony do 4.5:1 */
    --gold-soft: rgba(235,154,14,.15);
    --rank1:#d4a544; --rank1-soft: rgba(212,165,68,.16);
    --rank2:#9aa4ae; --rank2-soft: rgba(154,164,174,.15);
    --rank3:#c08a5e; --rank3-soft: rgba(192,138,94,.16);
    --btn-grad:#e7e9ec;
    --btn-ink:#14171a;
    --danger:#e07b78;
    --accent-sh: rgba(0,0,0,.55);
    --accent-sh-strong: rgba(0,0,0,.65);
    --soft-sh: rgba(0,0,0,.34);
    --soft-sh-strong: rgba(0,0,0,.42);

    color-scheme: dark;
  }
}

* { box-sizing:border-box; margin:0; padding:0; }
/* atrybut hidden MUSI wygrywać z display:flex/grid na klasach
   (inaczej np. banner cookies "nie znika" po kliknięciu) */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:color .3s ease;
}
.wrap { max-width:780px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* ----- screens ----- */
.screen { display:none; position:relative; z-index:1; }
.screen.active { display:block; animation:fade .22s var(--ease); }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ----- typografia ----- */
h1 { font-family:var(--serif); font-weight:600; font-size:clamp(34px,6vw,56px); line-height:1.07; letter-spacing:-.015em; color:var(--ink); }
h2 { font-family:var(--serif); font-weight:600; font-size:clamp(24px,4vw,34px); line-height:1.16; color:var(--ink); }
.eyebrow { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.accent-line { width:54px; height:4px; background:var(--btn-grad); border-radius:2px; margin:0 0 22px; }

/* ----- logo ----- */
.brand { display:flex; align-items:center; gap:11px; }
.brand img { width:40px; height:40px; display:block; }
.brand-name { font-weight:600; font-size:15px; letter-spacing:.01em; }

/* ----- przyciski ----- */
.btn {
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  font-family:var(--sans); font-size:17px; font-weight:600;
  padding:15px 30px; border-radius:12px; text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn-primary { background:var(--btn-grad); color:var(--btn-ink); box-shadow:0 6px 18px var(--accent-sh); }
.btn-primary:hover { box-shadow:0 10px 24px var(--accent-sh); filter:brightness(1.06); }
.btn[disabled] { opacity:1; cursor:not-allowed; transform:none; }
/* Nieaktywny CTA: płaskie tło, zero cienia. Samo opacity:.5 na jasnym
   przycisku w ciemnym motywie dawało szary prostokąt, który dalej
   wyglądał na klikalny. */
.btn-primary[disabled] { background:var(--glass); color:var(--muted);
  border:1px solid var(--glass-brd); box-shadow:none; }

/* ----- globalny pasek górny: logo po lewej, motyw po prawej ----- */
.site-top { padding:22px 0 0; position:relative; z-index:5; }
.top-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; }

/* ----- przełącznik motywu (pill w pasku górnym) ----- */
.theme-toggle {
  width:31px; height:31px; border-radius:9px; flex:0 0 auto;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; color:var(--muted);
  border:1px solid var(--glass-brd); cursor:pointer;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.theme-toggle::after { content:""; position:absolute; inset:-7px; }
.theme-toggle:hover { color:var(--ink); border-color:var(--line); }
.theme-toggle svg { width:14px; height:14px; }

/* ----- szkło (utility) ----- */
.glass {
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh);
}

/* ===== HERO ===== */
/* 66px = wysokość globalnego paska (.site-top) */
#hero.active { min-height:calc(100vh - 66px); display:flex; flex-direction:column;
  justify-content:center; padding:10px 0 96px; }
.hero-main { margin:auto 0; }
#hero .lede { font-size:20px; color:var(--muted); max-width:560px; margin:18px 0 34px; }
#hero h1 { margin-top:6px; }
.hero-meta { margin-top:14px; font-size:12px; color:var(--muted); }
.hero-foot { font-size:12px; color:var(--muted); }

/* ===== QUIZ ===== */
#quiz.active { min-height:calc(100vh - 66px); padding:24px 0 60px; }
.quiz-head { padding:8px 0 6px; }
.quiz-head-row { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.step-count { font-size:13px; color:var(--muted); font-weight:500; }
/* wyjście z quizu — powrót na start + reset odpowiedzi */
.quiz-exit { background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:13px; color:var(--muted); padding:6px 0; transition:color .15s var(--ease); }
.quiz-exit:hover { color:var(--teal); }
.progress { height:7px; background:var(--glass); border:1px solid var(--glass-brd); border-radius:4px; overflow:hidden; margin:16px 0 6px; }
.progress > i { display:block; height:100%; background:var(--btn-grad); width:0; border-radius:4px; transition:width .3s var(--ease); }
.q-card { padding:22px 0 0; }
.q-card h2 { margin:10px 0 14px; max-width:620px; }
.q-hint { font-size:13px; color:var(--muted); margin:0 0 20px; }
.options { display:flex; flex-direction:column; gap:12px; max-width:620px; }
.opt {
  display:flex; align-items:center; gap:14px; text-align:left;
  border-radius:13px; padding:17px 20px; cursor:pointer;
  color:var(--ink); font-size:17px; font-family:var(--sans);
  background:var(--glass);
  border:1px solid var(--glass-brd);
  transition:background .15s var(--ease), border-color .15s var(--ease);
}
.opt:hover { border-color:var(--teal); background:var(--teal-soft); }
.opt .dot { width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex:0 0 auto; transition:.15s; }
.opt:hover .dot { border-color:var(--teal); }
#opts.multi .dot { border-radius:6px; }
.opt.sel { border-color:var(--teal); background:var(--teal-soft); }
.opt.sel .dot { border-color:var(--teal); background:var(--teal); box-shadow:inset 0 0 0 3px var(--glass-strong); }
.q-nav { display:flex; justify-content:space-between; align-items:center; margin-top:30px; }
.back { background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; font-family:var(--sans); padding:6px 0; }
.back:hover { color:var(--ink); }

/* ===== EMAIL GATE ===== */
#gate.active { min-height:100vh; display:flex; align-items:center; padding:60px 0; }
.gate-box {
  background:var(--glass-strong);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh);
  border-radius:22px; padding:46px 42px; width:100%;
}
.gate-box h2 { margin:14px 0 12px; }
.gate-box p { color:var(--muted); margin-bottom:26px; max-width:520px; }
.field { margin-bottom:16px; }
.field input[type=email] {
  width:100%; padding:15px 18px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--glass); color:var(--ink); font-size:17px; font-family:var(--sans);
}
.field input[type=email]::placeholder { color:var(--muted); }
.field input[type=email]:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.consent { display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--muted); margin-bottom:22px; line-height:1.45; cursor:pointer; }
.consent input { margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--teal); }
.consent a { color:var(--teal); }
.err { color:var(--danger); font-size:13px; margin-bottom:14px; display:none; font-weight:500; }
.gate-note { font-size:12px; color:var(--muted); margin-top:18px; }

/* ===== RESULTS ===== */
#results.active { padding:46px 0 60px; }
.res-head { margin-bottom:30px; }
.res-head h2 { margin:12px 0 8px; }
.res-head p { color:var(--muted); max-width:560px; }

.card {
  position:relative; overflow:hidden; border-radius:var(--radius);
  padding:24px 26px; margin-bottom:16px;
  background:var(--glass);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh);
}
.rank {
  display:inline-flex; align-items:center; font-family:var(--serif); font-size:15px; font-weight:600;
  color:var(--teal); background:var(--teal-soft); border-radius:8px; padding:3px 11px; margin-bottom:10px;
}
.card.gold .rank { color:var(--gold); background:var(--gold-soft); }
/* kolory per miejsce (podium) — mają priorytet nad .gold.
   UWAGA: barwimy WYŁĄCZNIE plakietkę. Pionowy pasek w kolorze rangi
   po lewej krawędzi karty (`border-left`/`::before`) był tu do 01.09.2026
   i został zdjęty — to najbardziej rozpoznawalny wzorzec generowanych
   interfejsów. Nie przywracamy go. */
.card.rank-1 .rank { color:var(--rank1); background:var(--rank1-soft); }
.card.rank-2 .rank { color:var(--rank2); background:var(--rank2-soft); }
.card.rank-3 .rank { color:var(--rank3); background:var(--rank3-soft); }
.card h3 { font-family:var(--serif); font-size:24px; font-weight:600; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.card h3 small { font-family:var(--sans); font-size:13px; color:var(--muted); font-weight:500; }
.card .match { float:right; font-size:13px; color:var(--muted); font-weight:600; }
.card .why { margin:12px 0 14px; color:var(--ink); opacity:.92; }
.card .price { font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px; }
.card .price a { color:var(--teal); text-decoration:none; }
.card .price a:hover { text-decoration:underline; }

/* notka o cenach pod kartami wyniku (sync z tabelą cen w PDF) */
.price-note { font-size:12px; color:var(--muted); margin:2px 0 0; max-width:560px; }

/* stan ekranu wyniku, zanim dolecą karty z /recommend (ranking liczy backend).
   Wysokość zbliżona do jednej karty, żeby layout nie skakał. */
.res-state {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; min-height:196px; padding:36px 26px; text-align:center;
  border-radius:var(--radius); background:var(--glass);
  border:1px solid var(--glass-brd); box-shadow:var(--glass-sh);
}
.res-state p { margin:0; max-width:440px; color:var(--muted); }
.res-state .btn { margin-top:2px; }
.res-error p { color:var(--ink); opacity:.92; }
.res-spin {
  width:28px; height:28px; border-radius:50%;
  border:3px solid var(--teal-soft); border-top-color:var(--teal);
  animation:res-spin .8s linear infinite;
}
@keyframes res-spin { to { transform:rotate(360deg); } }

/* "Wybór Lukasza" — osobisty pick (chmurka z okrągłym awatarem) */
.luke-pick { clear:both; display:flex; width:fit-content; max-width:100%; align-items:center; gap:11px; margin:8px 0 2px; padding:7px 15px 7px 7px; border-radius:18px; background:var(--glass-strong); border:1px solid var(--glass-brd); box-shadow:0 4px 14px var(--soft-sh); }
.luke-pick img { width:34px; height:34px; border-radius:50%; object-fit:cover; flex:0 0 auto; border:1.5px solid var(--gold); }
.luke-pick .lp-txt { display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.luke-pick .lp-label { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); }
.luke-pick .lp-note { font-size:13px; color:var(--ink); opacity:.92; }

/* "warto też rozważyć" — mostek prowadzący do pełnego zestawienia (PDF) */
.also { margin:34px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.also-label { font-size:15px; color:var(--teal); font-weight:600; margin-bottom:14px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chip { font-size:13px; border:1px solid var(--line); border-radius:20px; padding:7px 15px; color:var(--ink); opacity:.92; background:var(--glass); transition:border-color .15s var(--ease), background .15s var(--ease); }
.chip:hover { border-color:var(--teal); background:var(--teal-soft); }
.also-bridge { margin:18px 0 0; max-width:560px; font-size:15px; color:var(--ink); opacity:.9; line-height:1.55; }
.also-bridge strong { color:var(--ink); opacity:1; font-weight:600; }
.also-cue { display:flex; align-items:center; justify-content:center; gap:8px; margin:22px 0 -8px; color:var(--teal); font-weight:600; font-size:13px; letter-spacing:.01em; }
.also-cue i { font-style:normal; font-size:17px; line-height:1; animation:cue-nudge 1.8s var(--ease) infinite; }
@keyframes cue-nudge { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* CTA kursu (szklana karta z akcentem) */
.course {
  border-radius:22px; padding:40px 38px; margin-top:38px; position:relative; overflow:hidden;
  background:var(--teal-soft);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh);
}
.course h2 { margin:12px 0 14px; }
.course p { color:var(--muted); margin-bottom:24px; }
.course strong { color:var(--ink); }

/* oferta: PDF + waitlista (formularze na ekranie wyniku) */
.offer { border-radius:18px; padding:30px; margin-top:18px; background:var(--glass); border:1px solid var(--glass-brd); box-shadow:var(--glass-sh); }
.offer h2 { margin:12px 0 10px; }
.offer p { color:var(--muted); margin-bottom:20px; max-width:540px; }
.offer-form { display:flex; flex-direction:column; gap:12px; max-width:460px; }
.offer-form input[type=email] { width:100%; padding:14px 16px; border-radius:11px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font-size:17px; font-family:var(--sans); }
.offer-form input[type=email]::placeholder { color:var(--muted); }
.offer-form input[type=email]:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-soft); }
.offer-form .btn-primary { align-self:flex-start; }
.offer-consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--muted); line-height:1.45; cursor:pointer; }
.offer-consent input { margin-top:3px; width:16px; height:16px; accent-color:var(--teal); flex:0 0 auto; }
.offer-consent a { color:var(--teal); }
.offer-err { color:var(--danger); font-size:13px; display:none; font-weight:500; }
/* podpowiedź poprawki literówki w domenie e-mail — tekst-przycisk w akcencie */
.err-fix { appearance:none; background:none; border:0; padding:0; margin:0 2px; font:inherit; font-weight:600; color:var(--teal); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.err-fix:hover, .err-fix:focus-visible { color:var(--teal-strong); }
.offer-done { color:var(--ink); font-size:15px; }
.offer-done strong { color:var(--ink); }
/* honeypot antybotowy — niewidoczny dla ludzi, kuszący dla botów */
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

.results-footer { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:34px; color:var(--muted); font-size:12px; flex-wrap:wrap; }
.results-footer img { width:22px; height:22px; opacity:.9; }
.restart { text-align:center; margin-top:14px; }
.restart button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; text-decoration:underline; font-family:var(--sans); }

/* ----- scroll reveal ----- */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .28s var(--ease), transform .28s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ----- focus widoczny (a11y) ----- */
:focus-visible { outline:3px solid var(--teal); outline-offset:2px; border-radius:8px; }

/* ----- reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  *, .screen.active { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}

/* ----- responsywność ----- */
@media (max-width:560px) {
  .gate-box, .course { padding:32px 24px; }
  .card { padding:20px 20px 20px 24px; }
  .card .match { float:none; display:block; margin-top:4px; }
  #hero.active { padding:8px 0 48px; }
}

/* ===== strona prawna (polityka prywatności) ===== */
.legal-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 0; flex-wrap:wrap; }
.legal-actions { display:flex; align-items:center; gap:16px; }
.legal-main { padding:8px 0 40px; }
.legal {
  border-radius:22px; padding:46px 44px;
  background:var(--glass-strong);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh);
}
.legal h1 { font-family:var(--serif); font-weight:600; font-size:clamp(28px,5vw,42px); line-height:1.1; margin-bottom:6px; }
.legal .sub { color:var(--muted); font-size:13px; margin-bottom:4px; }
.legal .updated { font-size:13px; color:var(--muted); margin-bottom:26px; }
.legal h2 { font-family:var(--serif); font-weight:600; font-size:24px; margin:30px 0 12px; }
.legal h3 { font-family:var(--sans); font-weight:600; font-size:17px; margin:22px 0 10px; color:var(--ink); }
.legal p { color:var(--ink); opacity:.9; margin-bottom:14px; }
.legal ul { margin:0 0 16px; padding-left:22px; }
.legal li { color:var(--ink); opacity:.9; margin-bottom:6px; }
.legal a { color:var(--teal); text-decoration:none; }
.legal a:hover { text-decoration:underline; }
.legal .note { font-weight:600; opacity:1; }
.legal-footer { text-align:center; color:var(--muted); font-size:12px; padding:22px 0 50px; }
.back-link { font-size:13px; color:var(--teal); text-decoration:none; font-weight:600; }
.back-link:hover { text-decoration:underline; }
@media (max-width:560px) { .legal { padding:30px 22px; } }

/* ===== zestawienie statyczne + FAQ (SEO/GEO) =====
   Żyje na osobnej podstronie /zestawienie.html (decyzja Lukasza 2026-07-07:
   index pokazuje wyłącznie quiz/wynik/formularz PDF). */
.static-content { margin-top:10px; padding:26px 0 6px; position:relative; z-index:1; }
.static-content h2 { margin:10px 0 12px; }
.sc-intro { color:var(--muted); max-width:600px; margin-bottom:26px; }
.sc-list { display:grid; grid-template-columns:1fr 1fr; gap:0 36px; }
.sc-item { padding:16px 0; border-bottom:1px solid var(--line); }
.sc-item h3 { font-size:17px; font-weight:600; margin-bottom:5px; }
.sc-item h3 small { font-size:12px; color:var(--muted); font-weight:500; }
.sc-item p { font-size:13px; color:var(--ink); opacity:.88; line-height:1.5; }
.sc-price { margin-top:7px; font-size:12px !important; color:var(--muted) !important; opacity:1 !important; }
.sc-price a { color:var(--teal); text-decoration:none; }
.sc-price a:hover { text-decoration:underline; }
.sc-faq { margin-top:40px; }
.sc-faq h2 { margin-bottom:8px; }
.sc-faq .sc-item p { max-width:680px; }
@media (max-width:700px) { .sc-list { grid-template-columns:1fr; } }

/* ===== strona „O mnie" (redakcyjny minimalizm, jak hero) ===== */
.about-main { padding:14px 0 40px; position:relative; z-index:1; }
.about-name { font-size:clamp(32px,5.5vw,50px); font-weight:700; line-height:1.08; letter-spacing:-.015em; margin:10px 0 0; }
.about-lede { font-size:20px; color:var(--muted); max-width:560px; margin:16px 0 40px; }
.about-grid { display:flex; gap:46px; align-items:flex-start; }
.about-bio { flex:1 1 340px; min-width:0; }
.about-bio p { margin-bottom:16px; color:var(--ink); opacity:.92; line-height:1.7; font-size:17px; }
.about-list { list-style:none; margin:0; padding:0; }
.about-list li {
  position:relative; padding:0 0 14px 24px;
  color:var(--ink); opacity:.92; line-height:1.6; font-size:17px;
}
.about-list li::before {
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:50%; background:var(--teal);
}
.about-photo { flex:0 0 auto; }
.about-photo img {
  width:270px; height:auto; display:block; border-radius:20px;
  object-fit:cover; border:1px solid var(--glass-brd); box-shadow:var(--glass-sh);
}
/* cytat misji — pełna szerokość, pod siatką zdjęcie+lista */
.about-quote {
  margin-top:38px; padding:6px 0 6px 22px; border-left:3px solid var(--teal);
  font-style:italic; font-size:17px; line-height:1.65; color:var(--ink); opacity:.85;
}
@media (max-width:700px) {
  .about-grid { flex-direction:column; gap:26px; }
  .about-photo { order:-1; }
  .about-photo img { width:100%; max-width:340px; }
}

/* ===== banner zgody na cookies ===== */
.cookie-banner {
  position:fixed; left:16px; right:16px; bottom:16px; z-index:70;
  margin:0 auto; max-width:720px; padding:20px 22px; border-radius:16px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--glass-strong);
  border:1px solid var(--glass-brd);
  box-shadow:var(--glass-sh);
}
.cb-text { flex:1 1 320px; font-size:13px; color:var(--ink); line-height:1.5; }
.cb-text a { color:var(--teal); }
.cb-actions { display:flex; gap:10px; flex:0 0 auto; }
.cb-actions .btn { padding:11px 20px; font-size:15px; }
.cb-reject { background:var(--glass); border:1.5px solid var(--line); color:var(--ink); box-shadow:none; }
.cb-reject:hover { border-color:var(--teal); }
@media (max-width:560px) {
  .cookie-banner { left:10px; right:10px; bottom:10px; padding:16px 18px; }
  .cb-actions { width:100%; }
  .cb-actions .btn { flex:1; justify-content:center; }
}

/* ===== stopka ===== */
.site-footer { border-top:1px solid var(--line); margin-top:50px; padding:42px 0 46px; }
.footer-inner { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; }
.footer-brand .brand { align-items:flex-start; margin-bottom:14px; }
.footer-brand .brand-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.footer-copy { color:var(--muted); font-size:13px; margin:0 0 16px; }
.footer-social { display:flex; gap:14px; }
.footer-social a { color:var(--muted); display:inline-flex; transition:color .15s ease; }
.footer-social a:hover { color:var(--teal); }
.footer-social svg { width:20px; height:20px; }
/* linki stopki: pionowa kolumna po prawej, jeden pod drugim */
.footer-links { display:flex; flex-direction:column; align-items:flex-end; gap:9px; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:13px; transition:color .15s ease; }
.footer-links a:hover { color:var(--teal); }
.footer-link-btn { background:none; border:none; cursor:pointer; font-family:var(--sans); color:var(--muted); font-size:13px; padding:0; transition:color .15s ease; }
.footer-link-btn:hover { color:var(--teal); }
@media (max-width:560px) {
  .footer-inner { flex-direction:column; gap:18px; }
  .footer-links { align-items:flex-start; }
}