/* Strona główna CRM Gadżety: te same fonty i akcent co w aplikacji, więcej powietrza i większa typografia. */
@font-face { font-family: "Geist"; font-display: swap; font-weight: 100 900; src: url("../fonty/geist-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-display: swap; font-weight: 100 900; src: url("../fonty/geist-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Bricolage"; font-display: swap; font-weight: 200 800; src: url("../fonty/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage"; font-display: swap; font-weight: 200 800; src: url("../fonty/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --tlo: #ffffff;
  --papier: #f5f5f8;
  --tusz: #191b33;
  --szary: #62657c;
  --linia: #e6e6ee;
  --akcent: #c8006e;
  --akcent-ciemny: #a3005a;
  --akcent-tlo: #fdeef6;
  --cyjan: #009fe3;
  --magenta: #e4007c;
  --zolty: #ffd300;
  --ok: #12804a;
  --naglowki: "Bricolage", "Geist", system-ui, sans-serif;
  --wyjscie: cubic-bezier(0.23, 1, 0.32, 1);
  --cien: 0 30px 60px -20px rgba(25, 27, 51, .28), 0 12px 24px -12px rgba(25, 27, 51, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: "Geist", system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--tusz); background: var(--tlo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--naglowki); line-height: 1.08; letter-spacing: -0.03em; margin: 0; }
.wnetrze { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wnetrze.waska { max-width: 780px; }

/* Przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; transition: transform 160ms var(--wyjscie), background-color 160ms ease, box-shadow 160ms ease; white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-duzy { padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.btn-ciemny { background: var(--tusz); color: #fff; }
.btn-akcent { background: var(--akcent); color: #fff; box-shadow: 0 8px 20px -8px rgba(200, 0, 110, .6); }
.btn-jasny { background: #fff; color: var(--tusz); border-color: var(--linia); }
@media (hover: hover) {
  .btn-ciemny:hover { background: #2a2d4d; }
  .btn-akcent:hover { background: var(--akcent-ciemny); }
  .btn-jasny:hover { border-color: #c9cad8; }
}

/* Logo CMYK */
.marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; }
.logo { display: grid; grid-template-columns: repeat(2, 8px); gap: 3px; padding: 6px; background: var(--tusz); border-radius: 9px; }
.logo i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyjan); }
.logo i:nth-child(2) { background: var(--magenta); }
.logo i:nth-child(3) { background: var(--zolty); }
.logo i:nth-child(4) { background: #fff; }

/* Górny pasek */
.gora { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(230, 230, 238, .7); }
.gora-pasek { display: flex; align-items: center; gap: 24px; height: 66px; }
.gora-menu { display: flex; gap: 26px; margin-left: 20px; }
.gora-menu a { text-decoration: none; color: var(--szary); font-size: 15px; font-weight: 500; transition: color 160ms ease; }
.gora-menu a:hover { color: var(--tusz); }
.gora-akcje { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.link-logowanie { text-decoration: none; font-weight: 550; font-size: 15px; }

/* Hero */
.hero { position: relative; padding: 84px 0 0; background:
  radial-gradient(600px 300px at 15% 10%, rgba(0, 159, 227, .10), transparent 70%),
  radial-gradient(600px 320px at 85% 0%, rgba(228, 0, 124, .10), transparent 70%),
  radial-gradient(500px 260px at 50% 40%, rgba(255, 211, 0, .10), transparent 70%); }
.hero-tekst { text-align: center; }
.znaczek { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 10px; border: 1px solid var(--linia); border-radius: 99px; background: #fff; font-size: 14px; font-weight: 550; color: var(--szary); }
.kropki { display: inline-flex; gap: 4px; }
.kropki i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyjan); }
.kropki i:nth-child(2) { background: var(--magenta); }
.kropki i:nth-child(3) { background: var(--zolty); }
.hero h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 750; }
.hero h1 span { color: var(--szary); font-weight: 600; }
.hero-opis { max-width: 680px; margin: 24px auto 0; font-size: clamp(17px, 1.6vw, 20px); color: var(--szary); }
.hero-akcje { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-fakty { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 0; margin: 28px 0 0; font-size: 15px; color: var(--szary); }
.hero-fakty li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: 8px; }
.hero-fakty b { color: var(--tusz); font-weight: 600; }
.hero-zrzut { margin-top: 64px; }

