/* twoj-projekt.pl - fundament wizualny.
   Tokeny wyjęte z landingów /opt-in-page/ i /book-in/ (research/style/wzor-*.css).
   Zmiana wyglądu zaczyna się TUTAJ, nie w pliku podstrony. */

:root {
  /* marka */
  --granat:      #1F3A93;
  --granat-ciemny:#16296B;
  --pomaranczowy:#FF6B00;
  --niebieski:   #0056D2;

  --primary:     var(--granat);
  --accent:      var(--pomaranczowy);

  /* Markowy pomarańcz ma na bieli kontrast 2,85:1 i nie przechodzi WCAG AA.
     Jest kolorem WYPEŁNIEŃ, nie liter. Tekst na bieli bierze wariant ciemniejszy,
     tekst na granacie wariant jaśniejszy. */
  --akcent-naglowek: #F26400;  /* 3,2:1 na bieli, wystarcza dla tekstu od 24px */
  --akcent-tekst:  #C2410C;   /* 5,2:1 na bieli */
  --akcent-na-ink: #FFB27A;   /* 4,9:1 na granacie */

  /* neutralne */
  --bg:          #ffffff;
  --bg-soft:     #F6F7FB;
  --bg-ink:      #1F3A93;
  --text:        #111327;
  --text-muted:  #5A5E7A;
  --line:        #E6E8F2;
  --white:       #ffffff;

  /* kształt */
  --radius:      10px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* cień tonowany granatem, nigdy czarny */
  --cien-karta:  0 1px 2px rgba(17,19,39,.05), 0 10px 28px rgba(31,58,147,.07);
  --cien-lift:   0 2px 6px rgba(17,19,39,.06), 0 18px 44px rgba(31,58,147,.13);
  --cien-cta:    0 8px 22px rgba(255,107,0,.28);

  /* typografia */
  --font-head:   'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body:   'Inter', system-ui, -apple-system, sans-serif;

  /* rytm - odstępy raczej ciasne */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 34px; --s-6: 48px; --s-7: 68px;

  --max-w:       1180px;
  --max-w-text:  680px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ── typografia ───────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--text);          /* nagłówek ma JEDEN kolor, bez słów-akcentów */
  text-wrap: balance;
  margin: 0 0 var(--s-3);
}
h1 { font-size: clamp(32px, 4.4vw, 56px); line-height: .92; }

/* akcent w nagłówku - wzięty z landingów wzorcowych, na życzenie klienta.
   Kolor #F26400 zamiast markowego #FF6B00: 3,2:1 na bieli, czyli AA dla tekstu >=24px. */
.akcent { color: var(--akcent-naglowek); }
.podkres {
  background-image: linear-gradient(180deg, transparent 62%,
    rgba(255,107,0,.38) 62%, rgba(255,107,0,.38) 95%, transparent 95%);
  padding: 0 .08em;
}
.sekcja--ink .akcent { color: var(--akcent-na-ink); }
h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: .98; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
h4 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 var(--s-3); }
.lead { font-size: 19px; line-height: 1.6; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: 14px; }

/* nadtytuł: sama wersalikowa etykieta, bez kresek, nie mniej niż 14px */
.nadtytul {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 14px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--akcent-tekst);
  margin: 0 0 var(--s-2);
}
.nadtytul--pigulka {
  background: rgba(255,107,0,.12);
  padding: 7px 16px; border-radius: var(--radius-pill);
  letter-spacing: .12em;
}

/* ── układ ────────────────────────────────────────────────── */

.sekcja       { padding: var(--s-7) clamp(1rem, 5vw, 2rem); }
.sekcja--soft { background: var(--bg-soft); }
.sekcja--ink  { background: var(--bg-ink); color: var(--white); }
.sekcja--ink h1, .sekcja--ink h2, .sekcja--ink h3 { color: var(--white); }
.sekcja--ink .lead, .sekcja--ink .muted { color: rgba(255,255,255,.80); }
.sekcja--ink .nadtytul { color: var(--akcent-na-ink); }

