/* Elity Biznesu: tokeny, reset, typografia, przyciski, naglowek i stopka. */

:root {
  color-scheme: dark;

  /* tla: cieply, prawie czarny */
  --tlo: #0b0a08;
  --tlo-2: #110f0c;
  --tlo-3: #17140f;
  --tlo-4: #201c16;
  --tlo-5: #2a251d;
  --linia: rgba(236, 224, 199, 0.11);
  --linia-2: rgba(236, 224, 199, 0.2);
  --linia-3: rgba(236, 224, 199, 0.32);

  /* tekst: kosc sloniowa */
  --tekst: #f3ede1;
  --tekst-2: #cfc6b5;
  --tekst-3: #a39a8a;

  /* zloto = najlepsze, szarosc = do poprawy */
  --zloto: #d6b46a;
  --zloto-jasne: #f0d99c;
  --zloto-ciemne: #a8853f;
  --zloto-tlo: rgba(214, 180, 106, 0.14);
  --zloto-tlo-2: rgba(214, 180, 106, 0.26);
  --zloto-poswiata: rgba(214, 180, 106, 0.32);
  --gradient-zloty: linear-gradient(135deg, #f3dea6 0%, #d6b46a 42%, #b8924a 70%, #ecd391 100%);
  --szary: #96918a;
  --szary-jasny: #bdb8b0;
  --szary-tlo: rgba(170, 165, 157, 0.15);
  --szary-tlo-2: rgba(170, 165, 157, 0.26);

  /*
   * mowcy: spokojne, rozroznialne i bez znaczenia ocennego. Bez czerwieni i niebieskiego (partie),
   * bez zieleni i pomaranczu (sygnalizator: "dobrze" i "uwaga"). Zloto i szarosc tylko dla ocen.
   * Trump i Vance (jedna strona sporu) w pokrewnych odcieniach, Zelenski w morskim.
   */
  --mowca-trump: #d8b0b8;
  --mowca-zelenski: #7cc7c0;
  --mowca-vance: #b9a9ef;
  --mowca-rubio: #c2b8a3;
  --mowca-prasa: #cbc2ae;

  --font-szeryf: "Cormorant Garamond", "Cormorant", Garamond, Georgia, "Times New Roman", serif;
  --font-tekst: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --promien: 16px;
  --promien-maly: 10px;
  --cien: 0 30px 80px -40px rgba(0, 0, 0, 0.85);
  --cien-zloty: 0 0 0 1px rgba(214, 180, 106, 0.18), 0 24px 70px -30px rgba(214, 180, 106, 0.45);
  --przejscie: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  --szer-max: 1240px;
  --margines: 16px;
  --scena-wys: 0px;
}

@media (min-width: 720px) {
  :root { --margines: 28px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
  background: var(--tlo);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--tlo);
  background-image:
    radial-gradient(1100px 620px at 86% -8%, rgba(214, 180, 106, 0.11), transparent 62%),
    radial-gradient(900px 600px at -10% 38%, rgba(120, 92, 48, 0.08), transparent 60%);
  background-repeat: no-repeat;
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-szeryf);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--tekst);
  text-wrap: balance;
}
p { margin: 0; }
p + p { margin-top: 0.75em; }
ul, ol { margin: 0; padding: 0; }
em { font-style: italic; }
strong { font-weight: 650; color: var(--tekst); }

a { color: var(--zloto-jasne); text-decoration-color: rgba(240, 217, 156, 0.45); text-underline-offset: 0.2em; }
a:hover { color: var(--tekst); text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--zloto-jasne);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgba(214, 180, 106, 0.38); color: #fff8e8; }

.kontener {
  width: min(100% - 2 * var(--margines), var(--szer-max));
  margin-inline: auto;
}

/* link "przejdz do analizy" dla klawiatury */
.pomin {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--zloto);
  color: #17130b;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--przejscie);
}
.pomin:focus-visible { top: 12px; }

/* ---------- elementy wspolne ---------- */

.nadtytul {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-tekst);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zloto);
}
.nadtytul::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--zloto));
}
.nadtytul__puls {
  order: -1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zloto);
  box-shadow: 0 0 0 0 var(--zloto-poswiata);
  animation: puls 2.4s ease-out infinite;
}
.nadtytul:has(.nadtytul__puls)::before { display: none; }