/* Okno przeglądarki ze zrzutem */
.okno { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--linia); box-shadow: var(--cien); }
.okno-pasek { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #f7f7fa; border-bottom: 1px solid var(--linia); }
.okno-pasek i { width: 11px; height: 11px; border-radius: 50%; background: #e2e3ea; }
.okno-pasek span { margin: 0 auto; padding: 2px 16px; border-radius: 6px; background: #fff; border: 1px solid var(--linia); font-size: 12px; color: var(--szary); transform: translateX(-20px); }
.okno-ciemne { border-color: #2c2f4f; }
.okno-ciemne .okno-pasek { background: #23264a; border-color: #2c2f4f; }
.okno-ciemne .okno-pasek i { background: #3a3e66; }
.okno-ciemne .okno-pasek span { background: #1d2040; border-color: #2c2f4f; color: #a6a9c8; }

/* Sekcje */
.sekcja { padding: 110px 0; }
.sekcja-szara { background: var(--papier); }
.sekcja-ciemna { background: var(--tusz); color: #fff; }
.sekcja-ciemna .sekcja-opis { color: #b9bbd6; }
.nadtytul { margin: 0 0 12px; font-size: 14px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--akcent); }
.sekcja-ciemna .nadtytul { color: #ff5fb0; }
.sekcja h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 700; max-width: 760px; }
.sekcja-opis { max-width: 640px; margin: 18px 0 0; font-size: 18px; color: var(--szary); }

.funkcje { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.funkcja { padding: 28px; border: 1px solid var(--linia); border-radius: 18px; background: #fff; transition: transform 240ms var(--wyjscie), box-shadow 240ms ease; }
@media (hover: hover) { .funkcja:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(25, 27, 51, .25); } }
.funkcja h3 { font-size: 21px; font-weight: 650; margin: 18px 0 8px; letter-spacing: -0.02em; }
.funkcja p { margin: 0; color: var(--szary); font-size: 15.5px; }
.ikona { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; font-weight: 700; }
.ikona.c { background: rgba(0, 159, 227, .12); color: #0079ad; }
.ikona.m { background: rgba(228, 0, 124, .1); color: var(--akcent); }
.ikona.z { background: rgba(255, 211, 0, .22); color: #8a6d00; }

.dwie-kolumny { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.dwie-kolumny.odwrotnie > div { order: 2; }
.lista-ok { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.lista-ok li { position: relative; padding-left: 32px; font-size: 16px; }
.lista-ok li::before { content: "✓"; position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 95, 176, .18); color: #ff5fb0; font-size: 12px; font-weight: 800; }
.lista-ok.ciemna li::before { background: var(--akcent-tlo); color: var(--akcent); }

.kroki { list-style: none; counter-reset: krok; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kroki li { counter-increment: krok; padding: 26px; border-radius: 18px; background: #fff; border: 1px solid var(--linia); }
.kroki li::before { content: counter(krok); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tusz); color: #fff; font-weight: 700; margin-bottom: 16px; }
.kroki b { display: block; font-family: var(--naglowki); font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; }
.kroki span { color: var(--szary); font-size: 15.5px; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.galeria .okno { box-shadow: 0 16px 34px -18px rgba(25, 27, 51, .3); }
.galeria figcaption { padding: 12px 16px; font-size: 14px; font-weight: 550; border-top: 1px solid var(--linia); }

/* Cennik */
.cennik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; border: 1px solid var(--linia); border-radius: 20px; background: #fff; }
.plan h3 { font-size: 24px; font-weight: 700; }
.plan-opis { margin: 6px 0 0; color: var(--szary); font-size: 15px; }
.cena { margin: 22px 0 6px; display: flex; align-items: baseline; gap: 6px; }
.cena b { font-family: var(--naglowki); font-size: 46px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.cena span { color: var(--szary); }
.plan ul { list-style: none; padding: 0; margin: 18px 0 28px; display: grid; gap: 10px; flex: 1; }
.plan li { position: relative; padding-left: 26px; font-size: 15.5px; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.plan .btn { width: 100%; }
.plan.wyrozniony { border: 2px solid var(--akcent); box-shadow: 0 30px 60px -30px rgba(200, 0, 110, .45); }
.plan-znaczek { position: absolute; top: -13px; left: 28px; margin: 0; padding: 3px 12px; border-radius: 99px; background: var(--akcent); color: #fff; font-size: 13px; font-weight: 650; }

/* Pytania */
.pytania { margin-top: 40px; display: grid; gap: 10px; }
.pytania details { border: 1px solid var(--linia); border-radius: 14px; background: #fff; padding: 0 22px; }
.pytania summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 17px; }
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--szary); transition: transform 240ms var(--wyjscie); }
.pytania details[open] summary::after { transform: rotate(45deg); }
.pytania details p { margin: 0 0 18px; color: var(--szary); }

/* Zakończenie */
.koniec-pole { text-align: center; padding: 72px 24px; border-radius: 28px; background: var(--tusz); color: #fff; background-image:
  radial-gradient(400px 200px at 10% 0%, rgba(0, 159, 227, .35), transparent 70%),
  radial-gradient(420px 220px at 90% 100%, rgba(228, 0, 124, .35), transparent 70%); }
.koniec-pole h2 { font-size: clamp(30px, 4vw, 46px); margin: 0 auto; }
.koniec-pole p { margin: 14px auto 30px; color: #c9cbe3; font-size: 18px; }
.stopka { border-top: 1px solid var(--linia); padding: 28px 0; font-size: 14px; color: var(--szary); }
.stopka-pasek { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stopka .marka { color: var(--tusz); font-size: 15px; }

/* Wejście sekcji przy przewijaniu (bez JS, tam gdzie przeglądarka to obsługuje). */
@media (prefers-reduced-motion: no-preference) {
  .hero-tekst > * { animation: wejscie 700ms var(--wyjscie) both; }
  .hero-tekst > :nth-child(2) { animation-delay: 60ms; }
  .hero-tekst > :nth-child(3) { animation-delay: 120ms; }
  .hero-tekst > :nth-child(4) { animation-delay: 180ms; }
  .hero-tekst > :nth-child(5) { animation-delay: 240ms; }
  .hero-zrzut { animation: wejscie-zrzut 900ms 200ms var(--wyjscie) both; }
  @supports (animation-timeline: view()) {
    .funkcja, .kroki li, .plan, .galeria .okno, .dwie-kolumny > * { animation: wejscie linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
@keyframes wejscie { from { opacity: 0; transform: translateY(16px); } }
@keyframes wejscie-zrzut { from { opacity: 0; transform: translateY(40px) scale(.98); } }

@media (max-width: 960px) {
  .gora-menu { display: none; }
  .funkcje, .cennik, .kroki, .galeria { grid-template-columns: 1fr 1fr; }
  .dwie-kolumny { grid-template-columns: 1fr; gap: 40px; }
  .dwie-kolumny.odwrotnie > div { order: 0; }
}
@media (max-width: 640px) {
  .funkcje, .cennik, .kroki, .galeria { grid-template-columns: 1fr; }
  .sekcja { padding: 72px 0; }
  .hero { padding-top: 56px; }
  .hero-zrzut { margin-top: 44px; }
  .link-logowanie { display: none; }
  .gora-akcje .btn { padding: 8px 14px; font-size: 14px; }
  .okno-pasek span { display: none; }
}

/* Logowanie w oknie na stronie głównej */
.logowanie-okno { width: min(400px, calc(100vw - 32px)); padding: 32px; border: 0; border-radius: 20px; box-shadow: var(--cien); color: var(--tusz); }
.logowanie-okno::backdrop { background: rgba(25, 27, 51, .45); backdrop-filter: blur(4px); }
.logowanie-okno[open] { animation: okno-wejscie 260ms var(--wyjscie); }
.logowanie-okno[open]::backdrop { animation: tlo-wejscie 260ms ease; }
@keyframes okno-wejscie { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes tlo-wejscie { from { opacity: 0; } }
.logowanie-okno .logo { width: max-content; margin-bottom: 16px; }
.logowanie-okno h2 { font-size: 26px; margin-bottom: 20px; }
.logowanie-okno form[method=post] { display: grid; gap: 6px; }
.logowanie-okno label { font-size: 14px; font-weight: 550; margin-top: 8px; }
.logowanie-okno input { font: inherit; padding: 11px 14px; border: 1px solid var(--linia); border-radius: 10px; background: #fff; color: var(--tusz); transition: border-color 160ms ease, box-shadow 160ms ease; }
.logowanie-okno input:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-tlo); }
.logowanie-okno button[type=submit] { margin-top: 18px; width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.logowanie-uwaga { font-size: 14px; color: var(--szary); background: var(--papier); padding: 10px 12px; border-radius: 10px; margin: 0 0 8px; }
.logowanie-zamknij { position: absolute; top: 14px; right: 14px; }
.logowanie-zamknij button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; color: var(--szary); cursor: pointer; transition: background-color 160ms ease; }
.logowanie-zamknij button:hover { background: var(--papier); }
@media (prefers-reduced-motion: reduce) { .logowanie-okno[open], .logowanie-okno[open]::backdrop { animation: none; } }