.srodek { max-width: var(--max-w); margin-inline: auto; }
.waski  { max-width: var(--max-w-text); }

/* nagłówek sekcji zawsze wyśrodkowany, z oddechem 34px pod spodem */
.naglowek-sekcji { text-align: center; max-width: 760px; margin: 0 auto var(--s-5); }
.naglowek-sekcji h2 { margin-bottom: var(--s-3); }
.naglowek-sekcji .lead { margin: 0 auto; max-width: 58ch; }

.siatka { display: grid; gap: var(--s-4); }
.siatka > * { min-width: 0; }
@media (min-width: 720px) { .siatka--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .siatka--3 { grid-template-columns: repeat(3, 1fr); } }

/* ── przyciski ────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head);
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap;
  text-decoration: none; cursor: pointer;
  padding: 18px 34px;
  border: none; border-radius: var(--radius);
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn--cta { background: var(--accent); color: var(--white); box-shadow: var(--cien-cta); }
.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,107,0,.34); }
/* przesunięcie światła po przycisku, zamiast poświaty */
.btn--cta::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%;
  width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.30), transparent);
  transform: skewX(-18deg); transition: left .5s ease;
}
.btn--cta:hover::after { left: 115%; }
.btn--obrys { background: transparent; color: var(--primary); border: 1.5px solid var(--line); }
.btn--obrys:hover { border-color: var(--primary); background: var(--bg-soft); }
.btn--pelny { width: 100%; }
.btn .strzalka { font-size: 20px; line-height: 1; transition: transform .18s ease; }
.btn:hover .strzalka { transform: translateX(4px); }

.btn-podpis { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); margin-top: var(--s-3); }
.btn-podpis::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 6px; }
.domkniecie .btn-podpis, .lhero--waski .btn-podpis { justify-content: center; }

/* ── karty ────────────────────────────────────────────────── */