@keyframes puls {
  0% { box-shadow: 0 0 0 0 rgba(214, 180, 106, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(214, 180, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(214, 180, 106, 0); }
}

.zloto-tekst {
  color: var(--zloto-jasne);
  font-weight: 600;
}

.ikona {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

/* przyciski */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-tekst);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--przejscie), box-shadow var(--przejscie), background-color var(--przejscie), border-color var(--przejscie), color var(--przejscie);
}
.przycisk--zloty {
  background: var(--gradient-zloty);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: #1a140a;
  box-shadow: 0 10px 30px -12px rgba(214, 180, 106, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.przycisk--zloty:hover {
  color: #120d05;
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -14px rgba(214, 180, 106, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.przycisk--kontur {
  border-color: var(--linia-3);
  color: var(--tekst);
  background: rgba(255, 255, 255, 0.02);
}
.przycisk--kontur:hover {
  color: var(--tekst);
  border-color: var(--zloto);
  background: var(--zloto-tlo);
}
.przycisk--szklo {
  border-color: rgba(243, 237, 225, 0.35);
  color: var(--tekst);
  background: rgba(11, 10, 8, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.przycisk--szklo:hover { border-color: var(--zloto-jasne); color: var(--tekst); }
.przycisk--maly { min-height: 44px; padding: 0 18px; font-size: 0.9rem; }
.przycisk--duzy { min-height: 56px; padding: 0 30px; font-size: 1.04rem; }
.przycisk--zablokowany {
  border-color: var(--linia-2);
  background: rgba(22, 19, 15, 0.92);
  color: var(--tekst-2);
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.9);
}
.przycisk--zablokowany:hover { border-color: rgba(214, 180, 106, 0.55); color: var(--tekst); }
.przycisk--zablokowany .ikona { color: var(--zloto); }
.przycisk--szturchniety { animation: szturchniecie 0.35s ease; }
@keyframes szturchniecie {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* "Wroc do czytania" po skoku do filmu z dalszej sekcji */
.powrot {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border: 1px solid rgba(214, 180, 106, 0.75);
  border-radius: 999px;
  background: rgba(11, 10, 8, 0.94);
  color: var(--tekst);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.95);
  animation: pojaw 0.25s ease;
}
.powrot:hover { background: var(--tlo-4); }
.powrot .ikona { width: 18px; height: 18px; color: var(--zloto-jasne); }
/* przy otwartym arkuszu zapisu w tym samym rogu stoi "Wroc do biezacego miejsca" */
.arkusz-otwarty .powrot { display: none; }

/* chip (filtr) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linia-2);
  border-radius: 999px;
  background: transparent;
  color: var(--tekst-2);
  font-size: 0.86rem;
  font-weight: 550;
  transition: background-color var(--przejscie), color var(--przejscie), border-color var(--przejscie);
}
.chip:hover { border-color: var(--linia-3); color: var(--tekst); }
.chip[aria-pressed="true"] {
  border-color: var(--zloto);
  background: var(--zloto-tlo);
  color: var(--tekst);
}

.kropka {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--kolor-mowcy, var(--tekst-3));
}
.kropka--trump, .mowca--trump { --kolor-mowcy: var(--mowca-trump); }
.kropka--zelenski, .mowca--zelenski { --kolor-mowcy: var(--mowca-zelenski); }
.kropka--vance, .mowca--vance { --kolor-mowcy: var(--mowca-vance); }
.kropka--rubio, .mowca--rubio { --kolor-mowcy: var(--mowca-rubio); }
.kropka--prasa, .mowca--prasa { --kolor-mowcy: var(--mowca-prasa); }

/* sekcje */
.sekcja {
  position: relative;
  padding-block: clamp(64px, 7vw, 104px);
}
.sekcja + .sekcja::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(100% - 2 * var(--margines), var(--szer-max));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--linia-2) 20%, rgba(214, 180, 106, 0.4) 50%, var(--linia-2) 80%, transparent);
}
.sekcja + .sekcja::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid var(--zloto);
  background: var(--tlo);
}
.sekcja__naglowek {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.sekcja__naglowek--szeroki { max-width: 900px; }
.sekcja__tytul {
  font-size: clamp(2.1rem, 1.3rem + 2.7vw, 3.5rem);
  font-weight: 600;
}
.sekcja__tytul em,
.hero__tytul em {
  font-weight: 500;
  background: var(--gradient-zloty);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sekcja__lead {
  margin-top: 16px;
  font-size: clamp(1.02rem, 0.96rem + 0.3vw, 1.14rem);
  color: var(--tekst-2);
  max-width: 68ch;
}

.ladowanie {
  padding: 20px;
  color: var(--tekst-3);
  font-size: 0.92rem;
}
.blad-wczytania {
  padding: 18px 20px;
  border: 1px solid var(--linia-2);
  border-radius: var(--promien-maly);
  color: var(--tekst-2);
  background: var(--tlo-3);
}

/* ---------- naglowek strony ---------- */

.naglowek {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--linia);
  background: linear-gradient(180deg, rgba(11, 10, 8, 0.9), rgba(11, 10, 8, 0.6));
}
.naglowek__wnetrze {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 72px;
}
.marka {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-right: auto;
  color: var(--tekst);
  text-decoration: none;
}
.marka:hover { color: var(--tekst); }
.marka__znak {
  width: 34px;
  height: 34px;
  color: var(--zloto);
  flex: none;
}
.marka__teksty { display: flex; flex-direction: column; line-height: 1.1; }
.marka__nazwa {
  font-family: var(--font-szeryf);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.marka__dopisek {
  margin-top: 3px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-3);
}
.nawigacja {
  display: none;
  gap: 4px;
}
.nawigacja a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--tekst-2);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--przejscie), background-color var(--przejscie);
}
.nawigacja a:hover { color: var(--tekst); background: rgba(255, 255, 255, 0.04); }

@media (min-width: 980px) {
  .nawigacja { display: flex; }
}
@media (max-width: 420px) {
  .marka__dopisek { display: none; }
  .marka__nazwa { font-size: 1.3rem; }
  .naglowek .przycisk--maly { padding: 0 14px; font-size: 0.84rem; }
}

/* ---------- stopka ---------- */

.stopka {
  border-top: 1px solid var(--linia);
  padding-block: 48px 56px;
  background: linear-gradient(180deg, transparent, rgba(214, 180, 106, 0.035));
  color: var(--tekst-3);
  font-size: 0.88rem;
}
.stopka__wnetrze { display: grid; gap: 16px; }
.stopka__marka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.stopka__nazwa {
  font-family: var(--font-szeryf);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tekst);
  line-height: 1.1;
}
.stopka__dopisek { font-size: 0.78rem; letter-spacing: 0.08em; }
.stopka p + p { margin-top: 0; }
.stopka__zastrzezenie { max-width: 90ch; }
/* adres jako osobny element: wysoki cel dotykowy nie rozpycha interlinii zdania obok */
.stopka__kontakt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}
.stopka__kontakt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.znacznik-roboczy {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px dashed var(--linia-3);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-3);
}

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}