.karta {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-4);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.karta--cien { box-shadow: var(--cien-karta); border-color: transparent; }
.karta--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.karta--unos:hover { transform: translateY(-6px); box-shadow: var(--cien-lift); border-color: transparent; }
.karta h3 { margin-bottom: var(--s-2); }
.karta p { font-size: 15.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* liczba jako dowód: kreska NAD grupą, nigdy belka z lewej */
.liczba { border-top: 2px solid var(--line); padding-top: var(--s-3); }
.liczba--kafel {
  border-top: none; border-left: 5px solid var(--accent);
  background: var(--bg-soft); border-radius: 0 14px 14px 0;
  padding: var(--s-4) var(--s-5);
}
.liczba--kafel .liczba__wartosc { color: var(--primary); }
.liczba--kafel p:last-child { color: var(--text); font-size: 15px; line-height: 1.55; }
.liczba__wartosc {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1; color: var(--text);
  margin: 0 0 var(--s-2);
}
.sekcja--ink .liczba { border-top-color: rgba(255,255,255,.28); }
.sekcja--ink .liczba__wartosc { color: var(--white); }

/* ── opinia ───────────────────────────────────────────────── */

.opinia {
  display: flex; flex-direction: column; gap: var(--s-4);
  text-align: center; align-items: center; justify-content: flex-start;
  background: var(--white); border: 1px solid var(--line); box-shadow: var(--cien-karta);
  padding: var(--s-5) var(--s-5) var(--s-4);
  height: 100%;
}
.opinia:hover { box-shadow: var(--cien-lift); }
.opinia__znak { font-family: var(--font-head); font-size: 74px; font-weight: 800; line-height: .48; color: var(--accent); margin: 0; }
.opinia__tresc { font-family: var(--font-head); font-size: 19px; font-weight: 500; line-height: 1.45; letter-spacing: -.015em; color: var(--text); margin: 0 0 auto; }
.opinia__kto  { font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.opinia__rola { font-size: 14px; color: var(--text-muted); }

/* pływająca plakietka przy zdjęciu, jak na landingu wzorcowym */
.plakietka {
  position: absolute; left: -14px; bottom: 34px; z-index: 3;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(17,19,39,.14);
  padding: 12px 16px;
}
.plakietka .odznaki { margin-bottom: 6px; }
.plakietka__opis { font-size: 13px; color: var(--text-muted); margin: 0; white-space: nowrap; }
.plakietka .odznaka { font-size: 12.5px; padding: 5px 10px; border-radius: 7px; }

/* ── odznaki ──────────────────────────────────────────────── */

.odznaki { display: flex; flex-wrap: wrap; gap: 8px; }
.odznaka {
  font-family: var(--font-head); font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; white-space: nowrap;
  padding: 7px 14px; border-radius: var(--radius-pill);
  background: var(--bg-soft); color: var(--primary); border: 1px solid var(--line);
}
.odznaka--pelna { background: var(--primary); color: var(--white); border-color: transparent; }

/* ── nagłówek strony ──────────────────────────────────────── */

.naglowek {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.naglowek__wnetrze {
  max-width: var(--max-w); margin-inline: auto;
  padding: var(--s-3) clamp(1rem, 5vw, 2rem);
  display: flex; align-items: center; gap: var(--s-4);
}
.logo { font-family: var(--font-head); font-weight: 800; font-size: 20px; letter-spacing: -.03em; color: var(--primary); text-decoration: none; line-height: 1.05; }
.logo span { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--akcent-tekst); }
.menu { display: flex; gap: var(--s-4); margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.menu a { font-size: 16px; font-weight: 500; color: var(--text); text-decoration: none; }
.menu a:hover { color: var(--primary); }
.naglowek .btn { padding: 13px 22px; font-size: 15px; }

.menu-przycisk { display: none; margin-left: auto; background: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text); }

@media (max-width: 920px) {
  .menu-przycisk { display: block; }
  .naglowek .btn { display: none; }
  .menu {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: var(--s-2) clamp(1rem,5vw,2rem) var(--s-3);
  }
  .menu[hidden] { display: none; }
  .menu a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  .menu li:last-child a { border-bottom: none; }
}

/* ── stopka ───────────────────────────────────────────────── */

.stopka { background: var(--white); border-top: 1px solid var(--line); padding: var(--s-7) clamp(1rem,5vw,2rem) var(--s-5); font-size: 15px; }
.stopka__wnetrze { max-width: var(--max-w); margin-inline: auto; display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .stopka__wnetrze { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-5); } }

.stopka__marka .logo { font-size: 24px; }
.stopka__marka p { color: var(--text-muted); margin: var(--s-3) 0 var(--s-4); max-width: 34em; }
.stopka__cta { font-family: var(--font-head); font-weight: 700; color: var(--akcent-tekst); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.stopka__cta:hover { text-decoration: underline; }

.stopka h3 { color: var(--text); font-family: var(--font-head); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s-3); }
.stopka ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.stopka a { color: var(--text-muted); text-decoration: none; }
.stopka a:hover { color: var(--primary); text-decoration: underline; }

.stopka__dol {
  max-width: var(--max-w); margin: var(--s-6) auto 0;
  padding-top: var(--s-4); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4);
  color: var(--text-muted); font-size: 14px;
}
.stopka__prawne { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; }
.stopka__realizacja { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-muted); }
.stopka__realizacja img { width: 82px; height: auto; opacity: .85; transition: opacity .18s ease; }
.stopka__realizacja:hover img { opacity: 1; }
.stopka__realizacja span { font-size: 13px; letter-spacing: .04em; }


/* ── opinie: karuzela ze strzałkami ─────────────────────────── */

.karuzela { position: relative; }
.karuzela__tor {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
  gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: var(--s-2) var(--s-1) var(--s-4);
  scrollbar-width: none;
}
.karuzela__tor::-webkit-scrollbar { display: none; }
@media (min-width: 620px) { .karuzela__tor { grid-auto-columns: 46%; } }
@media (min-width: 980px) { .karuzela__tor { grid-auto-columns: calc((100% - 2 * var(--s-4)) / 3); } }
.karuzela__tor { align-items: stretch; }
.karuzela__tor > * { scroll-snap-align: center; }
.karuzela__sterowanie { display: flex; justify-content: center; gap: var(--s-3); }
.karuzela__strzalka {
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--white); color: var(--akcent-tekst);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.karuzela__strzalka:hover { border-color: var(--akcent-tekst); transform: translateY(-2px); }


/* ── bloki wspólne dla strony głównej i landingów ─────────── */

/* oświadczenie: jedna myśl, jedna liczba, wyśrodkowane */

.oswiadczenie { text-align: center; }
.oswiadczenie h2 { max-width: 15ch; margin-inline: auto; }
.oswiadczenie .lead { max-width: 52ch; margin: 0 auto var(--s-5); }
.oswiadczenie__liczba {
  font-family: var(--font-head); font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(40px, 7vw, 84px); line-height: .92;
  color: var(--akcent-na-ink); margin: 0 0 var(--s-3);
}
.oswiadczenie__opis { max-width: 48ch; margin: 0 auto; color: rgba(255,255,255,.80); font-size: 15.5px; }

/* blok edytorialny (o Paulinie) */

.edytorial { text-align: center; max-width: 940px; margin-inline: auto; }
.edytorial__foto {
  width: 190px; height: 190px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  margin: 0 auto var(--s-5); box-shadow: var(--cien-karta);
}
.edytorial .odznaki { justify-content: center; margin-bottom: var(--s-5); }
.edytorial__manifest {
  font-family: var(--font-head); font-size: clamp(21px, 2.4vw, 28px); font-weight: 600;
  line-height: 1.45; letter-spacing: -.02em; color: var(--text);
  max-width: 40ch; margin: 0 auto var(--s-5);
}
.edytorial p:not(.edytorial__manifest) { color: var(--text-muted); font-size: 16.5px; line-height: 1.7; max-width: 74ch; margin-inline: auto; }

/* domknięcie sekcji CTA */

.domkniecie { text-align: center; }
.domkniecie h2 { max-width: 26ch; margin: 0 auto var(--s-3); }
.domkniecie .lead { max-width: 62ch; margin: 0 auto var(--s-5); }

/* ── FAQ ── */

.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 var(--s-4);
}
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s-4) 0;
  font-family: var(--font-head); font-size: 17.5px; font-weight: 700; letter-spacing: -.01em;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 700; color: var(--akcent-tekst); line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 var(--s-4); color: var(--text-muted); font-size: 16px; line-height: 1.65; max-width: 62ch; }

/* ── pasek CTA przyklejony na mobile ────────────────────────── */

.pasek-cta { display: none; }
@media (max-width: 760px) {
  .pasek-cta {
    display: flex; align-items: center; gap: var(--s-3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--line);
    padding: 10px clamp(1rem,5vw,2rem) calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgba(17,19,39,.10);
    transform: translateY(110%); transition: transform .28s ease;
  }
  .pasek-cta.widac { transform: none; }
  .pasek-cta__tekst { font-size: 13px; line-height: 1.35; color: var(--text-muted); flex: 1; }
  .pasek-cta__tekst b { display: block; color: var(--text); font-family: var(--font-head); font-size: 15px; }
  .pasek-cta .btn { padding: 13px 20px; font-size: 15px; }
  body { padding-bottom: 76px; }
}

/* ── mikro-dowod przy formularzu ────────────────────────────── */

.mikro-dowod {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-soft); border-radius: var(--radius);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-5);
  font-size: 14.5px; line-height: 1.55; color: var(--text);
}
.mikro-dowod__znak { font-family: var(--font-head); font-size: 30px; font-weight: 800; line-height: .7; color: var(--accent); flex: 0 0 auto; }
.mikro-dowod cite { display: block; font-style: normal; font-size: 13px; color: var(--text-muted); margin-top: 6px; }

/* ── ruch ─────────────────────────────────────────────────── */

.odslon { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.odslon.widoczny { opacity: 1; transform: none; }

/* ── dostępność ───────────────────────────────────────────── */

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--niebieski);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .odslon { opacity: 1; transform: none; }
}