/* Arkusz strony głównej taskmanager.pl.
 *
 * Do 2026-10-01 siedział WKLEJONY w <style> w `strona/index.html`. Wyniesiony, bo robił
 * ze strony głównej dokument nieczytelny dla pobieraczek AI: 188 KB stylów przed treścią
 * spychało pierwszy <h1> na bajt 233 000, a narzędzia ucinające pobieranie na 100 KB
 * widziały 58 znaków - sam tytuł. Zmierzone.
 *
 * Przy okazji: ten sam arkusz jechał w KAŻDEJ z 13 kopii językowych strony głównej i nie
 * dawał się zapisać w pamięci podręcznej - teraz to jeden plik dla wszystkich.
 *
 * Kolejność ma znaczenie: ten arkusz ładuje się PRZED `site-shell.css`, tak jak wcześniej
 * stał przed nim blok inline. Odwrócenie kolejności zmieni, która reguła wygrywa.
 *
 * Ścieżki `url(...)` są względem TEGO pliku (jak w site-shell.css), nie względem dokumentu.
 */

    /* Inter (SIL OFL, self-hosted) - ogolnodostepny odpowiednik SF Pro Apple.
       Plik zmiennowagowy (100-900), subsety latin + latin-ext (polskie znaki). */
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url("fonts/inter-var-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Inter";
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
      src: url("fonts/inter-var-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    :root {
      --ink: #1d1d1f;
      --ink-soft: #2c2c2e;
      /* TEST (2026-08-30): kolor akcentu wskazany przez wlasciciela - niebieski.
         Historia: brand #0A9D94/#07857e/#e6f5f4 -> zielen #4E8656 -> obecny niebieski.
         Powrot = podmiana tych 3 linii (+ --shell-teal* w assets/site-shell.css
         + rgba akcentu, ktore zapisane sa jako 48,111,219). */
      --teal: #4070D4;
      --teal-deep: #2F58AC;
      --teal-tint: #eaf0fb;
      --aqua: #f5f7fa;
      --cyan: #00ddff;
      --pink: #ff00ab;
      --yellow: #ffd00c;
      --paper: #ffffff;
      --soft: #f5f5f7;
      --dark: #0e192b;   /* ten sam granat co stopka (--shell-ink) */
      --muted: #6e6e73;
      --line: #e6eaef;
      --shadow: 0 10px 28px rgba(14, 25, 43, .07);
      --shadow-soft: 0 1px 2px rgba(14, 25, 43, .05);
      --page: min(1320px, calc(100% - 64px));
      --radius: 22px;
      /* Paleta akcentów = kolory wydarzeń z kalendarza aplikacji (Google colorId 1-11)
         + kolory terminów zadań (czerwony po terminie, niebieski dziś, teal w terminie).
         Wspólny język barw strony i programu - patrz aplikacja/js/calendar.js. */
      --acc-red: #F20D0D;
      --acc-blue: #0D79F2;
      --acc-lavender: #7986CB;
      --acc-sage: #33B679;
      --acc-grape: #8E24AA;
      --acc-flamingo: #E67C73;
      --acc-banana: #F6BF26;
      --acc-tangerine: #F4511E;
      --acc-peacock: #039BE5;
      --acc-blueberry: #3F51B5;
      --acc-basil: #0B8043;
      --acc-tomato: #D50000;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { overflow-x: hidden; scroll-behavior: smooth; }
    body {
      margin: 0;
      padding-top: 76px;
      color: var(--ink);
      background: var(--paper);
      font-family: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { color: inherit; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { text-wrap: balance; }
    /* Akapity pełniące rolę nagłówków (mają własny ujemny letter-spacing) - patrz
       komentarz przy regule word-spacing w site-shell.css. */
    .savings-subtitle, .savings-result-label { word-spacing: .08em; }
    p { text-wrap: pretty; }
    section[id] { scroll-margin-top: 20px; }
    :focus-visible { outline: 3px solid rgba(0, 221, 255, .75); outline-offset: 3px; }

    .skip-link {
      position: fixed;
      z-index: 100;
      top: -80px;
      left: 18px;
      padding: 11px 16px;
      border-radius: 9px;
      background: var(--yellow);
      color: var(--ink);
      font-weight: 800;
      transition: top .2s ease;
    }
    .skip-link:focus { top: 16px; }
    .container { width: var(--page); margin-inline: auto; }
    .section { padding: 112px 0; }
    .section-heading { margin: 0; font-size: clamp(40px, 5vw, 68px); font-weight: 800; letter-spacing: -.055em; line-height: 1.02; }
    .section-subtitle { margin: 16px 0 0; color: var(--muted); font-size: clamp(16px, 1.5vw, 19px); }
    .center { text-align: center; }
    .center .section-subtitle { margin-inline: auto; }
    /* Flat: dawny gradient tekstu zastąpiony jednolitym akcentem marki */
    .gradient-text {
      color: var(--teal);
    }

    .button {
      position: relative;
      display: inline-flex;
      min-height: 56px;
      align-items: center;
      justify-content: center;
      padding: 0 28px;
      border: 1px solid transparent;
      border-radius: 11px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .01em;
      text-transform: uppercase;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button-outline { border-color: var(--ink); background: rgba(255,255,255,.62); }
    .button-outline:hover { background: #fff; }
    .button-teal { background: var(--teal); color: #fff; box-shadow: 0 16px 38px rgba(64, 112, 212, .25); }
    .button-teal:hover { background: var(--teal-deep); }

    .brand {
      display: inline-flex;
      align-items: center;
    }
    .brand img { width: 192px; height: auto; }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      padding: 26px 0 96px;
      background: #fff;
    }
    .hero > .container { position: relative; z-index: 1; }
    .hero-copy { max-width: 1060px; margin: 54px auto 0; text-align: center; }
    .hero h1 {
      margin: 0;
      font-size: clamp(48px, 6.1vw, 82px);
      font-weight: 800;
      letter-spacing: -.065em;
      line-height: .99;
    }
    .hero h1 > span { display: block; }
    .hero-description { margin: 30px auto 0; font-size: clamp(16px, 1.7vw, 20px); }
    .hero-description strong { display: block; margin-top: 4px; font-weight: 800; }
    .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
    .hero-actions .button { width: min(260px, 100%); }

    .trust-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px 30px;
      margin: 34px auto 26px;
      color: #778396;
      font-size: 11px;
      font-weight: 700;
    }
    .trust-row .trust-label { font-weight: 500; }

    .app-stage { width: min(1040px, 100%); margin-inline: auto; }
    .app-window {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(14, 25, 43, .11);
      border-radius: 19px;
      background: #111a28;
      box-shadow: 0 42px 90px rgba(14, 25, 43, .22);
    }
    .app-window::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
      pointer-events: none;
    }
    .window-bar {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: #111822;
      color: #98a5b4;
      font-size: 9px;
      font-weight: 700;
    }
    .window-dots { display: flex; gap: 5px; }
    .window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff605c; }
    .window-dots i:nth-child(2) { background: #ffbd44; }
    .window-dots i:nth-child(3) { background: #00ca4e; }
    .window-address { grid-column: 2; }
    .app-window img {
      width: 100%;
      height: auto;
      aspect-ratio: 1.91 / 1;
      object-fit: cover;
      background: #fff;
      transition: opacity .18s ease, transform .45s ease;
    }
    .app-window.is-changing img { opacity: .12; transform: scale(.994); }

    /* Ramka mikro-dema: demo-app gra bez strony-matki (bez podpisow), w stalym
       kadrze 1280x720 skalowanym transformem do szerokosci ramki - animacja
       wypelnia caly kadr 16:9. */
    /* Bez maski webkitowej - na jasnym tle zostawiala poszarpane biale rogi.
       Zaokraglenie i przyciecie robi kontener .app-window (ma wlasna warstwe). */
    .hero-demo-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #f5f5f7; }
    /* Spinner w stylu macOS - widoczny, dopoki kadr nie jest gotowy albo trwa
       podmiana ujecia; wczesniej w tym miejscu byla biala plansza. */
    .hero-demo-frame::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 30px;
      height: 30px;
      margin: -15px 0 0 -15px;
      border: 2.5px solid rgba(0, 0, 0, .12);
      border-top-color: rgba(0, 0, 0, .42);
      border-radius: 50%;
      opacity: 0;
      transition: opacity .25s ease;
      animation: tm-spin .8s linear infinite;
      pointer-events: none;
    }
    .hero-demo-frame:not(.is-ready)::after,
    .hero-demo-frame.is-swapping::after { opacity: 1; }
    /* Plakat to stan DOCELOWY, nie oczekiwanie na cokolwiek: na telefonie widget jest wyłączony
       (kadr < 640 px, skala 0,28 - tekst aplikacji byłby nieczytelny). Bez tej reguły spinner
       kręcił się nad gotowym zrzutem bez końca, bo warunek wyżej to „:not(.is-ready)" - i wyglądało
       to jak nagranie, które się nie ładuje. */
    .hero-demo-frame.is-poster::after { opacity: 0; animation: none; }
    @keyframes tm-spin { to { transform: rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      .hero-demo-frame::after { animation: none; }
    }
    /* Plakat (statyczny zrzut) startuje NIEWIDOCZNY - pokazuje sie tylko wtedy,
       gdy demo w ogole nie zagra (reduced-motion, waski ekran, brak widgetu).
       Wczesniej mrugal przy pierwszym ladowaniu strony. */
    .hero-demo-frame img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
      opacity: 0;
      transition: opacity .3s ease;
    }
    .hero-demo-frame.is-poster img { opacity: 1; }
    .hero-demo-frame iframe {
      position: absolute;
      left: 0;
      top: 0;
      width: 1280px;
      height: 720px;
      border: 0;
      transform-origin: 0 0;
      transform: scale(var(--hero-scale, 1));
      opacity: 0;
      transition: opacity .3s ease;
      pointer-events: none;
      background: #fff;
    }
    .hero-demo-frame.is-ready iframe { opacity: 1; }
    /* Przelaczanie ujec: kadr gasnie, lekko sie oddala i podnosi, po czym wraca */
    .hero-demo-frame iframe { transition: opacity .42s cubic-bezier(.32, .72, 0, 1), transform .52s cubic-bezier(.32, .72, 0, 1); }
    .hero-demo-frame:not(.is-ready) iframe,
    .hero-demo-frame.is-swapping iframe {
      opacity: 0;
      transform: scale(calc(var(--hero-scale, 1) * .97)) translateY(14px);
    }


    .pill-tabs {
      display: flex;
      width: max-content;
      max-width: 100%;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 24px auto 0;
      padding: 2px 4px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .pill-tabs::-webkit-scrollbar { display: none; }
    .pill {
      position: relative;
      flex: 0 0 auto;
      min-height: 42px;
      padding: 0 22px;
      border: 1.5px solid var(--ink);
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .pill:hover { transform: translateY(-1px); background: #fff; }
    .pill[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
    .dark-section { background: var(--dark); color: #fff; }
    .problems { padding: 108px 0 118px; }
    .problems .section-heading { max-width: 800px; margin-inline: auto; }
    .problems .section-subtitle { max-width: 820px; color: #d7dee7; }
    .problem-grid {
      display: grid;
      grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr);
      gap: clamp(36px, 6vw, 86px);
      align-items: center;
      width: min(1120px, 100%);
      margin: 62px auto 0;
    }
    .problem-tabs { display: grid; gap: 11px; }
    .problem-tab {
      min-height: 54px;
      padding: 10px 22px;
      border: 1.5px solid rgba(255,255,255,.82);
      border-radius: 999px;
      background: transparent;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
      font-weight: 800;
      text-align: left;
      transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .problem-tab:hover { transform: translateX(4px); border-color: var(--yellow); }
    .problem-tab[aria-selected="true"] { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
    .problems .app-window { box-shadow: 0 42px 90px rgba(0,0,0,.38); }

    .slider-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 32px;
      margin-bottom: 38px;
    }
    .slider-heading .section-subtitle { margin-bottom: 2px; }
    .slider-controls { display: flex; flex: 0 0 auto; gap: 9px; }
    .round-button {
      display: grid;
      width: 50px;
      height: 50px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(14,25,43,.05);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .round-button:hover { transform: translateY(-2px); border-color: var(--ink); background: var(--soft); }
    .round-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .round-button-dark { border-color: rgba(255,255,255,.55); background: transparent; color: #fff; }
    .round-button-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }

    .feature-rail {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(278px, 310px);
      gap: 18px;
      overflow-x: auto;
      padding: 4px 4px 30px;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .feature-rail::-webkit-scrollbar { display: none; }
    .feature-card {
      overflow: hidden;
      min-height: 500px;
      border: 1px solid #e3e8ed;
      border-radius: 18px;
      background: #fff;
      box-shadow: var(--shadow-soft);
      scroll-snap-align: start;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
    .feature-shot {
      position: relative;
      height: 238px;
      overflow: hidden;
      background:
        radial-gradient(circle at 80% 10%, rgba(255,0,171,.12), transparent 36%),
        linear-gradient(145deg, #edf1ff, #e9fbf8);
    }
    .feature-shot img {
      position: absolute;
      width: 118%;
      max-width: none;
      height: 86%;
      right: -17%;
      bottom: -2%;
      object-fit: cover;
      object-position: left center;
      border: 1px solid rgba(14,25,43,.08);
      border-radius: 13px 0 0 0;
      box-shadow: -10px -4px 30px rgba(14,25,43,.16);
      transition: transform .45s ease;
    }
    .feature-card:hover .feature-shot img { transform: translate(-2%, -2%) scale(1.025); }
    .feature-body { padding: 28px 24px 30px; }
    .feature-body h3 { margin-bottom: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
    .feature-body p { margin: 0; color: #4d596b; font-size: 14px; line-height: 1.62; }

    .assistant {
      background:
        radial-gradient(circle at 12% 50%, rgba(0,221,255,.09), transparent 24%),
        radial-gradient(circle at 88% 45%, rgba(255,0,171,.055), transparent 24%),
        var(--aqua);
    }
    .assistant .section-heading { color: transparent; background: linear-gradient(90deg, #f5b516, var(--pink)); background-clip: text; -webkit-background-clip: text; }
    .assistant-intro { max-width: 820px; margin: 18px auto 0; font-size: 17px; }
    .assistant-intro strong { display: block; font-size: 18px; }
    .assistant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 50px; }
    .assistant-card {
      overflow: hidden;
      border: 1px solid rgba(14,25,43,.08);
      border-radius: 20px;
      background: #fff;
      box-shadow: var(--shadow-soft);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .assistant-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
    .assistant-shot {
      position: relative;
      height: 265px;
      overflow: hidden;
      background: linear-gradient(145deg, #eef0ff, #e9fbf7);
    }
    .assistant-shot img {
      position: absolute;
      width: 112%;
      max-width: none;
      height: 88%;
      right: -11%;
      bottom: -1px;
      object-fit: cover;
      object-position: left center;
      border: 1px solid rgba(14,25,43,.08);
      border-radius: 14px 0 0 0;
      box-shadow: -12px -7px 35px rgba(14,25,43,.15);
    }
    .assistant-card:nth-child(2) .assistant-shot { background: linear-gradient(145deg, #fff7d9, #effcf9); }
    .assistant-card:nth-child(3) .assistant-shot { background: linear-gradient(145deg, #f7eefe, #edf8ff); }
    .assistant-card .feature-body { padding: 30px 28px 34px; }

    .ai-steps { overflow: hidden; padding: 104px 0 112px; }
    .ai-steps .slider-heading { align-items: center; margin-bottom: 34px; }
    .ai-steps .section-subtitle { color: #d3dbe5; }
    .ai-tabs {
      display: flex;
      gap: 10px;
      width: 100%;
      overflow-x: auto;
      padding: 3px 2px 14px;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }
    .ai-tabs::-webkit-scrollbar { display: none; }
    .ai-tab {
      flex: 0 0 auto;
      min-height: 44px;
      padding: 0 20px;
      border: 1.5px solid rgba(255,255,255,.82);
      border-radius: 999px;
      background: transparent;
      color: #fff;
      cursor: pointer;
      font-size: 12px;
      font-weight: 800;
      transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    }
    .ai-tab:hover { transform: translateY(-1px); border-color: var(--yellow); }
    .ai-tab[aria-selected="true"] { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
    .ai-content {
      display: grid;
      grid-template-columns: minmax(270px, .62fr) minmax(0, 1.38fr);
      gap: clamp(40px, 7vw, 96px);
      align-items: center;
      margin-top: 36px;
    }
    .ai-copy h3 { margin-bottom: 18px; color: var(--yellow); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
    .ai-copy p { margin: 0; color: #eef2f7; font-size: clamp(17px, 1.65vw, 21px); line-height: 1.65; }
    .ai-steps .app-window { box-shadow: 0 38px 90px rgba(0,0,0,.42); }

    .comparison .section-subtitle { color: #293649; }
    .compare-table {
      width: min(1000px, 100%);
      margin: 56px auto 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: #fff;
      box-shadow: var(--shadow-soft);
    }
    .compare-row { display: grid; grid-template-columns: .48fr 1fr 1.12fr; }
    .compare-row[hidden] { display: none !important; }
    .compare-row + .compare-row { border-top: 1px solid var(--line); }
    .compare-cell { display: flex; min-height: 68px; align-items: center; padding: 15px 22px; }
    .compare-cell + .compare-cell { border-left: 1px solid var(--line); }
    .compare-row:first-child .compare-cell { min-height: 82px; font-size: 18px; font-weight: 800; }
    .compare-label { font-weight: 800; }
    .compare-good { gap: 13px; background: #fff9df; color: var(--teal-deep); font-weight: 800; }
    .compare-good svg { flex: 0 0 auto; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
    .compare-brand img { width: 178px; }

    .references { background: var(--aqua); }
    .testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 50px; }
    .testimonial {
      overflow: hidden;
      border: 1px solid rgba(14,25,43,.08);
      border-radius: 18px;
      background: #fff;
      box-shadow: var(--shadow-soft);
    }
    .testimonial-head {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 15px;
      align-items: center;
      padding: 24px 26px;
      border-bottom: 1px solid var(--line);
    }
    .avatar { display: grid; width: 50px; height: 50px; overflow: hidden; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #dff8f5, #e5e9ff); color: var(--teal-deep); font-size: 14px; font-weight: 800; }
    .avatar img { width: 100%; height: 100%; object-fit: cover; }
    .testimonial-name { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
    .testimonial-role { color: var(--muted); font-size: 12px; }
    .testimonial-logo { justify-self: end; color: #ed1b2f; font-size: 25px; font-weight: 800; letter-spacing: -.04em; }
    .testimonial blockquote { margin: 0; padding: 28px 26px 32px; color: #344154; font-size: 14px; line-height: 1.7; }

    .pricing { padding-bottom: 132px; }
    .pricing .trust-row { margin-top: 32px; margin-bottom: 54px; }
    .price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
    .price-card {
      position: relative;
      display: flex;
      min-width: 0;
      flex-direction: column;
      padding: 30px 24px 28px;
      border: 1px solid var(--line);
      background: #fff;
    }
    .price-card:first-child { border-radius: 18px 0 0 18px; }
    .price-card:last-child { border-radius: 0 18px 18px 0; }
    .price-card + .price-card { border-left: 0; }
    .price-card.featured { z-index: 1; border: 2px solid var(--teal); box-shadow: 0 26px 60px rgba(64, 112, 212,.15); }
    .price-ribbon {
      position: absolute;
      right: -2px;
      bottom: 100%;
      left: -2px;
      padding: 14px 24px;
      border-radius: 18px 18px 0 0;
      background: var(--teal);
      color: #fff;
      font-size: 15px;
      font-weight: 800;
    }
    .price-name { margin-bottom: 2px; font-size: 20px; font-weight: 800; }
    .price-team { min-height: 42px; color: var(--muted); font-size: 13px; }
    .price {
      display: flex;
      flex-wrap: wrap;
      gap: 3px 8px;
      align-items: baseline;
      margin: 20px 0 14px;
      font-size: clamp(28px, 2.5vw, 36px);
      font-weight: 800;
      letter-spacing: -.05em;
      line-height: 1.08;
    }
    .price-amount { white-space: nowrap; }
    .price small { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
    .price-meta { min-height: 104px; }
    .price-meta p,
    .price-services p {
      position: relative;
      padding-left: 18px;
    }
    .price-meta p::before,
    .price-services p::before {
      position: absolute;
      top: .62em;
      left: 1px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 4px rgba(64, 112, 212, .1);
      content: "";
    }
    .price-meta p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
    .price-card .button { width: 100%; margin: 26px 0 28px; }
    .price-services { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
    .price-services strong { display: block; margin-bottom: 13px; font-size: 13px; }
    .price-services p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.55; }
    .price-footnote { max-width: 960px; margin: 24px auto 0; color: #7d8898; font-size: 9px; text-align: center; }

    /* ---- Licencja: baner w rytmie kafli "Warto poznac takze" ---- */
    .wieczysta {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
      align-items: center;
      gap: clamp(24px, 4vw, 56px);
      margin-top: clamp(44px, 5vw, 68px);
      padding: clamp(30px, 4vw, 56px);
      overflow: hidden;
      border-radius: 26px;
      background: radial-gradient(120% 140% at 0% 0%, #eaf0fb 0%, #f5f5f7 55%, #f5f5f7 100%);
    }
    .wieczysta h3 { margin: 10px 0 0; font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; letter-spacing: -.02em; line-height: 1.16; }
    .wieczysta p { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

    /* Tlo wizualu: ukosne pasma zamiast kol - motyw okregow niesie juz Asystent AI. */
    .wieczysta-wizual {
      position: relative;
      display: grid;
      place-items: center;
      min-height: clamp(150px, 17vw, 210px);
      border-radius: 20px;
      background:
        repeating-linear-gradient(115deg, rgba(64, 112, 212, .09) 0 2px, transparent 2px 14px),
        linear-gradient(140deg, #e9eefb 0%, #f4f6fb 58%, #eef4fa 100%);
    }
    .wieczysta-wizual::after {
      content: "";
      position: absolute;
      inset: 12% 14%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 70%);
    }
    .wieczysta-wizual svg { position: relative; width: clamp(140px, 17vw, 210px); height: auto; }

    /* ---- Mozg firmy: baner AI nad sekcja "Dlaczego Task Manager" ----
       Uklad celowo ten sam co baner licencji wyzej (tresc | wizual), zeby strona
       trzymala jeden rytm; rozni sie wizualem - tam lemniskata, tu sygnet AI.
       Wlasne klasy zamiast .wieczysta, bo tamta nazwa mowi o licencji. */
    .mozg {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
      align-items: center;
      gap: clamp(24px, 4vw, 56px);
      padding: clamp(30px, 4vw, 56px);
      overflow: hidden;
      border-radius: 26px;
      background: radial-gradient(120% 140% at 0% 0%, #eaf0fb 0%, #f5f5f7 55%, #f5f5f7 100%);
    }
    .mozg h2 { margin: 10px 0 0; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.02em; line-height: 1.14; }
    .mozg p { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
    .mozg-claim { margin-top: 20px; color: var(--ink); font-weight: 600; }
    .mozg .button { margin-top: 28px; }

    /* Sygnet AI na cichej tarczy z kol - ten sam chwyt co .cross-visual--ai
       na podstronach, tyle ze kola rysujemy w obrebie kafla (karta przycina). */
    .mozg-wizual {
      position: relative;
      display: grid;
      place-items: center;
      min-height: clamp(170px, 19vw, 240px);
      overflow: hidden;
      border-radius: 20px;
      background: linear-gradient(140deg, #e9eefb 0%, #f4f6fb 58%, #eef4fa 100%);
    }
    .mozg-wizual::before,
    .mozg-wizual::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      aspect-ratio: 1;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    /* Kola wymierzone WYSOKOSCIA kafla, nie szerokoscia - kafel jest szerszy niz
       wyzszy, wiec procent szerokosci scinal pierscien u gory i u dolu. */
    .mozg-wizual::before {
      height: 200%;
      background: radial-gradient(circle, rgba(64, 112, 212, .10) 0%, rgba(64, 112, 212, .05) 46%, rgba(64, 112, 212, 0) 70%);
    }
    .mozg-wizual::after {
      height: 78%;
      border: 1px solid rgba(64, 112, 212, .13);
      box-shadow: 0 0 0 clamp(14px, 1.8vw, 26px) rgba(64, 112, 212, .04);
    }
    .mozg-wizual .ai-orb { position: relative; z-index: 1; width: clamp(130px, 15vw, 190px); }

    /* ---- Uslugi cykliczne w karcie pakietu (Opieka, Wsparcie) ---- */
    .price-services .usluga-cykliczna { margin-top: 12px; }
    .price-services .usluga-cykliczna span { display: block; margin-top: 2px; color: #97a1b0; font-size: 11px; }

    @media (max-width: 1000px) {
    }
    @media (max-width: 700px) {
    }

    .demo {
      position: relative;
      padding: 0 0 112px;
      background: linear-gradient(to bottom, var(--dark) 0 530px, #fff 530px 100%);
      color: #fff;
    }
    .demo-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(42px, 7vw, 96px); align-items: start; }
    .demo-copy { padding-top: 78px; }
    .demo-copy .section-heading { color: #fff; }
    .demo-copy > p { margin: 28px 0 22px; font-size: 18px; }
    .demo-benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 17px; }
    .demo-benefits li::before { content: "✓"; margin-right: 10px; font-weight: 800; }
    .demo-form {
      position: relative;
      margin-top: 58px;
      padding: 38px 38px 42px;
      border: 1px solid rgba(14,25,43,.09);
      border-radius: 20px;
      background: #fff;
      color: var(--ink);
      box-shadow: 0 30px 90px rgba(14,25,43,.23);
    }
    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 18px; }
    .field { display: grid; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    .field label { font-size: 12px; font-weight: 800; }
    .field input, .field select, .field textarea {
      width: 100%;
      border: 1px solid #aeb8c3;
      border-radius: 9px;
      background: #fff;
      color: var(--ink);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field input, .field select { min-height: 56px; padding: 0 16px; }
    .field textarea { min-height: 126px; padding: 14px 16px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: 0; box-shadow: 0 0 0 4px rgba(64, 112, 212,.11); }
    .consents { display: grid; gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
    .consent-all { font-size: 12px; font-weight: 800; }
    .consent {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 9px;
      align-items: start;
      color: #647083;
      font-size: 8px;
      line-height: 1.5;
    }
    .consent input,
    .consent-all input { accent-color: var(--teal); }
    .consent input { margin-top: 2px; }
    .demo-submit { width: min(330px, 100%); margin-top: 28px; }

    .faq { padding: 108px 0 116px; background: var(--aqua); }
    .faq-answer p { margin: 0; }

    .site-footer { padding: 58px 0 54px; background: var(--ink); color: #fff; }
    .footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 38px; align-items: start; }
    .footer-mark { width: 38px; height: 38px; object-fit: cover; object-position: left; }
    .footer-nav { display: grid; gap: 4px; color: #c9d2dd; font-size: 11px; }
    .footer-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    .footer-meta { color: #c9d2dd; font-size: 10px; text-align: right; }
    .footer-meta strong { display: block; color: #fff; font-size: 11px; }

    .js .reveal { opacity: 1; transform: none; }
    .js .reveal.is-visible { opacity: 1; transform: none; }

    @media (max-width: 1080px) {
      .wieczysta { grid-template-columns: 1fr; }
      .mozg { grid-template-columns: 1fr; }
      .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
      .price-card, .price-card:first-child, .price-card:last-child { border: 1px solid var(--line); border-radius: 18px; }
      .price-card + .price-card { border-left: 1px solid var(--line); }
      .price-card.featured { margin-top: 48px; }
      .assistant-shot { height: 225px; }
    }

    @media (max-width: 860px) {
      :root { --page: min(100% - 36px, 680px); }
      .section { padding: 88px 0; }
      .brand img { width: 166px; }
      .hero { min-height: auto; padding-bottom: 78px; }
      .hero-copy { margin-top: 46px; }
      .problem-grid, .ai-content, .demo-grid { grid-template-columns: 1fr; }
      .problem-grid { gap: 38px; }
      .problem-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .problem-tab { text-align: center; }
      .assistant-grid { grid-template-columns: 1fr; }
      .assistant-card { display: grid; grid-template-columns: .9fr 1.1fr; }
      .assistant-shot { height: 100%; min-height: 280px; }
      .assistant-card .feature-body { display: grid; align-content: center; }
      .ai-content { gap: 36px; }
      .compare-table { overflow-x: auto; }
      .compare-row { min-width: 780px; }
      .testimonial-grid { grid-template-columns: 1fr; }
      .demo { padding-bottom: 88px; background: linear-gradient(to bottom, var(--dark) 0 650px, #fff 650px 100%); }
      .demo-copy { padding-top: 72px; }
      .demo-form { margin-top: 0; }
      .footer-grid { grid-template-columns: auto 1fr; }
      .footer-meta { grid-column: 2; text-align: left; }
    }

    @media (max-width: 620px) {
      :root { --page: calc(100% - 28px); }
      body { font-size: 15px; }
      .section { padding: 74px 0; }
      .section-heading { font-size: 40px; }
      .hero { padding-top: 20px; }
      .hero-copy { margin-top: 40px; }
      .hero h1 { font-size: clamp(40px, 12vw, 58px); line-height: 1.01; }
      .hero-description { margin-top: 24px; }
      .hero-actions { display: grid; }
      .hero-actions .button { width: 100%; }
      .trust-row { gap: 12px 20px; }
      .window-address { display: none; }
      .pill-tabs { justify-content: start; margin-left: 0; margin-right: 0; }
      .problem-tabs { grid-template-columns: 1fr; }
      .problem-tab { min-height: 49px; }
      .slider-heading { align-items: start; }
      .slider-controls { padding-top: 4px; }
      .round-button { width: 44px; height: 44px; }
      .feature-rail { grid-auto-columns: minmax(270px, 84vw); }
      .feature-card { min-height: 470px; }
      .assistant-card { display: block; }
      .assistant-shot { height: 235px; min-height: 235px; }
      .ai-steps .slider-heading { align-items: start; }
      .ai-steps .section-heading { font-size: 41px; }
      .ai-copy p { font-size: 16px; }
      .price-grid { grid-template-columns: 1fr; }
      .price-card.featured { margin-top: 50px; }
      .pricing { padding-bottom: 88px; }
      .demo { background: linear-gradient(to bottom, var(--dark) 0 590px, #fff 590px 100%); }
      .demo-copy { padding-top: 64px; }
      .demo-form { padding: 28px 20px 32px; }
      .form-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .testimonial-head { grid-template-columns: auto 1fr; }
      .testimonial-logo { grid-column: 2; justify-self: start; }
      .compare-table { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
      .compare-row { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
      .compare-row + .compare-row { margin-top: 10px; border-top: 1px solid var(--line); }
      .compare-row:first-child { border: 0; background: transparent; }
      .compare-row:first-child .compare-cell:first-child { display: none; }
      .compare-row:first-child .compare-cell { min-height: 58px; padding: 12px; border: 0; font-size: 13px; }
      .compare-row:first-child .compare-good { border-radius: 12px 12px 0 0; }
      .compare-cell { min-height: 64px; padding: 13px 12px; font-size: 11px; line-height: 1.45; }
      .compare-cell + .compare-cell { border-left: 1px solid var(--line); }
      .compare-label { grid-column: 1 / -1; min-height: 44px; border-bottom: 1px solid var(--line); background: var(--soft); }
      .compare-label + .compare-cell { border-left: 0; }
      .compare-good { gap: 7px; }
      .compare-good svg { width: 16px; height: 16px; }
      .compare-brand img { width: 126px; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-meta { grid-column: auto; }
    }

    /* Final visual system: navigation, conversion sections and responsive polish */
    section[id] { scroll-margin-top: 92px; }

    .site-header {
      position: fixed;
      z-index: 80;
      top: 0;
      right: 0;
      left: 0;
      width: 100%;
      border-bottom: 1px solid rgba(14, 25, 43, .08);
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 8px 30px rgba(14, 25, 43, .04);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .site-nav {
      display: flex;
      min-height: 76px;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }
    .site-nav .brand { flex: 0 0 auto; }
    .site-nav .brand img { width: 166px; }
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(20px, 2.2vw, 36px);
      margin-left: auto;
    }
    .nav-links > a {
      position: relative;
      padding: 27px 0 25px;
      color: #293649;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
    }
    .nav-links > a::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 18px;
      left: 0;
      height: 2px;
      border-radius: 999px;
      background: var(--teal);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .22s ease;
    }
    .nav-links > a:hover::after, .nav-links > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
    .nav-cta {
      flex: 0 0 auto;
      min-height: 46px;
      padding-inline: 22px;
      border-radius: 8px;
      font-size: 12px;
      text-transform: none;
    }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
    }
    .menu-toggle span, .menu-toggle::before, .menu-toggle::after {
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 999px;
      background: var(--ink);
      transition: transform .22s ease, opacity .22s ease;
    }
    .menu-toggle::before, .menu-toggle::after { content: ""; }
    .menu-toggle span { margin-block: 4px; }
    .site-header.menu-open .menu-toggle::before { transform: translateY(6px) rotate(45deg); }
    .site-header.menu-open .menu-toggle span { opacity: 0; }
    .site-header.menu-open .menu-toggle::after { transform: translateY(-6px) rotate(-45deg); }
    .mobile-menu { display: none; }

    html.i18n-pending body { visibility: hidden; }
    .language-switcher {
      position: relative;
      z-index: 85;
      flex: 0 0 auto;
    }
    .language-button {
      display: inline-flex;
      min-width: 104px;
      height: 42px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 11px;
      border: 1px solid rgba(14,25,43,.13);
      border-radius: 9px;
      background: #fff;
      color: #293649;
      cursor: pointer;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .language-button:hover,
    .language-button[aria-expanded="true"] {
      border-color: rgba(64, 112, 212,.55);
      background: #f4fbfa;
      box-shadow: 0 8px 22px rgba(14,25,43,.08);
    }
    .language-button svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .language-current-short { display: none; text-transform: uppercase; }
    .language-chevron {
      width: 6px;
      height: 6px;
      margin: -3px 1px 0 2px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg);
      transition: transform .2s ease;
    }
    .language-button[aria-expanded="true"] .language-chevron { margin-top: 3px; transform: rotate(225deg); }
    .language-menu {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      display: grid;
      width: 312px;
      max-height: min(520px, calc(100vh - 110px));
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      padding: 10px;
      overflow-y: auto;
      border: 1px solid rgba(14,25,43,.1);
      border-radius: 16px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 24px 70px rgba(14,25,43,.2);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .language-menu[hidden] { display: none; }
    .language-option {
      position: relative;
      min-height: 42px;
      padding: 0 12px 0 32px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: #344158;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      text-align: left;
    }
    .language-option:hover,
    .language-option:focus-visible { background: #f0f8f7; color: var(--ink); }
    .language-option[aria-checked="true"] { background: #e7f7f5; color: #08776f; }
    .language-option[aria-checked="true"]::before {
      content: "✓";
      position: absolute;
      top: 50%;
      left: 12px;
      color: var(--teal-deep);
      font-size: 12px;
      transform: translateY(-50%);
    }

    .hero {
      min-height: auto;
      padding: 46px 0 62px;
    }
    .hero-copy { max-width: min(1180px, 100%); margin: 0 auto; }
    .hero h1 { font-size: var(--hero-heading-size, clamp(42px, 3.55vw, 54px)); line-height: 1.04; }
    .hero h1 > .hero-line-primary { display: inline-flex; max-width: 100%; align-items: baseline; justify-content: flex-start; letter-spacing: -.04em; white-space: nowrap; }
    .hero-line-primary [data-hero-prefix] { margin-right: .18em; }
    .hero-line-primary [data-hero-suffix] { margin-left: .18em; }
    .hero-typewriter {
      position: relative;
      display: inline-flex;
      width: var(--hero-word-width, 10.6ch);
      align-items: baseline;
      justify-content: center;
      padding-bottom: .055em;
      white-space: nowrap;
      text-align: center;
      vertical-align: baseline;
    }
    .hero-typewriter::before,
    .hero-typewriter::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
      border-radius: 999px;
      pointer-events: none;
    }
    .hero-typewriter::before { background: rgba(29, 29, 31, .1); }
    .hero-typewriter::after {
      right: auto;
      left: 50%;
      width: min(100%, var(--hero-active-width, 0px));
      background: linear-gradient(90deg, rgba(29, 29, 31, .3), rgba(29, 29, 31, .62));
      transition: width 36ms linear;
      transform: translateX(-50%);
    }
    .hero-typewriter-word { display: inline-block; flex: 0 0 auto; color: var(--ink); }
    .hero-typewriter-cursor {
      display: inline-block;
      flex: 0 0 auto;
      width: .48em;
      margin-left: .04em;
      color: var(--ink);
      font-weight: 600;
      animation: hero-cursor-blink .82s steps(1, end) infinite;
      transform: translateY(-.02em);
    }
    @keyframes hero-cursor-blink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: .08; } }
    .hero h1 .hero-line-ai { display: block; margin-top: 3px; }
    .hero-description {
      max-width: 930px;
      margin-top: 20px;
      color: #3e4a5c;
      font-size: clamp(14px, 1.2vw, 16px);
      line-height: 1.55;
    }
    .hero-description strong { margin-top: 2px; }
    .hero-actions { gap: 12px; margin-top: 22px; }
    .hero-actions .button { width: 212px; min-height: 52px; }
    .hero-price-note { display: block; margin-top: 10px; color: #657286; font-size: 11px; font-weight: 700; }
    .hero .trust-row { margin: 22px auto 18px; }
    .hero .app-stage { width: min(832px, 100%); }
    .hero .app-window { border-radius: 17px; box-shadow: 0 30px 74px rgba(14, 25, 43, .19); }
    .hero .pill-tabs {
      width: 100%;
      max-width: none;
      justify-content: safe center;
      margin-top: 10px;
      padding: 13px 10px 5px;
      scroll-padding-inline: 10px;
      scroll-snap-type: x proximity;
      overscroll-behavior-inline: contain;
    }
    .hero .pill { min-height: 38px; padding-inline: 18px; font-size: 10px; scroll-snap-align: start; }

    .feature-rail { grid-auto-columns: clamp(340px, 31vw, 390px); gap: 22px; }
    .feature-card { min-height: 500px; }
    .feature-shot { height: 250px; }
    .price-card.featured { margin-top: 0; }

    .demo {
      padding: 96px 0 104px;
      background: var(--dark);
    }
    .demo .container { width: min(1180px, calc(100% - 64px)); }
    .demo-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(48px, 5vw, 72px); }
    .demo-copy { padding-top: 0; }
    .demo-copy .section-heading { margin-top: 30px; font-size: clamp(46px, 4vw, 58px); white-space: nowrap; }
    .demo-copy > p { margin: 25px 0 26px; color: #aab7c9; font-size: 18px; line-height: 1.55; }
    .demo-copy > p + p { margin-top: -14px; }
    .demo-benefits { gap: 15px; font-size: 17px; font-weight: 700; }
    .demo-benefits li { display: flex; align-items: center; gap: 13px; }
    .demo-benefits li::before {
      display: grid;
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      place-items: center;
      margin: 0;
      border-radius: 50%;
      background: var(--teal);
      color: #fff;
      font-size: 15px;
    }
    .demo-note {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      margin-top: 36px;
      padding: 20px 21px;
      border: 1px solid rgba(64, 112, 212, .52);
      border-radius: 16px;
      background: rgba(64, 112, 212, .08);
      color: #b8d6d4;
      font-size: 13px;
      line-height: 1.65;
    }
    .demo-note svg { width: 22px; height: 22px; fill: none; stroke: #72e3dd; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .demo-form {
      margin-top: 0;
      padding: 38px 36px 34px;
      border: 0;
      border-radius: 26px;
      box-shadow: 0 34px 90px rgba(0, 0, 0, .28);
    }
    .form-grid { gap: 17px 18px; }
    .field label { color: #344158; font-size: 12px; }
    .required { color: #e63861; }
    .field input, .field select, .field textarea { border: 1.5px solid #d2dce7; border-radius: 12px; }
    .field input, .field select { min-height: 58px; }
    .field textarea { min-height: 116px; }
    .consents { gap: 14px; margin-top: 20px; padding-top: 18px; }
    .consent-all { display: flex; align-items: center; gap: 10px; font-size: 12px; }
    .consent { gap: 11px; font-size: 10px; line-height: 1.55; }
    .consent input, .consent-all input { width: 20px; height: 20px; flex: 0 0 20px; }
    .demo-submit { width: 100%; min-height: 58px; margin-top: 27px; text-transform: none; }

    .faq {
      padding: 104px 0 112px;
      background: var(--soft);
    }
    /* ---- FAQ w jezyku Apple ("Questions? Answers.") ----
       Bez kart i obrysow: same wloskowate linie, duze pytanie 21px,
       szewron po prawej obracany o 180 st., odpowiedz 17px w szarosci. */
    .faq .section-subtitle { display: none; } /* naglowek sam niesie przekaz */
    .faq-list, .functions .faq-list { display: block; width: min(1000px, 100%); margin: 44px auto 0; border: 0; }
    .faq details, .faq details[open] {
      overflow: visible;
      border: 0;
      border-top: 1px solid rgba(0, 0, 0, .12);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .faq details:last-child { border-bottom: 1px solid rgba(0, 0, 0, .12); }
    .faq summary {
      position: relative;
      display: flex;
      align-items: center;
      gap: 24px;
      min-height: 0;
      padding: 26px 46px 26px 0;
      color: var(--ink);
      font-size: clamp(17px, 1.7vw, 21px);
      font-weight: 600;
      letter-spacing: -.01em;
      line-height: 1.35;
    }
    /* Szewron zamiast plusa/minusa - obraca sie po rozwinieciu */
    .faq summary::before {
      content: "";
      position: absolute;
      top: 50%;
      right: 6px;
      width: 13px;
      height: 13px;
      margin-top: -8px;
      border-right: 2px solid #6e6e73;
      border-bottom: 2px solid #6e6e73;
      border-radius: 2px;
      background: none;
      transform: rotate(45deg);
      transform-origin: center;
      transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }
    .faq summary::after { display: none; }
    .faq details[open] summary::before { margin-top: -2px; transform: rotate(-135deg); }
    .faq-answer {
      max-width: 900px;
      padding: 0 60px 30px 0;
      color: #6e6e73;
      font-size: clamp(15px, 1.5vw, 17px);
      line-height: 1.55;
    }

    .site-footer { padding: 0; background: var(--ink); color: #fff; }
    .footer-cta { max-width: 820px; margin: 0 auto; padding: 90px 0 72px; text-align: center; }
    .footer-cta h2 { margin: 0; font-size: clamp(42px, 4.5vw, 62px); font-weight: 800; letter-spacing: -.055em; line-height: 1.05; }
    .footer-cta p { max-width: 670px; margin: 24px auto 0; color: #9ba9bd; font-size: 16px; line-height: 1.65; }
    .footer-cta-actions { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
    .footer-cta-actions .button { min-width: 190px; min-height: 56px; text-transform: none; }
    .button-footer-outline { border-color: #607087; background: transparent; color: #fff; }
    .button-footer-outline:hover { border-color: #fff; background: rgba(255,255,255,.06); }
    .footer-proof { margin-top: 16px; color: #62728a; font-size: 12px; font-weight: 700; }
    .footer-divider { height: 1px; background: rgba(255, 255, 255, .09); }
    .footer-main {
      display: grid;
      grid-template-columns: 1.35fr 1.05fr .9fr .7fr;
      gap: clamp(34px, 5vw, 72px);
      padding: 52px 0 48px;
    }
    .footer-logo { position: relative; display: inline-block; width: 190px; }
    .footer-logo img { width: 100%; }
    .footer-brand-copy { max-width: 310px; margin: 24px 0 0; color: #8f9db2; font-size: 12px; line-height: 1.75; }
    .footer-socials { display: flex; gap: 9px; margin-top: 20px; }
    .social-icon {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 11px;
      color: #aeb9c8;
    }
    .social-icon svg { width: 17px; height: 17px; fill: currentColor; }
    .footer-column h3 { margin: 3px 0 22px; color: #62728a; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
    .footer-column nav { display: grid; gap: 14px; }
    .footer-column a, .footer-column span { color: #aeb9c8; font-size: 12px; font-weight: 600; line-height: 1.5; }
    .footer-column a:hover { color: #fff; }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 26px; color: #62728a; font-size: 10px; }
    .made-in-eu { display: inline-flex; align-items: center; gap: 9px; color: #8b9ab0; font-weight: 700; letter-spacing: .02em; }
    .made-in-eu img { width: 27px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); object-fit: cover; }

    @media (max-width: 1020px) {
      .nav-links { gap: 18px; }
      .nav-links > a { font-size: 12px; }
      .site-nav .brand img { width: 150px; }
      .language-button { min-width: 44px; width: 44px; padding: 0; }
      .language-current-name, .language-chevron { display: none; }
      .language-current-short { display: inline; }
      .price-card.featured { margin-top: 0; }
      .footer-main { grid-template-columns: 1fr repeat(3, minmax(0, .72fr)); gap: 34px; }
    }

    @media (max-width: 900px) {
      body { padding-top: 64px; }
      section[id] { scroll-margin-top: 74px; }
      .site-nav { min-height: 64px; }
      .site-nav .brand img { width: 150px; }
      .nav-links, .site-nav > .nav-cta { display: none; }
      .language-switcher { margin-left: auto; }
      .menu-toggle { display: grid; margin-left: 0; }
      .mobile-menu {
        position: absolute;
        top: calc(100% + 8px);
        right: 18px;
        left: 18px;
        padding: 12px;
        border: 1px solid rgba(14,25,43,.09);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 24px 70px rgba(14,25,43,.18);
      }
      .site-header.menu-open .mobile-menu { display: grid; }
      .mobile-menu a { padding: 13px 14px; border-radius: 10px; color: #293649; font-size: 14px; font-weight: 700; }
      .mobile-menu a:hover { background: var(--soft); }
      .mobile-menu .button { margin-top: 7px; color: #fff; text-transform: none; }
      .hero { padding-top: 38px; }
      .hero h1 > .hero-line-primary { display: flex; flex-wrap: wrap; justify-content: center; white-space: normal; }
      .hero-typewriter { width: var(--hero-word-width-mobile, 10.6ch); }
      .demo .container { width: var(--page); }
      .demo-grid { grid-template-columns: 1fr; gap: 44px; }
      .demo-copy .section-heading { max-width: 620px; }
      .demo-copy .section-heading { white-space: normal; }
      .demo-note { max-width: 660px; }
      .demo-form { max-width: 700px; }
      .footer-main { grid-template-columns: repeat(3, 1fr); }
      .footer-brand-block { grid-column: 1 / -1; }
      .footer-brand-copy { max-width: 430px; }
    }

    @media (max-width: 620px) {
      .site-nav { min-height: 58px; }
      .site-nav .brand img { width: 140px; }
      .menu-toggle { width: 42px; height: 42px; }
      .language-button { width: 42px; height: 42px; }
      .language-menu { right: -52px; width: min(312px, calc(100vw - 32px)); }
      .hero { padding: 30px 0 52px; }
      .hero-copy { margin-top: 0; }
      .hero h1 { font-size: clamp(36px, 10.5vw, 46px); line-height: 1.04; }
      .hero-description { margin-top: 18px; font-size: 13px; }
      .hero-description strong { margin-top: 5px; }
      .hero-actions { display: grid; gap: 10px; margin-top: 20px; }
      .hero-actions .button { width: min(100%, 350px); min-height: 52px; }
      .hero-price-note { margin-top: 9px; }
      .hero .trust-row { gap: 9px 17px; margin: 21px auto 17px; }
      .hero .app-window { border-radius: 12px; }
      .hero .pill-tabs { justify-content: flex-start; margin-inline: 0; padding-top: 13px; }
      .feature-rail { grid-auto-columns: min(350px, calc(100vw - 48px)); gap: 16px; }
      .feature-card { min-height: 470px; }
      .compare-row { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
      .compare-cell { min-width: 0; padding: 14px 10px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
      .compare-row:first-child .compare-cell { font-size: 12px; }
      .compare-row:not(:first-child) .compare-good { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 7px; }
      .compare-row:not(:first-child) .compare-good svg { margin-top: 2px; }
      .compare-brand img { width: 108px; }
      .price-card.featured { margin-top: 50px; }
      /* --dark, nie --ink: na desktopie sekcja Demo jest granatowa (kolor stopki),
         a na telefonie zostala prawie czarna z czasow sprzed ujednolicenia ciemnych
         sekcji. Roznica byla niewidoczna, dopoki zdjecie bylo wyszparowane - teraz
         zdjecie ma wlasne tlo i kadr odcinalby sie prostokatem. */
      .demo { padding: 72px 0 78px; background: radial-gradient(circle at 50% 0%, rgba(64, 112, 212,.11), transparent 27%), var(--dark); }
      .demo-copy .section-heading { margin-top: 24px; font-size: 42px; }
      .demo-copy > p { margin-top: 20px; font-size: 16px; }
      .demo-benefits { font-size: 15px; }
      .demo-note { margin-top: 28px; padding: 18px; font-size: 12px; }
      .demo-form { padding: 26px 19px 28px; border-radius: 20px; }
      .consent { font-size: 9px; }
      .faq { padding: 76px 0 84px; }
      .faq-list { gap: 10px; margin-top: 38px; }
      .faq summary { padding: 20px 34px 20px 0; }
      .faq-answer { padding: 0 30px 24px 0; }
      .footer-cta { padding: 72px 0 58px; }
      .footer-cta h2 { font-size: 38px; }
      .footer-cta p { margin-top: 20px; font-size: 14px; }
      .footer-cta-actions { display: grid; gap: 10px; margin-top: 28px; }
      .footer-cta-actions .button { width: 100%; }
      .footer-main { grid-template-columns: 1fr; gap: 34px; padding: 44px 0; }
      .footer-brand-block { grid-column: auto; }
      .footer-column h3 { margin-bottom: 16px; }
      .footer-column nav { gap: 10px; }
      .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
    }

    /* Precision pass: crisp controls, safer typography and compact mobile cards */
    /* clip zamiast hidden: `overflow-x: hidden` na <body> robi z niego kontener
       przewijania, przez co KAZDY `position: sticky` w srodku przestaje dzialac
       (przelacznik wariantu w Cenniku odjezdzal z reszta strony). `clip` tnie
       tak samo, ale nie tworzy scrollportu. Poziome przyciecie widoku i tak
       trzyma <html>. */
    body { overflow-x: clip; font-kerning: normal; }
    h1, h2, h3 { overflow: visible; }
    .section-heading { letter-spacing: -.045em; line-height: 1.08; }
    .hero h1 { letter-spacing: -.05em; line-height: 1.08; }
    .hero-line-ai {
      padding: .02em .04em .12em;
      margin-inline: -.04em;
      letter-spacing: -.04em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
    .ai-steps .section-heading { padding-bottom: .1em; }
    .ai-copy h3 { line-height: 1.16; }

    .menu-toggle { position: relative; }
    .menu-toggle::before, .menu-toggle::after { content: none; }
    .menu-toggle > .menu-icon {
      position: relative;
      display: block;
      width: 22px;
      height: 16px;
      margin: 0;
      background: transparent;
    }
    .menu-toggle .menu-icon span {
      position: absolute;
      left: 0;
      display: block;
      width: 22px;
      height: 2px;
      margin: 0;
      border-radius: 999px;
      background: var(--ink);
      transform-origin: center;
      transition: top .22s cubic-bezier(.22, 1, .36, 1), transform .22s cubic-bezier(.22, 1, .36, 1), opacity .16s ease;
    }
    .menu-toggle .menu-icon span:nth-child(1) { top: 0; }
    .menu-toggle .menu-icon span:nth-child(2) { top: 7px; }
    .menu-toggle .menu-icon span:nth-child(3) { top: 14px; }
    .site-header.menu-open .menu-toggle .menu-icon span:nth-child(1) { top: 7px; opacity: 1; transform: rotate(45deg); }
    .site-header.menu-open .menu-toggle .menu-icon span:nth-child(2) { opacity: 0; transform: scaleX(.35); }
    .site-header.menu-open .menu-toggle .menu-icon span:nth-child(3) { top: 7px; opacity: 1; transform: rotate(-45deg); }
    .site-header.menu-open .menu-toggle > .menu-icon { opacity: 1; }

    .hero .pill-tabs { gap: 12px; padding-top: 19px; }

    .faq details { will-change: height; }

    .footer-brand-copy { margin-top: 0; }

    @media (max-width: 900px) {
      body.menu-lock { overflow: hidden; }
      .mobile-menu {
        position: absolute;
        top: 100%;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100vw;
        height: calc(100dvh - 64px);
        display: grid;
        grid-auto-rows: max-content;
        align-content: start;
        gap: 2px;
        padding: 20px max(18px, calc((100vw - 680px) / 2)) 28px;
        overflow-y: auto;
        border: 0;
        border-top: 1px solid rgba(14,25,43,.07);
        border-radius: 0;
        background: #fff;
        box-shadow: 0 24px 60px rgba(14,25,43,.12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1), visibility .2s;
      }
      .site-header.menu-open .mobile-menu {
        display: grid;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
      }
      .mobile-menu a { min-height: 50px; display: flex; align-items: center; padding: 0 14px; }
      .mobile-menu .button { justify-content: center; margin-top: 12px; }
    }

    @media (max-width: 620px) {
      :root { --page: calc(100% - 32px); }
      body { padding-top: 58px; }
      .section-heading { font-size: clamp(34px, 9.5vw, 40px); letter-spacing: -.035em; line-height: 1.1; }
      .hero h1 { letter-spacing: -.04em; line-height: 1.1; }
      .mobile-menu { top: 100%; height: calc(100dvh - 58px); padding-inline: 16px; }
      .menu-toggle { width: 40px; height: 40px; border-radius: 10px; }

      .hero .pill-tabs { padding: 18px 10px 6px; }
      .hero .pill { min-height: 40px; padding-inline: 17px; font-size: 10px; }

      .testimonial-grid { gap: 16px; margin-top: 32px; }
      .testimonial { border-radius: 16px; box-shadow: 0 12px 32px rgba(14,25,43,.07); }
      .testimonial-head {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 18px;
      }
      .testimonial-head > div:nth-child(2) { min-width: 0; }
      .avatar { width: 44px; height: 44px; }
      .testimonial-name { font-size: 17px; line-height: 1.25; }
      .testimonial-role { margin-top: 2px; font-size: 10px; line-height: 1.4; }
      .testimonial-logo { grid-column: auto; justify-self: end; margin: 0; font-size: 19px; line-height: 1; }
      .testimonial blockquote { padding: 20px 18px 24px; font-size: 13px; line-height: 1.68; }

      .price-grid { gap: 18px; }
      .price-card,
      .price-card:first-child,
      .price-card:last-child {
        padding: 26px 20px 24px;
        border-radius: 18px;
      }
      .price-card.featured {
        margin-top: 0;
        padding-top: 0;
        overflow: hidden;
      }
      .price-ribbon {
        position: static;
        margin: 0 -20px 24px;
        padding: 14px 20px;
        border-radius: 0;
        font-size: 14px;
      }
      .price-team, .price-meta { min-height: 0; }
      .price-team { margin-top: 3px; }
      .price { margin: 18px 0 13px; font-size: clamp(28px, 9vw, 36px); }
      .price-card .button { margin: 22px 0 24px; }
      .price-services { padding-top: 20px; }

      .faq summary { padding-right: 40px; }
    }

    /* Professional consistency pass: one visual language for actions, cards and motion */
    :root {
      --radius-control: 12px;
      --radius-media: 16px;
      --radius-card: 20px;
      --radius-panel: 24px;
      --shadow-control: 0 8px 22px rgba(14, 25, 43, .11);
      --shadow-card: 0 12px 34px rgba(14, 25, 43, .075);
      --shadow-card-hover: 0 20px 48px rgba(14, 25, 43, .12);
      --shadow-media: 0 30px 76px rgba(14, 25, 43, .18);
      --shadow-dark-media: 0 30px 72px rgba(0, 0, 0, .3);
    }

    body { line-height: 1.65; }
    .section-heading { font-size: clamp(38px, 4.2vw, 56px); letter-spacing: -.04em; line-height: 1.08; }
    .section-subtitle { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; }

    .button {
      min-height: 52px;
      padding-inline: 24px;
      border-radius: var(--radius-control);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
      transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .button:hover { transform: translateY(-2px); }
    .button:active { transform: translateY(0) scale(.99); }
    .button-teal { box-shadow: 0 9px 24px rgba(64, 112, 212, .22); }
    .button-outline { border-color: #9aa7b7; background: rgba(255,255,255,.72); box-shadow: none; }
    .nav-cta {
      min-height: 44px;
      padding-inline: 20px;
      border-radius: var(--radius-control);
      font-size: 13px;
      box-shadow: 0 7px 18px rgba(64, 112, 212, .18);
    }

    .cta-assurance {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #657286;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
    }
    .cta-assurance::before { content: "✓"; color: var(--teal-deep); font-size: 11px; font-weight: 800; }
    .hero-price-note { margin-top: 11px; }
    .price-card .button { margin: 26px 0 0; }
    .price-card .cta-assurance { min-height: 18px; margin: 8px 0 22px; }
    .demo-assurance { margin-top: 10px; }
    .footer-proof { margin-top: 15px; color: #74839a; font-size: 11px; }
    .footer-proof::before { color: #62d9d1; }

    .trust-row { gap: 16px 24px; }
    .client-logo {
      display: block;
      width: auto;
      height: auto;
      max-height: 32px;
      flex: 0 0 auto;
      object-fit: contain;
    }
    .client-logo--neonet { width: 91px; }
    .client-logo--wat { width: 101px; }
    .client-logo--polpharma { width: 112px; }
    .client-logo--uj { width: 75px; }
    .client-logo--huta { width: 99px; }
    .client-logo--flyspot { width: 102px; }
    .hero .client-logo { max-height: 27px; }

    .testimonial-logo {
      display: block;
      width: auto;
      height: auto;
      max-height: 42px;
      object-fit: contain;
      letter-spacing: 0;
    }
    .testimonial-logo--neonet { width: 116px; }
    .testimonial-logo--wood { width: 132px; }

    .app-window { border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
    .problems .app-window, .ai-steps .app-window { box-shadow: var(--shadow-dark-media); }
    .app-window img {
      will-change: opacity, transform, filter;
      transition: opacity .28s ease, transform .48s cubic-bezier(.22, 1, .36, 1), filter .36s ease;
    }
    .app-window.is-changing img { opacity: 0; transform: translateY(7px) scale(.994); filter: blur(2px); }

    .hero .pill-tabs {
      width: max-content;
      max-width: 100%;
      gap: 8px;
      margin-top: 18px;
      margin-bottom: -24px;
      padding: 4px 30px 30px;
      overflow-x: auto;
      scroll-padding-inline: 30px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }
    .hero .pill {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-content: center;
      padding: 0 17px;
      border: 1px solid rgba(14, 25, 43, .18);
      border-radius: 12px;
      background: #fff;
      color: #334156;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
    }
    .hero .pill:hover {
      border-color: rgba(108, 225, 218, .52);
      background: #f6fbfb;
      color: var(--ink);
      transform: none;
    }
    .hero .pill[aria-selected="true"] {
      border-color: rgba(106, 228, 221, .72);
      background: linear-gradient(135deg, rgba(64, 112, 212, .24), rgba(0, 221, 255, .07)), #fff;
      color: #075f59;
      box-shadow: 0 12px 28px rgba(14, 25, 43, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .feature-rail {
      margin: -8px -12px -30px;
      padding: 12px 12px 70px;
      scroll-padding-inline: 12px;
    }
    .feature-card,
    .assistant-card,
    .testimonial {
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
    }
    .feature-card:hover, .assistant-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
    .demo-form { border-radius: var(--radius-panel); box-shadow: var(--shadow-dark-media); }

    .slider-heading > :first-child {
      min-width: 0;
      flex: 1 1 auto;
    }

    .problem-tabs { gap: 10px; }
    .problem-tab,
    .ai-tab {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      font-weight: 700;
    }
    .problem-tab {
      display: grid;
      min-height: 58px;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: center;
      column-gap: 10px;
      padding: 9px 18px;
      border: 1px solid rgba(255,255,255,.19);
      border-radius: 14px;
      background: rgba(255,255,255,.035);
      color: #eef3f8;
      font-size: 13px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
      transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .problem-icon {
      position: relative;
      z-index: 1;
      display: grid;
      width: 30px;
      height: 30px;
      place-items: center;
      border: 1px solid rgba(255,255,255,.17);
      border-radius: 9px;
      background: rgba(255,255,255,.025);
      color: #8fa0b4;
      transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .problem-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .problem-tab .switcher-label { min-width: 0; line-height: 1.35; text-align: left; }
    .problem-tab:hover { transform: translateX(2px); border-color: rgba(108,225,218,.52); background: rgba(255,255,255,.06); }
    .ai-tabs { gap: 8px; padding: 3px 2px 16px; }
    .ai-tab {
      min-height: 44px;
      padding: 0 17px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 12px;
      background: rgba(255,255,255,.035);
      color: #e9eff5;
      font-size: 12px;
      line-height: 1.35;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    }
    .ai-tab:hover { transform: none; border-color: rgba(108,225,218,.52); background: rgba(255,255,255,.06); }
    .problem-tab[aria-selected="true"],
    .ai-tab[aria-selected="true"] {
      border-color: rgba(106, 228, 221, .72);
      background: linear-gradient(135deg, rgba(64, 112, 212, .24), rgba(0, 221, 255, .07));
      color: #fff;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255,255,255,.08);
    }
    .problem-tab[aria-selected="true"] .problem-icon {
      border-color: rgba(126,235,228,.45);
      background: rgba(126,235,228,.12);
      color: #82eee8;
      box-shadow: 0 0 18px rgba(66,224,216,.12);
    }
    .switcher-label { position: relative; z-index: 1; pointer-events: none; }

    .ai-copy { transition: opacity .22s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
    .ai-copy.is-changing { opacity: 0; transform: translateY(7px); }
    .ai-copy h3 { color: #78e3dd; }

    .comparison { background: linear-gradient(180deg, #fff 0%, #f8fbfc 100%); }
    .compare-table {
      border-color: #d8e2e9;
      border-radius: 22px;
      box-shadow: 0 22px 60px rgba(14,25,43,.09);
    }
    .compare-row { grid-template-columns: .58fr 1fr 1.08fr; }
    .compare-row + .compare-row { border-top-color: #dfe7ec; }
    .compare-cell { min-height: 74px; padding: 16px 24px; }
    .compare-cell + .compare-cell { border-left-color: #dfe7ec; }
    .compare-row:first-child .compare-cell { min-height: 88px; background: #f7f9fb; }
    .compare-row:first-child .compare-cell:first-child { background: #eef3f6; }
    .compare-label { background: #f7f9fb; color: #344158; }
    .compare-good {
      gap: 13px;
      background: #ecfaf8;
      color: #125f5a;
      font-weight: 700;
    }
    .compare-good svg {
      width: 24px;
      height: 24px;
      padding: 5px;
      border-radius: 50%;
      background: #d2f2ef;
      stroke-width: 3.2;
    }
    .compare-row:first-child .compare-good { background: #e3f7f4; }
    .compare-brand img { width: 168px; }

    .pricing .trust-row { margin-bottom: 86px; }

    @media (min-width: 861px) {
      .price { display: flex; min-height: 72px; align-items: center; }
      .price-card:last-child .price {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: clamp(22px, 2vw, 30px);
        line-height: 1.12;
      }
    }

    @media (hover: hover) and (min-width: 861px) {
      .compare-row:not(:first-child) {
        position: relative;
        z-index: 0;
        transition: box-shadow .2s ease;
      }
      .compare-row:not(:first-child) .compare-cell {
        transition: background-color .2s ease, color .2s ease;
      }
      .compare-row:not(:first-child):hover {
        z-index: 1;
        box-shadow: 0 10px 26px rgba(14, 25, 43, .09);
      }
      .compare-row:not(:first-child):hover .compare-label { background: #edf7f6; color: #165c58; }
      .compare-row:not(:first-child):hover .compare-cell:not(.compare-label):not(.compare-good) { background: #f8fbfb; }
      .compare-row:not(:first-child):hover .compare-good { background: #dff6f2; color: #0b645e; }
      .compare-row:not(:first-child):hover .compare-good svg { background: #bcebe6; }
    }

    .hero-line-ai {
      background: none;
      -webkit-text-fill-color: initial;
      animation: hero-gradient-drift 10s ease-in-out infinite alternate;
    }
    /* Gradient "+ Asystent AI" przywrocony decyzja wlasciciela (2026-08-30) -
       jedyny nie-flat akcent na stronie */
    .hero h1 .wave-letter {
      display: inline-block;
      color: hsl(calc(39deg - (var(--letter-index) * 4.5deg)) 100% 60%);
      -webkit-text-fill-color: currentColor;
      transform: translateY(0);
    }
    .hero-line-ai:hover .wave-letter,
    .hero-line-ai:focus-visible .wave-letter {
      animation: hero-letter-hover .72s cubic-bezier(.22, 1, .36, 1) both;
      animation-delay: calc(var(--letter-index) * 24ms);
    }
    @keyframes hero-gradient-drift {
      0% { filter: hue-rotate(0deg) saturate(1); }
      100% { filter: hue-rotate(-13deg) saturate(1.08); }
    }
    @keyframes hero-letter-hover {
      0%, 100% { transform: translateY(0); }
      42% { transform: translateY(-2.5px) rotate(-.35deg); }
      68% { transform: translateY(.8px) rotate(.2deg); }
    }

    .assistant .section-heading {
      padding: .04em .04em .16em;
      margin: -.04em -.04em -.12em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }

    .demo-copy .section-heading { margin-top: 0; }
    .demo-note strong { color: #7de5de; font-weight: 800; }

    .form-grid { gap: 18px; }
    /* prefiks + numer w jednej komorce siatki formularza (na telefonie tez obok siebie) */
    .phone-fields { display: grid; grid-template-columns: 5.3em minmax(0, 1fr); gap: 18px 10px; align-items: start; }
    .prefix-box { position: relative; }
    .field .prefix-box input { width: 100%; padding: 0 24px 0 10px; font-variant-numeric: tabular-nums; }
    .prefix-toggle {
      position: absolute; top: 0; right: 0; width: 26px; height: 100%;
      border: 0; background: transparent; cursor: pointer; padding: 0;
    }
    .prefix-toggle::before {
      content: ""; position: absolute; left: 6px; top: 50%; margin-top: -2px;
      border: 5px solid transparent; border-top: 6px solid #657286; border-bottom: 0;
    }
    /* lista krajow szersza niz pole - wychodzi poza komorke, nad kolejnymi polami */
    .prefix-list {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
      width: 290px; max-height: 288px; overflow-y: auto; margin: 0; padding: 6px; list-style: none;
      background: #fff; border: 1px solid #d2dce7; border-radius: 12px;
      box-shadow: 0 14px 34px rgba(14, 25, 43, .14);
    }
    .prefix-list[hidden] { display: none; }
    .prefix-list li {
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
      padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink);
    }
    .prefix-list li span { color: #657286; font-variant-numeric: tabular-nums; flex: none; }
    .prefix-list li:hover, .prefix-list li.is-active { background: #eef3fb; }
    .prefix-list li[hidden] { display: none; }
    .prefix-list .prefix-empty { color: #7c8796; cursor: default; }
    .prefix-list .prefix-empty:hover { background: transparent; }
    .field { gap: 8px; }
    .field label { color: #344158; font-size: 12px; font-weight: 700; line-height: 1.35; }
    .field input,
    .field select,
    .field textarea {
      border: 1px solid #b8c3cf;
      border-radius: 10px;
      color: var(--ink);
      font-size: 14px;
      line-height: 1.45;
      box-shadow: 0 1px 1px rgba(14, 25, 43, .02);
    }
    .field input,
    .field select {
      height: 54px;
      min-height: 54px;
      max-height: 54px;
      padding: 0 15px;
    }
    .field select {
      -webkit-appearance: none;
      appearance: none;
      padding-right: 42px;
      background-image: linear-gradient(45deg, transparent 50%, #657286 50%), linear-gradient(135deg, #657286 50%, transparent 50%);
      background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
      background-size: 5px 5px, 5px 5px;
      background-repeat: no-repeat;
      line-height: normal;
    }
    .field textarea { min-height: 118px; padding: 14px 15px; }
    .field input::placeholder,
    .field textarea::placeholder { color: #7c8796; opacity: 1; }
    .field select:invalid { color: #7c8796; }
    .field input:hover,
    .field select:hover,
    .field textarea:hover { border-color: #8593a4; }
    .field input:focus,
    .field select:focus,
    .field textarea:focus { border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(64, 112, 212,.12); }
    .field-error,
    .consent-error {
      display: none;
      margin: 0;
      color: #c92d48;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.35;
    }
    .field.has-error .field-error,
    .consent.has-error + .consent-error { display: block; }
    .field.has-error input,
    .field.has-error select,
    .field.has-error textarea {
      border-color: #df4961;
      background-color: #fff4f6;
      box-shadow: 0 0 0 3px rgba(223, 73, 97, .08);
    }
    .field.has-success input,
    .field.has-success select,
    .field.has-success textarea {
      border-color: #2b9a72;
      background-color: #f1fbf7;
      box-shadow: 0 0 0 3px rgba(43, 154, 114, .07);
    }
    .field.has-error input:focus,
    .field.has-error select:focus,
    .field.has-error textarea:focus { border-color: #c92d48; box-shadow: 0 0 0 3px rgba(223, 73, 97, .14); }
    .field.has-success input:focus,
    .field.has-success select:focus,
    .field.has-success textarea:focus { border-color: #23835f; box-shadow: 0 0 0 3px rgba(43, 154, 114, .13); }
    .consent.has-error { color: #a8263e; }
    .consent.has-error input { outline: 2px solid rgba(201,45,72,.55); outline-offset: 2px; }
    .consent.has-success input { outline: 2px solid rgba(43,154,114,.38); outline-offset: 2px; }
    .form-status {
      display: none;
      margin: 18px 0 -10px;
      color: #c92d48;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }
    .form-status.is-visible { display: block; }
    /* pułapka na boty: poza ekranem, nie display:none (część botów pomija ukryte pola) */
    .field-firma { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

    @media (max-width: 620px) {
      .section-heading { font-size: clamp(32px, 9vw, 38px); }
      .hero h1 { font-size: clamp(36px, 10.5vw, 44px); }
      .trust-row {
        position: relative;
        display: flex;
        width: calc(100% + 36px);
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 24px;
        margin-inline: -18px;
        padding: 38px 18px 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 18px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .trust-row::-webkit-scrollbar { display: none; }
      .trust-row .trust-label { position: absolute; top: 5px; left: 50%; width: max-content; transform: translateX(-50%); text-align: center; }
      .client-logo { max-width: none; max-height: 27px; flex: 0 0 auto; scroll-snap-align: start; }
      .client-logo--polpharma { width: 94px; max-width: 94px; }
      .client-logo--uj { width: 62px; }
      .testimonial-logo--neonet { width: 84px; }
      .testimonial-logo--wood { width: 100px; }
      .field input,
      .field select,
      .field textarea { font-size: 16px; }
      .consent { font-size: 10px; line-height: 1.6; }
      .problem-tabs {
        display: flex;
        overflow-x: auto;
        padding: 2px 2px 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }
      .problem-tabs::-webkit-scrollbar { display: none; }
      .problem-tab {
        width: max-content;
        min-width: 244px;
        max-width: 340px;
        min-height: 52px;
        flex: 0 0 auto;
        white-space: nowrap;
        scroll-snap-align: center;
      }
      .ai-tabs { scroll-snap-type: x mandatory; }
      .ai-tab { min-height: 44px; font-size: 12px; scroll-snap-align: center; }
      .hero .pill-tabs {
        width: 100%;
        justify-content: flex-start;
        margin-inline: 0;
        padding: 5px 30px 30px;
        border-radius: 14px;
        scroll-snap-type: x mandatory;
      }
      .hero .pill { min-height: 44px; padding-inline: 17px; font-size: 12px; scroll-snap-align: center; }
      .slider-heading { gap: 16px; }
      .pricing .trust-row { margin-bottom: 38px; }
      .feature-rail { margin-inline: -8px; padding-inline: 8px; }
    }

    @media (max-width: 860px) {
      .compare-table {
        display: grid;
        gap: 12px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .compare-row:first-child { display: none; }
      .compare-row:not(:first-child) {
        display: grid;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        overflow: hidden;
        border: 1px solid #dbe5eb;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 10px 28px rgba(14,25,43,.06);
      }
      .compare-row + .compare-row { border-top: 1px solid #dbe5eb; }
      .compare-cell { min-height: 88px; padding: 38px 14px 15px; font-size: 13px; line-height: 1.45; }
      .compare-cell + .compare-cell { border-left: 1px solid #e0e8ed; }
      .compare-label {
        grid-column: 1 / -1;
        min-height: 0;
        padding: 12px 14px;
        border-bottom: 1px solid #dfe7ec;
        background: #f3f6f8;
      }
      .compare-label + .compare-cell { border-left: 0; }
      .compare-row:not(:first-child) .compare-cell:nth-child(2)::before,
      .compare-row:not(:first-child) .compare-good::before {
        position: absolute;
        top: 12px;
        left: 14px;
        color: #7b8797;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
      }
      .compare-row:not(:first-child) .compare-cell:nth-child(2),
      .compare-row:not(:first-child) .compare-good { position: relative; align-items: flex-start; }
      .compare-row:not(:first-child) .compare-cell:nth-child(2)::before { content: "Program w abonamencie"; }
      .compare-row:not(:first-child) .compare-good::before { content: "Task Manager"; color: #228179; }
      .compare-row:not(:first-child) .compare-good { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
      .compare-row:not(:first-child) .compare-good svg { margin-top: -1px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
      .js .reveal { opacity: 1; transform: none; }
      .hero h1 .wave-letter { transform: none !important; }
      .hero-typewriter-cursor { animation: none !important; opacity: 1; }
    }

    @media (max-width: 620px) {
      .hero h1 { font-size: clamp(32px, 8.8vw, 40px); line-height: 1.08; }
      .hero-line-primary [data-hero-suffix] { display: block; flex-basis: 100%; margin-top: .08em; margin-left: 0; }
      .hero h1 .hero-line-ai { margin-top: .12em; }
    }

    /* Pricing and hero CTA: stable layouts across phone and tablet widths. */
    @media (min-width: 621px) and (max-width: 1080px) {
      .pricing .price-grid { padding-top: 52px; }
      .pricing .price-card.featured {
        margin-top: 0;
        border: 2px solid var(--teal);
        border-radius: 0 0 18px 18px;
      }
    }

    @media (min-width: 360px) and (max-width: 620px) {
      .hero-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center;
        gap: 10px;
      }
      .hero-actions .button {
        width: auto !important;
        min-width: 0;
        flex: 1 1 0;
        padding-inline: 12px;
        white-space: nowrap;
      }
      .price-card.featured { border: 2px solid var(--teal); }
    }

    @media (max-width: 359px) {
      .hero-actions { display: grid; }
      .hero-actions .button { width: 100%; }
    }

    /* === Sekcja „Przestań płacić abonament" (kalkulator oszczędności) === */
    .savings { padding-top: 100px; }
    .savings .center { margin-bottom: 52px; }
    /* padding-bottom: gradient (background-clip: text) maluje tylko obszar pudełka,
       więc przy ciasnym line-height dolne wydłużenia liter („g", „j", „y") wypadały
       poza tło i były ucinane. */
    .savings-subtitle { margin-top: 14px; padding-bottom: .14em; font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
    .savings-card {
      display: grid;
      grid-template-columns: 1.06fr 1fr;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow-soft);
    }
    .savings-panel { padding: 50px 54px; min-width: 0; }
    .savings-panel--input { background: #fff; }
    .savings-kicker { display: block; margin-bottom: 12px; color: var(--teal); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .savings-lead-title { margin: 0 0 10px; color: var(--ink); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
    .savings-lead { margin: 0 0 42px; max-width: 46ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
    .savings-field + .savings-field { margin-top: 38px; }
    .savings-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
    .savings-field-head > span { color: var(--muted); font-size: 14px; font-weight: 600; }
    .savings-field-head > strong { color: var(--ink); font-size: 18px; font-weight: 800; white-space: nowrap; }

    /* Suwak (własny — z pigułką i strzałkami, magnetyczne kamienie) */
    .tm-range { position: relative; height: 42px; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
    .tm-range-track { position: absolute; top: 50%; left: 0; right: 0; height: 6px; transform: translateY(-50%); border-radius: 999px; background: #e7edf3; }
    .tm-range-thumb {
      position: absolute; top: 50%; left: 0;
      display: inline-flex; align-items: center;
      height: 38px; padding: 0 3px;
      transform: translate(-50%, -50%);
      border-radius: 999px;
      background: var(--teal);
      color: #fff;
      box-shadow: 0 10px 24px rgba(64, 112, 212, .35);
      transition: background .2s ease;
      touch-action: none;
    }
    .tm-range:hover .tm-range-thumb { background: var(--teal-deep); }
    .tm-range-arrow { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
    .tm-range-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
    .tm-range:focus-visible { outline: none; }
    .tm-range:focus-visible .tm-range-thumb { box-shadow: 0 0 0 4px rgba(64, 112, 212, .28); }

    .savings-milestones { position: relative; height: 46px; margin-top: 10px; }
    .savings-milestone { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translateX(-50%); color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .15s ease; }
    .savings-milestone::before { content: ""; width: 1.5px; height: 8px; background: #c9d4df; transition: background .15s ease; }
    .savings-milestone:hover { color: var(--teal-deep); }
    .savings-milestone:hover::before { background: var(--teal); }
    .savings-milestone.is-active { color: var(--teal-deep); font-weight: 800; }
    .savings-milestone.is-active::before { width: 2px; background: var(--teal); }
    .savings-milestone.is-staggered { top: 20px; }
    .savings-milestone.is-staggered::before { height: 5px; }

    .savings-panel--result {
      display: flex; flex-direction: column;
      background: radial-gradient(circle at 82% -12%, rgba(64, 112, 212, .38), transparent 58%), var(--ink);
      color: #fff;
    }
    /* Obie etykiety wyniku leżą w tej samej komórce siatki, więc slot ma zawsze wysokość
       tej wyższej - karta nie zmienia wysokości przy przełączeniu na wariant kontaktowy,
       niezależnie od języka i liczby wierszy tekstu. */
    .savings-result-heads { display: grid; margin: auto 0 0; }
    .savings-result-heads > .savings-result-label { grid-area: 1 / 1; margin: 0; }
    .savings-result-label { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.25; }
    .savings-result-label[hidden] { display: block; visibility: hidden; }
    /* Wariant kontaktowy: nie ma obok kwoty, więc tekst może być większy;
       text-wrap: balance rozkłada wiersze równomiernie zamiast zostawiać sierotę. */
    .savings-result-label--contact { font-size: clamp(28px, 2.5vw, 35px); line-height: 1.2; text-wrap: balance; }
    .savings-amount { margin: 14px 0 8px; color: var(--yellow); font-size: clamp(48px, 6vw, 88px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
    /* Kwota i pole lat przy „powyżej X osób" znikają, ale ZACHOWUJĄ swoje miejsce -
       wysokość karty kalkulatora ma być stała niezależnie od ustawień suwaków.
       Etykiety wyniku podmieniają się 1:1, więc te chowamy normalnie (display: none). */
    .savings-amount[hidden],
    .savings-field[hidden] { display: block; visibility: hidden; }
    /* Wlepa cukierkowa (die-cut): gruba biała obwódka, gradient jak "+ Asystent AI", gloss i przebłysk */
    .savings-sticker { position: relative; display: inline-flex; overflow: hidden; align-items: center; align-self: flex-start; gap: 20px; margin: 26px 0 auto; padding: 20px 34px; background: linear-gradient(120deg, #ffbf1b 0%, #ff6c59 48%, var(--pink) 100%); color: #fff; border: 5px solid #fff; border-radius: 999px; box-shadow: 0 14px 34px rgba(255, 0, 171, .32), 0 5px 0 rgba(14, 25, 43, .16); --sticker-scale: 1; transform-origin: left center; transform: rotate(-2deg) scale(var(--sticker-scale)); animation: sticker-sway 5.5s ease-in-out infinite; }
    .savings-sticker::before { content: ""; position: absolute; top: 10px; left: 30px; width: 46px; height: 13px; border-radius: 999px; background: rgba(255, 255, 255, .45); filter: blur(1px); transform: rotate(-6deg); }
    .savings-sticker::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -25%; width: 38px; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .65), transparent); transform: skewX(-18deg); animation: sticker-glint 4.2s ease-in-out infinite; }
    .savings-sticker-pct { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; text-shadow: 0 3px 0 rgba(14, 25, 43, .2); }
    .savings-sticker-pct[hidden] { display: none; }
    .savings-sticker-deal { display: inline-flex; align-items: center; }
    .savings-sticker-deal[hidden] { display: none; }
    .savings-sticker-deal svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 0 rgba(14, 25, 43, .18)); }
    .savings-sticker-text { display: grid; gap: 4px; padding-left: 20px; border-left: 2px dashed rgba(255, 255, 255, .55); }
    .savings-sticker-text strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
    .savings-sticker-text small { color: rgba(255, 255, 255, .88); font-size: 13.5px; font-weight: 700; }
    .savings-sticker-text small b { color: #fff; font-weight: 800; }
    .savings-disclaimer { max-width: 900px; margin: 18px auto 0; color: #8b96a6; font-size: 10.5px; line-height: 1.5; text-align: center; }
    /* Wariant „powyżej X osób": wlepa jest jedyną treścią panelu, więc powiększamy ją skalą.
       Skala w transformie (nie w paddingu/foncie) NIE zmienia układu - wysokość karty zostaje stała. */
    .savings-sticker--big { --sticker-scale: 1.22; }
    @keyframes sticker-sway { 0%, 100% { transform: rotate(-2.2deg) scale(var(--sticker-scale)); } 50% { transform: rotate(-.5deg) translateY(-2px) scale(var(--sticker-scale)); } }
    @keyframes sticker-glint { 0%, 60% { left: -25%; } 85%, 100% { left: 115%; } }
    @media (prefers-reduced-motion: reduce) { .savings-sticker, .savings-sticker::after { animation: none; } }
    .savings-field--onteal { margin-top: 40px; }
    .savings-field--onteal .savings-field-head > span { color: rgba(255,255,255,.72); }
    .savings-field--onteal .savings-field-head > strong { color: #fff; }
    .tm-range--light .tm-range-track { background: rgba(255,255,255,.22); }
    .tm-range--light .tm-range-thumb { background: var(--yellow); color: var(--ink); box-shadow: 0 10px 24px rgba(255, 208, 12, .3); }
    .tm-range--light:hover .tm-range-thumb { background: #ffdb3d; }
    .tm-range--light:focus-visible .tm-range-thumb { box-shadow: 0 0 0 4px rgba(255, 208, 12, .3); }
    .savings-demo { margin-top: 26px; width: 100%; text-transform: none; }

    @media (max-width: 860px) {
      .savings { padding-top: 72px; }
      .savings .center { margin-bottom: 36px; }
      .savings-card { grid-template-columns: 1fr; }
      .savings-panel { padding: 36px 26px; }
      .savings-field--onteal { margin-top: 30px; }
      .savings-sticker { gap: 15px; padding: 15px 24px; }
      .savings-sticker--big { --sticker-scale: 1.1; }
      .savings-sticker-pct { font-size: 34px; }
    }

    /* Siedem zakładek hero nie mieści się w jednym rzędzie kadru - na desktopie
       zawijamy je do dwóch rzędów, żeby ostatnia nie chowała się za krawędzią.
       Na węższych ekranach zostaje przewijanie ze scroll-snapem. */
    @media (min-width: 1000px) {
      .hero .pill-tabs {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        overflow-x: visible;
        row-gap: 8px;
      }
    }

    /* ================================================================
       FLAT DESIGN - uspojnienie z aplikacja TM (2026-08-30).
       Jedna barwa akcentu (teal marki) + paleta kalendarza do akcentowania,
       cienkie 1px obrysy zamiast wielkich cieni, neutralne szarosci.
       Sekcje ciemne: #252526 (--dark). Blok celowo na koncu arkusza -
       nadpisuje wczesniejsze ozdobniki bez przepisywania calego CSS.
       ================================================================ */
    /* Wybor jezyka: bez ramki i kolorowej ikony, sam napis 13px z szewronem
       (jak przelaczniki w globalnej nawigacji Apple) */
    .site-header.shell-header .shell-language-button,
    .site-footer.shell-footer .shell-language-button {
      min-height: 34px;
      padding: 0 12px;
      gap: 5px;
      border: 0 !important;                 /* site-shell.css laduje sie pozniej */
      border-radius: 980px !important;      /* i ma tu ramke + radius 9px */
      background: transparent;
      color: var(--ink);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: -.01em;
    }
    .site-header.shell-header .shell-language-button:hover { background: #f5f5f7; }
    .shell-globe { width: 15px; height: 15px; color: #86868b; }
    .shell-chevron { width: 5px; height: 5px; border-width: 1.3px; color: #86868b; }
    .shell-language-menu {
      width: 200px;
      padding: 6px;
      border: 0;
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .06);
    }
    .shell-language-menu a { padding: 8px 12px; border-radius: 9px; font-size: 13px; font-weight: 400; color: var(--ink); }
    .shell-language-menu a:hover { background: #f5f5f7; color: var(--ink); }

    /* Przycisk w menu (site-shell.css: .nav-cta, 13px/800, radius 10, cien)
       sprowadzony do jezyka Apple - mala pigulka 15px regular */
    .shell-nav .nav-cta {
      min-height: 34px;
      padding: 0 16px;
      border-radius: 980px;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: -.01em;
      box-shadow: none !important;
    }
    .shell-nav .nav-cta:hover { transform: none; }
    /* Hamburger jak w globalnej nawigacji Apple: dwie wloskowate kreski,
       po otwarciu skladaja sie w krzyzyk. Bez ramki i tla. */
    .site-header .menu-toggle { width: 40px; height: 40px; border: 0; border-radius: 980px; background: transparent; }
    .site-header .menu-toggle:hover { background: #f5f5f7; }
    .menu-toggle .menu-icon { width: 18px; height: 11px; }
    .menu-toggle .menu-icon span { width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; }
    .menu-toggle .menu-icon span:nth-child(1) { top: 0; }
    .menu-toggle .menu-icon span:nth-child(2) { top: 5px; opacity: 0; }   /* Apple ma dwie kreski */
    .menu-toggle .menu-icon span:nth-child(3) { top: 10px; }
    .site-header.menu-open .menu-toggle .menu-icon span:nth-child(1) { top: 5px; transform: rotate(45deg); }
    .site-header.menu-open .menu-toggle .menu-icon span:nth-child(2) { opacity: 0; }
    .site-header.menu-open .menu-toggle .menu-icon span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

    /* ================= ROZWINIETE MENU (mega) w jezyku Apple =================
       Zostaje podzial 2 kolumn (lista + prawa kolumna ze screenem i CTA),
       ale znika ozdobnik: ikony w ramkach, strzalki przy kazdym linku, tlo
       hoveru i gradient w promo. Apple stawia na sam tekst i powietrze. */
    .site-header.shell-header .mega-panel {
      top: 62px;
      border: 0;
      border-radius: 18px;
      box-shadow: 0 18px 60px rgba(0, 0, 0, .13), 0 0 0 .5px rgba(0, 0, 0, .06);
    }
    .site-header.shell-header .mega-layout { grid-template-columns: minmax(0, 1fr) 320px; min-height: 0; }
    .site-header.shell-header .mega-main { padding: 34px 40px 38px; }
    .site-header.shell-header .mega-panel-head { padding-bottom: 0; border-bottom: 0; }
    .site-header.shell-header .mega-panel-head .eyebrow { display: none; }   /* Apple nie daje nadlinii w menu */
    .site-header.shell-header .mega-panel-head h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
    .site-header.shell-header .mega-panel-head > a { color: var(--teal); font-size: 13px; font-weight: 400; letter-spacing: -.01em; }
    .site-header.shell-header .mega-panel-head > a:hover { text-decoration: underline; }
    /* Uklad jak w globalnej nawigacji Apple: kategorie plyna w wywazonych
       kolumnach (CSS columns), a kazda kategoria to zwarty blok - naglowek plus
       JEDNA pionowa lista. Wczesniej byla siatka 2x kategorie, a w kazdej
       kategorii druga siatka 2x linki, przez co powstawaly cztery ragged
       kolumny i duze puste pola. */
    .site-header.shell-header .mega-main .mega-category-grid {
      display: block;
      columns: 3;
      column-gap: 38px;
      padding-top: 24px;
      gap: 0;
    }
    .site-header.shell-header .mega-main .mega-category { break-inside: avoid; margin: 0 0 26px; }
    .site-header.shell-header .mega-main .mega-category nav { display: grid; grid-template-columns: 1fr; gap: 0; }
    .site-header.shell-header #practice-mega .mega-main .mega-category-grid { columns: 2; }
    .site-header.shell-header .mega-category h3 { margin: 0 0 6px; color: #86868b; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
    .site-header.shell-header .mega-link {
      display: block;
      min-height: 0;
      padding: 5px 0;
      border-radius: 0;
      background: none !important;
      color: var(--ink);
    }
    .site-header.shell-header .mega-link strong { font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; }
    .site-header.shell-header .mega-link:hover strong { text-decoration: underline; }
    .site-header.shell-header .mega-link-icon,
    .site-header.shell-header .mega-arrow { display: none; }
    /* Bez rozpychania w pionie - CTA ma siedziec tuz pod opisem, a nie na samym
       dole kolumny (flexowy space-between zostawial wielka dziure). */
    .site-header.shell-header .mega-layout .mega-promo {
      justify-content: flex-start;
      padding: 34px 32px 32px;
      border-left: 1px solid rgba(14, 25, 43, .08);
      background: #fbfbfd;
    }
    .site-header.shell-header .mega-promo-visual { border: 0; border-radius: 14px; box-shadow: 0 8px 24px rgba(14, 25, 43, .12); }
    .site-header.shell-header .mega-promo h3 { margin: 20px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
    .site-header.shell-header .mega-promo p { margin: 8px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
    .site-header.shell-header .mega-promo .button {
      align-self: flex-start;
      width: auto;
      min-height: 0;
      padding: 10px 20px;
      border-radius: 980px;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: -.01em;
    }

    /* ================= MENU MOBILNE w jezyku Apple =================
       Bez kresek przy podpunktach, bez "+"/"-" w kolorze i bez tla na
       rozwinietej pozycji - lista jak w globalnej nawigacji apple.com:
       duzy tekst, cienki separator, szewron obracany przy rozwinieciu. */
    @media (max-width: 900px) {
      .site-header.shell-header .mobile-menu { padding-top: 8px; background: #fff; box-shadow: none; border-top: 1px solid rgba(14, 25, 43, .08); }
      .site-header.menu-open .mobile-menu { gap: 0; }
      .site-header.shell-header .mobile-menu > a,
      .site-header.shell-header .mobile-menu summary {
        min-height: 54px;
        padding: 0 2px;
        border-radius: 0;
        border-bottom: 1px solid rgba(14, 25, 43, .07);
        color: var(--ink);
        font-size: 19px;
        font-weight: 500;
        letter-spacing: -.02em;
      }
      .site-header.shell-header .mobile-menu summary::after {
        content: "";
        width: 8px;
        height: 8px;
        margin-left: auto;
        margin-right: 6px;
        border-right: 1.6px solid #86868b;
        border-bottom: 1.6px solid #86868b;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .22s ease;
      }
      .site-header.shell-header .mobile-menu details[open] summary { background: transparent; color: var(--ink); }
      .site-header.shell-header .mobile-menu details[open] summary::after { content: ""; transform: translateY(2px) rotate(225deg); }
      .site-header.shell-header .mobile-subnav { gap: 0; padding: 6px 0 14px 2px; }
      .site-header.shell-header .mobile-subnav a {
        min-height: 38px;
        padding: 0 2px;
        border-left: 0;                 /* zrodlo "dziwnych kresek z lewej" */
        color: #424245;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: -.01em;
      }
      .site-header.shell-header .mobile-subnav a strong { font-weight: 500; }
      /* CTA w menu: ta sama pigulka co wszedzie indziej (980/17px regular),
         szerokosc do tresci - pelnowymiarowy prostokat wypadal z jezyka Apple. */
      .site-header.shell-header .mobile-menu > .button {
        justify-content: center;
        justify-self: start;      /* .mobile-menu to grid - align-self nie zwezi */
        width: auto;
        min-height: 0;
        margin-top: 22px;
        padding: 11px 26px;
        border-radius: 980px;
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -.01em;
        box-shadow: none !important;
      }
    }

    /* Header i stopka (site-shell.css) maja zaszyta rodzine Plus Jakarta -
       przelaczamy caly widok na Inter jedna regula */
    .site-header.shell-header, .site-header.shell-header *,
    .site-footer, .site-footer *, button, input, select, textarea {
      font-family: "Inter", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    }

    /* Typografia w duchu Apple: wieksze, gestsze naglowki + spokojna szarosc tresci */
    .section-heading { font-size: clamp(40px, 4.6vw, 64px); font-weight: 700; letter-spacing: -.02em; line-height: 1.06; }
    .section-subtitle { font-size: clamp(17px, 1.6vw, 21px); }
    /* Przyciski w jezyku Apple: pigulka, 17px regular, bez capsow i cieni */
    .button {
      min-height: 0;
      padding: 11px 22px;
      border-radius: 980px;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -.01em;
      line-height: 1.18;
      text-transform: none;
      box-shadow: none !important;
    }
    .button-teal { box-shadow: none; }
    .button-outline { border: 1px solid rgba(14, 25, 43, .22); background: #fff; }
    .button-outline:hover { border-color: var(--ink); background: var(--soft); }
    .round-button { box-shadow: none; }
    /* Karty bez obrysow - odcinaja sie od tla samym kolorem i miekkim cieniem */
    .feature-card, .assistant-card, .testimonial, .price-card, .compare-table,
    .savings-card, .demo-form {
      border: 0;
      box-shadow: 0 2px 14px rgba(14, 25, 43, .07);
    }
    /* Obrys wyroznionej karty przez inset box-shadow, nie outline - outline
       z ujemnym offsetem zostawial uskok na zaokraglonym rogu. */
    .price-card.featured { border: 0; outline: 0; box-shadow: inset 0 0 0 2px var(--teal), 0 2px 14px rgba(14, 25, 43, .07); }
    .app-window, .hero .app-window { border: 0; box-shadow: 0 24px 64px rgba(14, 25, 43, .14); }
    .hero .pill { border: 1px solid var(--line); border-radius: 999px; box-shadow: none !important; } /* !important: bazowy CSS kladzie inset-owa biala kreske na gorze pigulki */
    .hero .pill:hover { border-color: rgba(14, 25, 43, .3); }
    .hero .pill[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
    /* ---- HERO w jezyku Apple ----
       Jedna skala odstepow (16/24/56/72), hierarchia jak na stronach produktowych:
       tytul mowi wszystko, podtytul REGULAR, korzysci drobna szarosc,
       potem powietrze - CTA - powietrze - produkt - pigulki - logotypy. */
    .hero { padding: 20px 0 88px; }
    .hero .app-window { border-radius: 26px; overflow: hidden; isolation: isolate; }
    .hero .window-bar { display: none; }
    .hero .app-stage { width: min(810px, 100%); margin-top: 56px; }
    .hero-copy { margin-top: 48px; }
    .hero h1 { font-size: var(--hero-heading-size, clamp(40px, 4.6vw, 64px)); font-weight: 700; letter-spacing: -.02em; }
    .hero-description {
      margin: 16px auto 0;
      color: var(--ink);
      font-size: clamp(18px, 1.8vw, 21px);
      font-weight: 400;
      letter-spacing: 0;
      line-height: 1.45;
    }
    .hero-claims {
      margin: 6px auto 0;
      color: #86868b;
      font-size: clamp(13px, 1.3vw, 15px);
      font-weight: 400;
    }
    .hero-actions { gap: 28px; margin-top: 28px; align-items: center; }
    /* CTA doslownie jak u Apple: mala pigulka 17px regular + goly link z szewronem */
    .hero-actions .button {
      width: auto;
      min-height: 0;
      padding: 11px 22px;
      border-radius: 980px;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.18;
      text-transform: none;
      letter-spacing: -.01em;
      box-shadow: none;
    }
    /* Drugie CTA: ta sama pigulka, bez wypelnienia, z zielonym obrysem.
       Podwojona klasa: site-shell.css laduje sie PO tym arkuszu i jego
       .button { border-color: transparent } wygrywalo przy rownej wadze. */
    .hero-actions .button-ghost,
    .button-ghost.button-ghost {
      border: 1px solid var(--teal);
      background: transparent;
      color: var(--teal-deep) !important;
      transition: background .2s ease, border-color .2s ease;
    }
    .hero-actions .button-ghost:hover,
    .button-ghost.button-ghost:hover { border-color: var(--teal-deep); background: var(--teal-tint); }
    /* Logotypy na spodzie hero (wzorzec icproject): wysrodkowany podpis,
       wyszarzone monochromatyczne loga w rownym rzedzie */
    .hero .trust-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: clamp(26px, 4vw, 52px);
      margin: 72px auto 0;
    }
    .trust-logos { display: contents; }   /* desktop: uklad jak bez opakowania */
    .hero .trust-label {
      flex-basis: 100%;
      margin: 0 0 4px;
      color: #86868b;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      text-align: center;
    }
    /* Dekoracja pod kadrem hero: kolorowe plyty wyjezdzajace na boki.
       Mocno polprzezroczyste i rozmyte - maja budowac glebie, nie przyciagac wzroku. */
    .hero .app-stage { position: relative; }
    .hero .app-window { position: relative; z-index: 1; }
    .hero-cards { position: absolute; inset: 0; pointer-events: none; }
    .hero-card {
      position: absolute;
      top: 8%;
      bottom: 16%;
      width: 62%;
      border-radius: 26px;
      opacity: 0;
      filter: blur(.4px);
      will-change: transform, opacity;
    }
    .hero-card--l {
      left: 0;
      background: linear-gradient(140deg, rgba(64, 112, 212, .5), rgba(120, 160, 255, .18));
      transform: translateX(0) rotate(0deg) scale(.94);
    }
    .hero-card--r {
      right: 0;
      background: linear-gradient(220deg, rgba(255, 138, 76, .42), rgba(255, 96, 160, .2));
      transform: translateX(0) rotate(0deg) scale(.94);
    }
    /* Wysuniecie odpalane po wejsciu sekcji w kadr (klasa .is-live z JS) */
    .app-stage.is-live .hero-card--l {
      opacity: 1;
      transform: translateX(-26%) rotate(-4deg) scale(1);
      transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) .15s, opacity .9s ease .15s;
    }
    .app-stage.is-live .hero-card--r {
      opacity: 1;
      transform: translateX(26%) rotate(4deg) scale(1);
      transition: transform 1.15s cubic-bezier(.22, 1, .36, 1) .25s, opacity .9s ease .25s;
    }
    @media (prefers-reduced-motion: reduce) {
      .app-stage.is-live .hero-card--l { transform: translateX(-26%) rotate(-4deg); transition: none; }
      .app-stage.is-live .hero-card--r { transform: translateX(26%) rotate(4deg); transition: none; }
    }
    @media (max-width: 700px) {
      .hero-cards { display: none; } /* na telefonie plyty zabralyby caly kadr */
    }

    /* Logotypy czarno-biale: grayscale zachowuje ksztalty (brightness(0) gubil
       kontury logo z wypelnionym tlem - Neonet wychodzil czarnym prostokatem).
       Kontrast dociaga szarosci do czerni, kolor wraca na hover. */
    .client-logo {
      filter: grayscale(1) contrast(1.9) brightness(.55);
      opacity: .9;
      transition: filter .25s ease, opacity .25s ease;
    }
    .client-logo:hover { filter: none; opacity: 1; }
    .hero .client-logo { height: clamp(20px, 2.2vw, 26px); width: auto; }
    /* Neonet (napis na wypelnieniu) i Huta Zabrze (sygnet) mialy w skali szarosci
       szary zamiast bialego srodka - invert po grayscale daje czysta biel wewnatrz. */
    /* Neonet (bialy napis na czerwonym) i Huta Zabrze (pomaranczowe wnetrze sygnetu):
       samo brightness przyciemnialo TEZ jasne elementy. contrast rozciaga tonalnie -
       wypelnienia wychodza biale, kontury czarne. */
    .client-logo--neonet, .client-logo--huta { filter: grayscale(1) contrast(5); }

    /* Pigulki pod animacja jak dymki w sekcji Funkcje: szare, bez obrysu */
    .hero .pill-tabs { gap: 16px; row-gap: 14px; margin-top: 96px; padding-bottom: 0; margin-bottom: 0; } /* plyty dekoracyjne wystaja pod kadr */
    .hero .pill {
      min-height: 40px;
      padding: 0 18px;
      border: 0 !important;
      border-radius: 999px;
      background: #f5f5f7;
      color: var(--ink);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0;
    }
    .hero .pill:hover { background: #e8e8ed; }
    .hero .pill[aria-selected="true"] { background: var(--ink); color: #fff; }
    .hero-description strong { font-weight: 700; color: var(--ink); }
    .hero-sub-acc { color: inherit; } /* wlasciciel: jednak czarne, jak reszta */
    .avatar { background: #eef1f5; color: var(--ink); }
    .compare-good { background: var(--teal-tint); }
    .dark-section .section-subtitle { color: rgba(255, 255, 255, .72); }

    /* ---- Stopka w jezyku Apple ----
       Uklad bez zmian; poprawiona typografia (regular zamiast 650-800), skala
       (10-11px -> 13-14px), spokojne szarosci #86868b i wloskowate linie. */
    .shell-footer .footer-cta h2 { font-size: clamp(38px, 4.2vw, 56px); font-weight: 700; letter-spacing: -.02em; }
    .shell-footer .footer-cta p { color: #a1a1a6; font-size: 17px; font-weight: 400; line-height: 1.5; }
    .shell-footer .footer-cta-actions { gap: 18px; margin-top: 34px; }
    .shell-footer .footer-proof { margin-top: 18px; color: #86868b; font-size: 13px; font-weight: 400; letter-spacing: 0; }
    .shell-footer .footer-eyebrow, .shell-footer .footer-cta .eyebrow {
      color: #86868b;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .06em;
    }
    .footer-brand-copy { max-width: 320px; margin: 20px 0; color: #86868b; font-size: 13px; font-weight: 400; line-height: 1.55; }
    .footer-column h3 { margin: 2px 0 16px; color: #86868b; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
    .footer-column nav { gap: 11px; }
    .footer-column a, .footer-column nav > span { color: #d2d2d7; font-size: 13px; font-weight: 400; letter-spacing: -.01em; }
    .footer-column a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    .footer-legal a { color: #86868b; font-size: 12px; font-weight: 400; }
    .footer-legal a:hover { color: #d2d2d7; }
    .shell-footer .footer-bottom, .shell-footer .footer-meta { color: #86868b; font-size: 12px; font-weight: 400; }
    .site-footer.shell-footer .footer-brand-block .shell-language-button {
      border: 0;
      border-radius: 980px;
      background: rgba(255, 255, 255, .1);
      color: #d2d2d7;
      font-size: 13px;
      font-weight: 400;
    }
    .site-footer.shell-footer .footer-brand-block .shell-language-button:hover { background: rgba(255, 255, 255, .16); }
    /* Przyciski stopki: te same pigulki co w hero */
    .shell-footer .footer-cta-actions .button { border-radius: 980px; }
    .shell-footer .button-footer-outline { border: 1px solid rgba(255, 255, 255, .35); }
    .shell-footer .button-footer-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

    /* Postac w sekcji Demo: wyszparowana, przy lewej stronie, "stoi" na dolnej
       krawedzi sekcji (delikatnie na nia nachodzi - jak support na stronach Apple) */
    /* --demo-shot-cut: o ile dol zdjecia chowa sie za krawedzia sekcji.
       Ta sama wartosc pozycjonuje znacznik AI, zeby siedzial tuz nad
       widoczna krawedzia kadru, a nie w polowie wysokosci. */
    .demo-person { --demo-shot-cut: 150px; display: flex; justify-content: flex-start; margin: 44px 0 0; }
    /* align-self: start - w kontenerze flex opakowanie rozciagaloby sie na cala
       wysokosc kolumny, a wtedy `bottom` znacznika liczyloby sie od dna kolumny,
       nie od dna kadru. */
    /* Ujemny margines siedzi na OPAKOWANIU, nie na <img> - dzieki temu pudelko
       opakowania ma pelna wysokosc kadru i `bottom` znacznika liczy sie od dolu
       zdjecia, a nie od linii ciecia sekcji. */
    .demo-shot {
      position: relative;
      display: block;
      align-self: flex-start;
      width: min(470px, 94%);
      margin-bottom: calc(-1 * var(--demo-shot-cut));
    }
    .demo-person img {
      display: block;
      width: 100%;
      height: auto;
      /* Kadr zdjecia konczy sie w polowie nog - schowanie dolu za krawedzia sekcji
         (margines na .demo-shot) + delikatny fade sprawiaja, ze uciecie nie jest
         widoczne.
         Bez drop-shadow: zdjecie nie jest juz wyszparowane, tylko ma wlasne tlo
         dopasowane do koloru sekcji - cien rysowalby sie wokol PROSTOKATA kadru
         i robil z niego widoczna ramke. */
      -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
      mask-image: linear-gradient(to bottom, #000 78%, transparent 97%);
    }
    @media (max-width: 1023px) {
      .demo-person { --demo-shot-cut: 40px; justify-content: center; margin-top: 30px; }
      .demo-shot { width: min(400px, 88%); }
    }

    /* CTA formularza: pelna szerokosc karty (decyzja wlasciciela), ale w tej
       samej typografii i zaokragleniu co pozostale przyciski */
    .demo-form .demo-submit {
      display: flex;
      width: 100%;
      min-height: 54px;
      padding: 12px 30px;
      border-radius: 980px;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -.01em;
      text-transform: none;
      box-shadow: none;
    }

    /* Pola formularza rownej wysokosci mimo komunikatu bledu: kazde pole ma
       zarezerwowane miejsce na komunikat, ktory jest pozycjonowany absolutnie -
       bez tego blad rozpychal wiersz i sasiednie pole "podskakiwalo". */
    .demo-form .field { position: relative; padding-bottom: 18px; }
    .demo-form .field .field-error { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }

    /* Zgody bez linii oddzielajacej od pol formularza (decyzja wlasciciela) */
    .demo-form .consents { border-top: 0; padding-top: 0; margin-top: 26px; }

    /* Naglowek formularza demo: telefon nad polami */
    .demo-form-call {
      margin: 0 0 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      font-size: clamp(17px, 1.5vw, 20px);
      font-weight: 600;
      text-align: left;
    }
    .demo-form-call a { color: var(--teal-deep); white-space: nowrap; }
    .demo-form-call a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .demo-form-call strong { font-weight: 800; }

    /* Tabela porownania: kompaktowa, z ikonami wierszy i czytelnym checkiem
       (bialy znak na pelnym tealu zamiast teal-na-tealu) */
    .compare-table { margin-top: 44px; }
    .compare-cell { min-height: 48px; padding: 9px 18px; font-size: 13.5px; }
    .compare-row:first-child .compare-cell { min-height: 58px; font-size: 16px; }
    .compare-label { gap: 10px; font-size: 13.5px; }
    .compare-ico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--teal-tint); }
    .compare-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--teal-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .compare-good { gap: 10px; }
    .compare-good > svg {
      flex: 0 0 auto;
      box-sizing: border-box;
      width: 20px;
      height: 20px;
      padding: 4px;
      border-radius: 50%;
      background: var(--teal);
      stroke: #fff;
      stroke-width: 3.6;
    }
    /* ---- Referencje w jezyku Apple ----
       Karta: logo klienta (w oryginalnych barwach) -> duzy cytat -> autor.
       Bez obrysow, bez cudzyslowow-ozdobnikow, duzo powietrza. */
    .references { background: var(--soft); }
    .references .center { text-align: left; }
    .references .section-heading, .references .section-subtitle { text-align: left; }
    .testimonial-grid { gap: 20px; margin-top: 44px; }
    .testimonial {
      display: flex;
      flex-direction: column;
      overflow: visible;
      padding: 34px 34px 30px;
      border: 0;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 2px 14px rgba(14, 25, 43, .07);
    }
    .testimonial-logo { align-self: flex-start; height: 30px; width: auto; margin-bottom: 22px; }
    .testimonial blockquote {
      flex: 1;
      margin: 0 0 26px;
      padding: 0;
      color: var(--ink);
      font-size: clamp(17px, 1.6vw, 21px);
      font-weight: 500;
      font-style: normal;
      letter-spacing: -.015em;
      line-height: 1.45;
    }
    .testimonial blockquote::before { content: "\201E"; }
    .testimonial blockquote::after { content: "\201D"; }
    .testimonial-stars { display: block; margin: 0 0 10px; color: #f5a623; font-size: 16px; letter-spacing: 2px; line-height: 1; }
    .testimonial-by {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid rgba(0, 0, 0, .08);
    }
    .testimonial-by .avatar { width: 40px; height: 40px; flex: 0 0 auto; background: #f5f5f7; }
    .testimonial-name { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
    .testimonial-role { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }

    /* ---- Tabela porownania w jezyku Apple ----
       Bez kolorowych apli: biale tlo, wloskowate linie, jasny naglowek,
       delikatny niebieski tint w kolumnie TM, hover w tonie akcentu. */
    .compare-table { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 14px rgba(14, 25, 43, .07); }
    .compare-row, .compare-row + .compare-row { border-top-color: rgba(0, 0, 0, .08); }
    .compare-cell, .compare-cell + .compare-cell { border-left-color: rgba(0, 0, 0, .08); }
    .compare-row:first-child .compare-cell,
    .compare-row:first-child .compare-cell:first-child { background: #fafafc; color: var(--muted); font-size: 15px; font-weight: 500; }
    /* Naglowek kolumny TM: bez zielonej apli i bez checka - samo logo na bieli */
    .compare-row:first-child .compare-good { background: #fff; gap: 0; }
    .compare-row:first-child .compare-good > svg { display: none; }
    .compare-brand img { width: 150px; }
    .compare-label { background: #fff; color: var(--ink); font-weight: 600; }
    .compare-cell { color: var(--muted); }
    /* Kolumna TM: bardzo delikatny tint zamiast intensywnego wypelnienia */
    .compare-good { background: rgba(64, 112, 212, .045); color: var(--ink); font-weight: 500; }
    .compare-good > svg { background: var(--teal); stroke: #fff; }
    .compare-ico { background: rgba(0, 0, 0, .05); }
    .compare-ico svg { stroke: #6e6e73; }
    /* Hover: caly wiersz podswietlany w tonie akcentu (byl zielony z bazowego CSS) */
    .compare-row:not(:first-child):hover { box-shadow: none; }
    .compare-row:not(:first-child):hover .compare-label,
    .compare-row:not(:first-child):hover .compare-cell:not(.compare-label):not(.compare-good) { background: #f5f7fb; color: var(--ink); }
    .compare-row:not(:first-child):hover .compare-good { background: rgba(64, 112, 212, .1); color: var(--ink); }
    .compare-row:not(:first-child):hover .compare-good > svg { background: var(--teal); stroke: #fff; }
    .compare-row:not(:first-child):hover .compare-ico { background: rgba(64, 112, 212, .12); }
    .compare-row:not(:first-child):hover .compare-ico svg { stroke: var(--teal-deep); }

    /* ---- Kalkulator w jezyku Apple ----
       Jedna biala karta (max 1080px), wewnatrz dwie kolumny rozdzielone
       wloskowata linia; wynik = wielka czarna liczba; suwaki jak w iOS:
       wypelniona szyna + czysty okragly uchwyt (bez szewronow). ---- */
    .savings { background: var(--soft); }
    .savings-subtitle { color: var(--muted); font-size: clamp(18px, 1.8vw, 21px); font-weight: 400; letter-spacing: 0; }
    .savings-card { width: min(1080px, 100%); margin-inline: auto; border-radius: 28px; }
    .savings-kicker { display: none; } /* male capsy nad naglowkiem to nie jezyk Apple */
    .savings-lead-title { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
    .savings-lead { font-size: 14px; }
    .savings-panel--result {
      background: #fafafc;
      color: var(--ink);
      border-left: 1px solid var(--line);
    }
    .savings-result-label { color: var(--muted); font-size: 17px; font-weight: 400; letter-spacing: 0; }
    .savings-result-label--contact { color: var(--ink); font-weight: 600; }
    .savings-amount { color: var(--ink); font-size: clamp(52px, 5.4vw, 76px); font-weight: 700; letter-spacing: -.025em; }
    /* Zestawienie kosztow: dwa wiersze z kwota i paskiem proporcji.
       Task Manager u gory (mala kwota), abonament pod nim (duza) - kolejnosc
       pilnuje, zeby wielka liczba nie byla brana za cene programu. */
    /* Hierarchia: to, co PLACISZ (mala kwota TM), jest duze i wyrozniona;
       koszt abonamentu - maly, wyszarzony i przekreslony jako "odrzucony". */
    .savings-compare { display: grid; gap: 18px; margin: 4px 0 auto; }
    .sv-item-label { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
    .sv-item-label span { display: block; font-size: 12.5px; font-weight: 400; color: #a1a1a6; }
    .sv-item-price { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
    .sv-item-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
    /* Abonament: przekreslony, wyszarzony - czytelny sygnal "tego nie placisz" */
    .sv-item--sub { position: relative; padding-left: 16px; }
    .sv-item--sub::before {
      content: "";
      position: absolute;
      left: 0; top: 4px; bottom: 4px;
      width: 3px;
      border-radius: 3px;
      background: #d2d2d7;
    }
    .sv-item--sub .sv-item-price {
      color: #a1a1a6;
      font-size: clamp(24px, 2.3vw, 30px);
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(161, 161, 166, .8);
    }
    /* Task Manager: najwieksza liczba na panelu, akcent marki */
    .sv-item--tm { position: relative; padding-left: 16px; }
    .sv-item--tm::before {
      content: "";
      position: absolute;
      left: 0; top: 4px; bottom: 4px;
      width: 3px;
      border-radius: 3px;
      background: var(--teal);
    }
    .sv-item--tm .sv-item-label { color: var(--teal-deep); font-weight: 600; font-size: 15px; }
    .sv-item--tm .sv-item-price { color: var(--ink); font-size: clamp(46px, 5vw, 68px); }
    /* Panel Enterprise: ten sam rytm co zestawienie, ale bez kwoty licencji */
    .sv-ent { margin: 4px 0 auto; }
    .sv-ent-label { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
    .sv-ent-label span { display: block; font-size: 12.5px; font-weight: 400; color: #a1a1a6; }
    .sv-ent-sub {
      margin: 0 0 22px;
      padding-left: 16px;
      border-left: 3px solid #d2d2d7;
      color: #a1a1a6;
      font-size: clamp(24px, 2.3vw, 30px);
      font-weight: 700;
      letter-spacing: -.02em;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(161, 161, 166, .8);
    }
    .sv-ent-name {
      margin: 0;
      padding-left: 16px;
      border-left: 3px solid var(--teal);
      color: var(--ink);
      font-size: clamp(30px, 3vw, 40px);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.1;
    }
    .sv-ent-note { margin: 10px 0 0; padding-left: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

    /* Dyskretny segment Standard / Pro - przelicza kwote licencji */
    .sv-plan { display: inline-flex; gap: 2px; margin-top: 12px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .05); }
    .sv-plan-btn {
      min-height: 26px;
      padding: 0 13px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: -.01em;
      transition: background .18s ease, color .18s ease;
    }
    .sv-plan-btn[aria-checked="true"] { background: #fff; color: var(--teal-deep); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
    .savings-save {
      margin: 22px 0 0;
      padding-top: 16px;
      border-top: 1px solid rgba(0, 0, 0, .08);
      color: var(--muted);
      font-size: 15px;
    }
    .savings-save strong { color: var(--ink); font-weight: 600; }
    .savings-save [data-sv-discount] { margin-left: 6px; color: var(--teal-deep); font-weight: 600; }
    .savings-amount { display: none; } /* stara pojedyncza kwota zastapiona zestawieniem */

    /* Dawna wlepa: spokojna linia "-97% | metka" */
    .savings-sticker {
      gap: 14px;
      margin: 12px 0 auto;
      padding: 0;
      border: 0;
      overflow: visible; /* bazowa wlepa miala overflow: hidden i przycinala metke */
      background: none;
      box-shadow: none;
      color: var(--ink);
      transform: none;
      animation: none;
    }
    .savings-sticker::before, .savings-sticker::after { display: none; }
    .savings-sticker-pct { color: var(--teal-deep); font-size: 22px; font-weight: 600; text-shadow: none; }
    .savings-sticker-deal svg { stroke: var(--teal-deep); filter: none; }
    .savings-sticker-text { padding-left: 14px; border-left: 1px solid var(--line); }
    .savings-sticker-text strong { color: var(--ink); font-size: 14px; font-weight: 600; }
    .savings-sticker-text small { color: var(--muted); font-weight: 400; }
    .savings-sticker-text small b { color: var(--ink); font-weight: 600; }
    /* Suwak iOS: szyna 4px z tealowym wypelnieniem do uchwytu, uchwyt = bialy krazek */
    .tm-range { height: 34px; }
    .tm-range-track {
      height: 4px;
      background: linear-gradient(90deg, var(--teal) var(--sv-fill, 0%), #d2d2d7 var(--sv-fill, 0%));
    }
    .tm-range-thumb {
      height: 26px;
      width: 26px;
      padding: 0;
      justify-content: center;
      background: #fff;
      border: 0;
      box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 2px 7px rgba(0, 0, 0, .22);
    }
    .tm-range:hover .tm-range-thumb { background: #fff; }
    .tm-range-arrow { display: none; } /* szewrony w uchwycie to nie jezyk Apple */
    .tm-range:focus-visible .tm-range-thumb { box-shadow: 0 0 0 4px rgba(64, 112, 212, .3); }
    .savings-field-head > span { color: var(--muted); font-size: 14px; font-weight: 400; }
    .savings-field-head > strong { font-size: 17px; font-weight: 600; }
    .savings-field--onteal .savings-field-head > span { color: var(--muted); }
    .savings-field--onteal .savings-field-head > strong { color: var(--ink); }
    .tm-range--light .tm-range-track { background: linear-gradient(90deg, var(--teal) var(--sv-fill, 0%), #d2d2d7 var(--sv-fill, 0%)); } /* bazowy wariant "na tealu" mial polprzezroczysta szyne */
    .tm-range--light .tm-range-thumb { background: #fff; color: var(--ink); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 2px 7px rgba(0, 0, 0, .22); }
    .tm-range--light:hover .tm-range-thumb { background: #fff; }
    .tm-range--light:focus-visible .tm-range-thumb { box-shadow: 0 0 0 4px rgba(64, 112, 212, .3); }
    .savings-milestone { color: #a1a1a6; font-weight: 500; }
    .savings-milestone.is-active { color: var(--teal-deep); }
    /* CTA: mala pigulka Apple */
    .savings-panel--result .savings-demo {
      width: auto;
      align-self: flex-start;
      padding: 11px 22px;
      border-radius: 980px;
      background: var(--teal);
      color: #fff !important; /* site-shell.css i tak wymusza bialy - tu jest wlasciwy */
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -.01em;
      box-shadow: none;
    }
    .savings-panel--result .savings-demo:hover { background: var(--teal-deep); }
    .savings-disclaimer { color: #a1a1a6; }
    /* Kompaktowy kalkulator (-30% wysokosci): mniejsze pady paneli, ciasniejsze
       odstepy pol i mniejsza kwota - bez zmiany funkcji */
    .savings { padding: 76px 0; }
    .savings .center { margin-bottom: 34px; }
    .savings-panel { padding: 30px 36px; }
    /* Lewa kolumna: naglowek u gory, suwaki wysrodkowane w pozostalej przestrzeni -
       wczesniej zostawala duza pusta przerwa pod ostatnim suwakiem. */
    /* Dwa marginesy "auto" dziela wolna przestrzen po rowno: naglowek zostaje
       u gory, a grupa suwakow ladnie sredniuje w reszcie kolumny. */
    .savings-panel--input { display: flex; flex-direction: column; }
    /* Gorny odstep byl drugim marginesem "auto", wiec dzielil wolna przestrzen
       po rowno z dolnym i luka nad suwakami rosla razem z wysokoscia karty.
       Teraz gora ma staly odstep, a cala nadwyzka schodzi pod ostatnie pole -
       grupa suwakow siedzi wyzej. */
    .savings-panel--input .savings-lead { margin-bottom: 0; padding-bottom: 72px; }
    .savings-panel--input .savings-field:last-of-type { margin-bottom: auto; }
    .savings-lead { margin-bottom: 22px; }
    .savings-field + .savings-field { margin-top: 44px; }
    .savings-field-head { margin-bottom: 10px; }
    .savings-amount { margin: 8px 0 4px; }
    .savings-sticker { margin: 12px 0 auto; padding: 0; }
    .savings-field--onteal { margin-top: 20px; }
    .savings-demo { margin-top: 16px; }
    .savings-disclaimer { margin-top: 12px; }


    /* ---- Gdzie TM daje najwieksza wartosc: uklad "New and noteworthy" ----
       Naglowek po lewej, przelacznik pigulkowy, karty ze zdjeciem w zaokraglonym
       kadrze; pod zdjeciem akapit "Tytul. opis" (bold + szary inline),
       na dole okragle strzalki po prawej. ---- */
    .value { padding: 104px 0 96px; }
    .val-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .value .section-heading { text-align: left; }
    .val-switch {
      display: inline-flex;
      gap: 4px;
      padding: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .1);
    }
    .val-switch-btn {
      min-height: 34px;
      padding: 0 20px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(255, 255, 255, .8);
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      transition: background .2s ease, color .2s ease;
    }
    .val-switch-btn[aria-selected="true"] { background: #fff; color: var(--ink); }
    .val-slider { position: relative; margin-top: 40px; }
    .val-rail {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: clamp(320px, 34vw, 460px);
      gap: 20px;
      overflow-x: auto;
      padding: 2px;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }
    .val-rail::-webkit-scrollbar { display: none; }
    .val-rail[hidden] { display: none; }
    .val-card { scroll-snap-align: start; }
    .val-photo {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      aspect-ratio: 4 / 3;
      background: rgba(255, 255, 255, .06);
    }
    .val-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Akapit pod zdjeciem: tytul boldem, opis szary - jak podpisy kart Apple */
    .val-copy {
      margin: 18px 0 0;
      color: rgba(255, 255, 255, .62);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.47;
      letter-spacing: -.01em;
    }
    .val-title { color: #fff; font-weight: 600; }
    .val-title::after { content: "."; }
    /* Link tekstowy z szewronem - wzorzec "Learn about Mac for work >" */
    .val-link {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-top: 10px;
      color: #6aa4ff;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -.01em;
    }
    .val-link span { font-size: 20px; line-height: 1; translate: 0 -1px; }
    .val-link:hover { text-decoration: underline; }
    .val-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 34px; }
    .val-nav { display: flex; gap: 10px; }
    .val-nav .round-button { width: 40px; height: 40px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; }
    .val-nav .round-button:hover { background: rgba(255, 255, 255, .26); transform: none; }
    .val-nav .round-button:disabled { opacity: .35; pointer-events: none; }
    .val-progress { display: none; } /* w ukladzie Apple wystarczaja same strzalki */
    @media (max-width: 700px) {
      .value { padding: 88px 0 80px; }
      .val-rail { grid-auto-columns: min(86vw, 340px); }
      .val-head { align-items: flex-start; }
    }

    /* ---- Cennik w jezyku Apple ----
       Karty bez obrysow na jasnoszarym pasie, jeden akcent na wyroznionej,
       obie listy funkcji wypunktowane tak samo; w Standard moduly Pro
       przekreslone i wygaszone, w Pro odhaczone. ---- */
    .pricing { background: var(--soft); }
    .pricing .section-subtitle strong { font-weight: 600; }
    /* Wybor wariantu: segmentowany przelacznik jak w macOS */
    .plan-picker {
      display: flex;
      gap: 4px;
      width: max-content;
      max-width: 100%;
      margin: 34px auto 0;
      padding: 4px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .05);
    }
    .plan-card {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: clamp(200px, 22vw, 260px);
      padding: 12px 26px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      cursor: pointer;
      text-align: center;
      transition: background .2s ease, box-shadow .2s ease;
    }
    .plan-card:hover { background: rgba(0, 0, 0, .04); }
    .plan-card[aria-selected="true"] {
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04);
    }
    .plan-card[aria-selected="true"]::after { content: none; }
    .plan-card-name { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
    .plan-card-tag { color: var(--muted); font-size: 13px; font-weight: 400; }
    .plan-card[aria-selected="true"] .plan-card-name { color: var(--teal-deep); }

    /* Siatka kart */
    [data-price-grid] { margin-top: 46px; gap: 18px; }
    .price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .price-card {
      display: flex;
      flex-direction: column;
      padding: 30px 26px 26px;
      border: 0 !important;
      border-radius: 20px;
      background: #fff;
      box-shadow: 0 2px 14px rgba(14, 25, 43, .07);
      text-align: left;
    }
    .price-card.featured { outline: 0; box-shadow: inset 0 0 0 2px var(--teal), 0 2px 14px rgba(14, 25, 43, .07); }
    /* Bazowy CSS "skleja" karty w jeden blok (zerowe promienie po bokach) -
       w ukladzie kafelkowym kazda karta ma miec komplet zaokraglen */
    .price-card, .price-card:first-child, .price-card:last-child,
    .price-grid > .price-card { border-radius: 20px !important; }
    /* Wstazka jest tylko na wyroznionej karcie - rezerwujemy jej wysokosc
       we wszystkich, zeby naglowki lezaly w jednej linii */
    .price-card::before { content: ""; display: block; height: 25px; margin-bottom: 12px; }
    .price-card.featured::before { display: none; }
    .price-ribbon {
      position: static;
      display: inline-block;
      width: max-content;
      margin: 0 0 12px;
      padding: 4px 12px;
      border-radius: 999px;
      background: var(--teal-tint);
      color: var(--teal-deep);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
    }
    .price-name { margin-bottom: 2px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
    .price-team { color: var(--muted); font-size: 13px; }
    .price { display: block; min-height: 0; margin: 20px 0 2px; font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -.02em; }
    .price small { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 400; }
    .price-amount--sm { font-size: 26px; }
    .price-per { margin: 0 0 18px; color: var(--muted); font-size: 13px; font-weight: 400; }

    /* Obie listy wypunktowane identycznie - roznice widac po znaczkach, nie po formie */
    .price-includes { margin: 0 0 4px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, .08); text-align: left; }
    .inc-title {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .inc-title--pro { margin-top: 20px; }
    /* Etykiety "tylko w Pro" / "w cenie" usuniete (decyzja wlasciciela) -
       o zawartosci wariantu mowi juz przekreslenie pozycji i przelacznik. */
    .inc-state { display: none; }
    /* Enterprise jest wariantem Pro - w widoku Standard wygaszamy go, zeby nie
       konkurowal wzrokowo z pakietami, ktore w tym wariancie faktycznie kupisz. */
    [data-price-enterprise] { transition: opacity .25s ease; }
    [data-price-grid]:not(.is-pro) [data-price-enterprise] { opacity: .5; }
    [data-price-grid]:not(.is-pro) [data-price-enterprise]:hover,
    [data-price-grid]:not(.is-pro) [data-price-enterprise]:focus-within { opacity: .78; }
    [data-price-grid].is-pro .inc-title--pro { color: var(--teal-deep); }
    .inc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
    .inc-list li {
      position: relative;
      padding-left: 26px;
      color: #3a3a3c;
      font-size: 13.5px;
      line-height: 1.45;
    }
    .inc-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .05em;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background: var(--teal) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"><path d="m5 13 4 4L19 7"/></svg>') center / 10px no-repeat;
    }
    /* Stan Standard: moduly Pro przekreslone i wygaszone */
    [data-price-grid]:not(.is-pro) .inc-list--pro li { color: #a1a1a6; text-decoration: line-through; text-decoration-color: rgba(160, 160, 166, .7); }
    [data-price-grid]:not(.is-pro) .inc-list--pro li::before {
      background: #e8e8ed url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238e8e93" stroke-width="3.2" stroke-linecap="round"><path d="M7 7l10 10M17 7 7 17"/></svg>') center / 9px no-repeat;
    }

    .price-meta { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .08); color: var(--muted); font-size: 13px; }
    .price-meta p { margin: 0 0 6px; }
    .price-card .button { width: 100%; margin: 20px 0 0; }
    .price-card .button-outline { border-color: rgba(0, 0, 0, .15); }
    .cta-assurance { margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 400; text-align: center; }
    .price-services { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .08); color: var(--muted); font-size: 12.5px; }
    .price-services strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
    .price-services p { margin: 0 0 6px; }
    .price-footnote { max-width: 900px; margin-inline: auto; color: #a1a1a6; font-size: 12px; line-height: 1.5; }
    @media (max-width: 1080px) {
      .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .price-card, .price-card.featured { margin-top: 0; }
    }
    @media (max-width: 640px) {
      .price-grid { grid-template-columns: 1fr; }
      /* Na telefonie segment zamienia sie w dwa kafle jeden pod drugim -
         pigulkowe zaokraglenie musi zejsc, inaczej rogi zachodza na siebie */
      .plan-picker { flex-direction: column; width: 100%; border-radius: 18px; }
      .plan-card { min-width: 0; border-radius: 14px; }
      .pricing .trust-row { gap: 22px; }
    }

    /* CTA formularza: pelna szerokosc karty (decyzja wlasciciela), ale w tej
       samej typografii i zaokragleniu co pozostale przyciski */
    .demo-form .demo-submit {
      display: flex;
      width: 100%;
      min-height: 54px;
      padding: 12px 30px;
      border-radius: 980px;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -.01em;
      text-transform: none;
      box-shadow: none;
    }

    /* Pola formularza rownej wysokosci mimo komunikatu bledu: kazde pole ma
       zarezerwowane miejsce na komunikat, ktory jest pozycjonowany absolutnie -
       bez tego blad rozpychal wiersz i sasiednie pole "podskakiwalo". */
    .demo-form .field { position: relative; padding-bottom: 18px; }
    .demo-form .field .field-error { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }

    /* Zgody bez linii oddzielajacej od pol formularza (decyzja wlasciciela) */
    .demo-form .consents { border-top: 0; padding-top: 0; margin-top: 26px; }

    /* Naglowek formularza demo: telefon nad polami */
    .demo-form-call {
      margin: 0 0 20px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      font-size: clamp(17px, 1.5vw, 20px);
      font-weight: 600;
      text-align: left;
    }
    .demo-form-call a { color: var(--teal-deep); white-space: nowrap; }
    .demo-form-call a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .demo-form-call strong { font-weight: 800; }

    /* Tabela porownania: kompaktowa, z ikonami wierszy i czytelnym checkiem
       (bialy znak na pelnym tealu zamiast teal-na-tealu) */
    .compare-table { margin-top: 44px; }
    .compare-cell { min-height: 48px; padding: 9px 18px; font-size: 13.5px; }
    .compare-row:first-child .compare-cell { min-height: 58px; font-size: 16px; }
    .compare-label { gap: 10px; font-size: 13.5px; }
    .compare-ico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--teal-tint); }
    .compare-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--teal-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .compare-good { gap: 10px; }
    .compare-good > svg {
      flex: 0 0 auto;
      box-sizing: border-box;
      width: 20px;
      height: 20px;
      padding: 4px;
      border-radius: 50%;
      background: var(--teal);
      stroke: #fff;
      stroke-width: 3.6;
    }
    /* ---- Referencje w jezyku Apple ("Why Apple is the best place...") ----
       Biale karty na jasnoszarym pasie: eyebrow, duzy cytat, na dole autor.
       Bez obrysow i ciezkich cieni. */

    /* ---- Tabela porownania w jezyku Apple ----
       Bez kolorowych apli: biale tlo, wloskowate linie, jasny naglowek,
       delikatny niebieski tint w kolumnie TM, hover w tonie akcentu. */
    .compare-table { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 14px rgba(14, 25, 43, .07); }
    .compare-row, .compare-row + .compare-row { border-top-color: rgba(0, 0, 0, .08); }
    .compare-cell, .compare-cell + .compare-cell { border-left-color: rgba(0, 0, 0, .08); }
    .compare-row:first-child .compare-cell,
    .compare-row:first-child .compare-cell:first-child { background: #fafafc; color: var(--muted); font-size: 15px; font-weight: 500; }
    /* Naglowek kolumny TM: bez zielonej apli i bez checka - samo logo na bieli */
    .compare-row:first-child .compare-good { background: #fff; gap: 0; }
    .compare-row:first-child .compare-good > svg { display: none; }
    .compare-brand img { width: 150px; }
    .compare-label { background: #fff; color: var(--ink); font-weight: 600; }
    .compare-cell { color: var(--muted); }
    /* Kolumna TM: bardzo delikatny tint zamiast intensywnego wypelnienia */
    .compare-good { background: rgba(64, 112, 212, .045); color: var(--ink); font-weight: 500; }
    .compare-good > svg { background: var(--teal); stroke: #fff; }
    .compare-ico { background: rgba(0, 0, 0, .05); }
    .compare-ico svg { stroke: #6e6e73; }
    /* Hover: caly wiersz podswietlany w tonie akcentu (byl zielony z bazowego CSS) */
    .compare-row:not(:first-child):hover { box-shadow: none; }
    .compare-row:not(:first-child):hover .compare-label,
    .compare-row:not(:first-child):hover .compare-cell:not(.compare-label):not(.compare-good) { background: #f5f7fb; color: var(--ink); }
    .compare-row:not(:first-child):hover .compare-good { background: rgba(64, 112, 212, .1); color: var(--ink); }
    .compare-row:not(:first-child):hover .compare-good > svg { background: var(--teal); stroke: #fff; }
    .compare-row:not(:first-child):hover .compare-ico { background: rgba(64, 112, 212, .12); }
    .compare-row:not(:first-child):hover .compare-ico svg { stroke: var(--teal-deep); }

    /* ---- Kalkulator w jezyku Apple ----
       Jedna biala karta (max 1080px), wewnatrz dwie kolumny rozdzielone
       wloskowata linia; wynik = wielka czarna liczba; suwaki jak w iOS:
       wypelniona szyna + czysty okragly uchwyt (bez szewronow). ---- */
    .savings { background: var(--soft); }
    .savings-subtitle { color: var(--muted); font-size: clamp(18px, 1.8vw, 21px); font-weight: 400; letter-spacing: 0; }
    .savings-card { width: min(1080px, 100%); margin-inline: auto; border-radius: 28px; }
    .savings-kicker { display: none; } /* male capsy nad naglowkiem to nie jezyk Apple */
    .savings-lead-title { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
    .savings-lead { font-size: 14px; }
    .savings-panel--result {
      background: #fafafc;
      color: var(--ink);
      border-left: 1px solid var(--line);
    }
    .savings-result-label { color: var(--muted); font-size: 17px; font-weight: 400; letter-spacing: 0; }
    .savings-result-label--contact { color: var(--ink); font-weight: 600; }
    .savings-amount { color: var(--ink); font-size: clamp(52px, 5.4vw, 76px); font-weight: 700; letter-spacing: -.025em; }
    /* Zestawienie kosztow: dwa wiersze z kwota i paskiem proporcji.
       Task Manager u gory (mala kwota), abonament pod nim (duza) - kolejnosc
       pilnuje, zeby wielka liczba nie byla brana za cene programu. */
    /* Hierarchia: to, co PLACISZ (mala kwota TM), jest duze i wyrozniona;
       koszt abonamentu - maly, wyszarzony i przekreslony jako "odrzucony". */
    .savings-compare { display: grid; gap: 18px; margin: 4px 0 auto; }
    .sv-item-label { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
    .sv-item-label span { display: block; font-size: 12.5px; font-weight: 400; color: #a1a1a6; }
    .sv-item-price { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
    .sv-item-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
    /* Abonament: przekreslony, wyszarzony - czytelny sygnal "tego nie placisz" */
    .sv-item--sub { position: relative; padding-left: 16px; }
    .sv-item--sub::before {
      content: "";
      position: absolute;
      left: 0; top: 4px; bottom: 4px;
      width: 3px;
      border-radius: 3px;
      background: #d2d2d7;
    }
    .sv-item--sub .sv-item-price {
      color: #a1a1a6;
      font-size: clamp(24px, 2.3vw, 30px);
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(161, 161, 166, .8);
    }
    /* Task Manager: najwieksza liczba na panelu, akcent marki */
    .sv-item--tm { position: relative; padding-left: 16px; }
    .sv-item--tm::before {
      content: "";
      position: absolute;
      left: 0; top: 4px; bottom: 4px;
      width: 3px;
      border-radius: 3px;
      background: var(--teal);
    }
    .sv-item--tm .sv-item-label { color: var(--teal-deep); font-weight: 600; font-size: 15px; }
    .sv-item--tm .sv-item-price { color: var(--ink); font-size: clamp(46px, 5vw, 68px); }
    /* Panel Enterprise: ten sam rytm co zestawienie, ale bez kwoty licencji */
    .sv-ent { margin: 4px 0 auto; }
    .sv-ent-label { margin: 0 0 4px; color: var(--muted); font-size: 14px; font-weight: 500; }
    .sv-ent-label span { display: block; font-size: 12.5px; font-weight: 400; color: #a1a1a6; }
    .sv-ent-sub {
      margin: 0 0 22px;
      padding-left: 16px;
      border-left: 3px solid #d2d2d7;
      color: #a1a1a6;
      font-size: clamp(24px, 2.3vw, 30px);
      font-weight: 700;
      letter-spacing: -.02em;
      text-decoration: line-through;
      text-decoration-thickness: 2px;
      text-decoration-color: rgba(161, 161, 166, .8);
    }
    .sv-ent-name {
      margin: 0;
      padding-left: 16px;
      border-left: 3px solid var(--teal);
      color: var(--ink);
      font-size: clamp(30px, 3vw, 40px);
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.1;
    }
    .sv-ent-note { margin: 10px 0 0; padding-left: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

    /* Dyskretny segment Standard / Pro - przelicza kwote licencji */
    .sv-plan { display: inline-flex; gap: 2px; margin-top: 12px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .05); }
    .sv-plan-btn {
      min-height: 26px;
      padding: 0 13px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: -.01em;
      transition: background .18s ease, color .18s ease;
    }
    .sv-plan-btn[aria-checked="true"] { background: #fff; color: var(--teal-deep); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
    .savings-save {
      margin: 22px 0 0;
      padding-top: 16px;
      border-top: 1px solid rgba(0, 0, 0, .08);
      color: var(--muted);
      font-size: 15px;
    }
    .savings-save strong { color: var(--ink); font-weight: 600; }
    .savings-save [data-sv-discount] { margin-left: 6px; color: var(--teal-deep); font-weight: 600; }
    .savings-amount { display: none; } /* stara pojedyncza kwota zastapiona zestawieniem */

    /* Dawna wlepa: spokojna linia "-97% | metka" */
    .savings-sticker {
      gap: 14px;
      margin: 12px 0 auto;
      padding: 0;
      border: 0;
      overflow: visible; /* bazowa wlepa miala overflow: hidden i przycinala metke */
      background: none;
      box-shadow: none;
      color: var(--ink);
      transform: none;
      animation: none;
    }
    .savings-sticker::before, .savings-sticker::after { display: none; }
    .savings-sticker-pct { color: var(--teal-deep); font-size: 22px; font-weight: 600; text-shadow: none; }
    .savings-sticker-deal svg { stroke: var(--teal-deep); filter: none; }
    .savings-sticker-text { padding-left: 14px; border-left: 1px solid var(--line); }
    .savings-sticker-text strong { color: var(--ink); font-size: 14px; font-weight: 600; }
    .savings-sticker-text small { color: var(--muted); font-weight: 400; }
    .savings-sticker-text small b { color: var(--ink); font-weight: 600; }
    /* Suwak iOS: szyna 4px z tealowym wypelnieniem do uchwytu, uchwyt = bialy krazek */
    .tm-range { height: 34px; }
    .tm-range-track {
      height: 4px;
      background: linear-gradient(90deg, var(--teal) var(--sv-fill, 0%), #d2d2d7 var(--sv-fill, 0%));
    }
    .tm-range-thumb {
      height: 26px;
      width: 26px;
      padding: 0;
      justify-content: center;
      background: #fff;
      border: 0;
      box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 2px 7px rgba(0, 0, 0, .22);
    }
    .tm-range:hover .tm-range-thumb { background: #fff; }
    .tm-range-arrow { display: none; } /* szewrony w uchwycie to nie jezyk Apple */
    .tm-range:focus-visible .tm-range-thumb { box-shadow: 0 0 0 4px rgba(64, 112, 212, .3); }
    .savings-field-head > span { color: var(--muted); font-size: 14px; font-weight: 400; }
    .savings-field-head > strong { font-size: 17px; font-weight: 600; }
    .savings-field--onteal .savings-field-head > span { color: var(--muted); }
    .savings-field--onteal .savings-field-head > strong { color: var(--ink); }
    .tm-range--light .tm-range-track { background: linear-gradient(90deg, var(--teal) var(--sv-fill, 0%), #d2d2d7 var(--sv-fill, 0%)); } /* bazowy wariant "na tealu" mial polprzezroczysta szyne */
    .tm-range--light .tm-range-thumb { background: #fff; color: var(--ink); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 2px 7px rgba(0, 0, 0, .22); }
    .tm-range--light:hover .tm-range-thumb { background: #fff; }
    .tm-range--light:focus-visible .tm-range-thumb { box-shadow: 0 0 0 4px rgba(64, 112, 212, .3); }
    .savings-milestone { color: #a1a1a6; font-weight: 500; }
    .savings-milestone.is-active { color: var(--teal-deep); }
    /* CTA: mala pigulka Apple */
    .savings-panel--result .savings-demo {
      width: auto;
      align-self: flex-start;
      padding: 11px 22px;
      border-radius: 980px;
      background: var(--teal);
      color: #fff !important; /* site-shell.css i tak wymusza bialy - tu jest wlasciwy */
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -.01em;
      box-shadow: none;
    }
    .savings-panel--result .savings-demo:hover { background: var(--teal-deep); }
    .savings-disclaimer { color: #a1a1a6; }
    /* Kompaktowy kalkulator (-30% wysokosci): mniejsze pady paneli, ciasniejsze
       odstepy pol i mniejsza kwota - bez zmiany funkcji */
    .savings { padding: 76px 0; }
    .savings .center { margin-bottom: 34px; }
    .savings-panel { padding: 30px 36px; }
    /* Lewa kolumna: naglowek u gory, suwaki wysrodkowane w pozostalej przestrzeni -
       wczesniej zostawala duza pusta przerwa pod ostatnim suwakiem. */
    /* Dwa marginesy "auto" dziela wolna przestrzen po rowno: naglowek zostaje
       u gory, a grupa suwakow ladnie sredniuje w reszcie kolumny. */
    .savings-panel--input { display: flex; flex-direction: column; }
    /* Gorny odstep byl drugim marginesem "auto", wiec dzielil wolna przestrzen
       po rowno z dolnym i luka nad suwakami rosla razem z wysokoscia karty.
       Teraz gora ma staly odstep, a cala nadwyzka schodzi pod ostatnie pole -
       grupa suwakow siedzi wyzej. */
    .savings-panel--input .savings-lead { margin-bottom: 0; padding-bottom: 72px; }
    .savings-panel--input .savings-field:last-of-type { margin-bottom: auto; }
    .savings-lead { margin-bottom: 22px; }
    .savings-field + .savings-field { margin-top: 44px; }
    .savings-field-head { margin-bottom: 10px; }
    .savings-amount { margin: 8px 0 4px; }
    .savings-sticker { margin: 12px 0 auto; padding: 0; }
    .savings-field--onteal { margin-top: 20px; }
    .savings-demo { margin-top: 16px; }
    .savings-disclaimer { margin-top: 12px; }


    /* ---- Use cases / Funkcje: babelki 1:1 ze strony produktowej Apple ----
       Zwiniety dymek: (+) w kolku + tytul (17px). Rozwiniety: akapit
       "Tytul. Opis" z tytulem boldem. Okragle strzalki w kolumience po lewej.
       Use cases na czystej czerni, Funkcje - wariant na bialym tle. ---- */
    .usecases { position: relative; padding: 110px 0 124px; background: #060608; overflow: hidden; }
    /* Tapeta w stylu macOS (wygenerowana AI) zamiast zdjecia - sekcja stoi na
       kolorowym, ale spokojnym tle; krawedzie wygaszane do czerni, zeby dymki
       i naglowek zachowaly kontrast. */
    /* Tapeta jest szersza od sekcji (zapas 6% po bokach) i przesuwa sie poziomo
       wraz ze scrollem - powstaje wrazenie plynacej fali. Zapas sprawia, ze przy
       skrajnych pozycjach nie odslania sie krawedz obrazu. */
    .usecases-bg {
      position: absolute;
      inset: 0 -12%;
      background: url("value/uc-tapeta.webp") center / cover no-repeat;
      opacity: .9;
      pointer-events: none;
      transform: translate3d(var(--uc-shift, 0px), 0, 0);
      will-change: transform;
    }
    /* Na telefonie tapeta w mniejszym wariancie: 2200 px to zapas dla ekranow desktopowych,
       a przy szerokosci do 820 px i tak jest przeskalowywana w dol. Zmierzone: 106 KB (JPG)
       -> 22 KB, czyli okolo jednej piatej wagi calej strony. */
    @media (max-width: 820px) {
      .usecases-bg { background-image: url("value/uc-tapeta-s.webp"); }
    }
    @media (prefers-reduced-motion: reduce) {
      .usecases-bg { transform: none; }
    }
    .usecases-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(120% 90% at 50% 40%, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .55) 62%, rgba(6, 6, 8, .95) 100%),
        linear-gradient(to bottom, #060608 0%, transparent 16%, transparent 82%, #060608 100%);
    }
    .usecases > .container { position: relative; z-index: 1; }
    .uc-grid {
      display: grid;
      grid-template-columns: minmax(350px, .54fr) minmax(0, 1.46fr);
      gap: clamp(28px, 4vw, 56px);
      align-items: center;
      width: min(1280px, 100%);
      margin: 60px auto 0;
    }
    .uc-grid--mirror { grid-template-columns: minmax(0, 1.46fr) minmax(350px, .54fr); }
    .uc-grid--mirror .uc-tabs-wrap { order: 2; }
    .uc-grid--mirror .uc-stage { order: 1; }
    /* min-width: 0 - bez tego poziomy pasek dymkow (nowrap) rozpycha kolumne grida */
    .uc-tabs-wrap { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; }
    .uc-tabs {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      max-height: 540px;
      overflow-y: auto;
      padding: 2px 6px 34px 2px;
      scrollbar-width: none;
      min-width: 0;
    }
    .uc-tabs::-webkit-scrollbar { display: none; }
    /* Delikatne wyszarzenia listy (gora ::before, dol ::after) - gasna na krancach */
    /* Lista gasnie na krawedziach maska, a nie plachta w kolorze tla - inaczej
       na kolorowej tapecie Use cases zostawal ciemny prostokat. Krawedz, przy
       ktorej lista sie konczy, maski nie dostaje (stad zmienne). */
    .uc-tabs {
      --gasnie-gora: 52px;
      --gasnie-dol: 52px;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--gasnie-gora), #000 calc(100% - var(--gasnie-dol)), transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 var(--gasnie-gora), #000 calc(100% - var(--gasnie-dol)), transparent 100%);
    }
    .uc-tabs-wrap.is-at-top .uc-tabs { --gasnie-gora: 0px; }
    .uc-tabs-wrap.is-at-bottom .uc-tabs { --gasnie-dol: 0px; }
    @media (prefers-reduced-motion: reduce) {
      .uc-tab, .uc-row { transition: none; }
    }
    /* Kolumienka okraglych strzalek po lewej (pion, wysrodkowana) */
    .uc-tabs-nav { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }
    .uc-tabs-arrow {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      /* Szronione szklo jak w nakladkach Apple: polprzezroczyste tlo + rozmycie tla */
      background: rgba(60, 60, 67, .5);
      backdrop-filter: blur(20px) saturate(1.6);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      color: #f5f5f7;
      cursor: pointer;
      transition: background .15s ease;
    }
    .uc-tabs-arrow:hover { background: rgba(80, 80, 88, .62); }
    .functions .uc-tabs-arrow { background: #e8e8ed; color: #1d1d1f; }
    .functions .uc-tabs-arrow:hover { background: #dededf; }
    .uc-tabs-arrow svg { width: 18px; height: 18px; }
    .uc-tabs-arrow:disabled { opacity: .35; cursor: default; pointer-events: none; }
    /* W Funkcjach (lustro) strzalki po prawej stronie listy */
    .uc-grid--mirror .uc-tabs-nav { order: 2; }
    .uc-group {
      flex: 0 0 auto;
      margin: 10px 0 0;
      color: #86868b;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .uc-tabs .uc-group:first-child { margin-top: 0; }
    /* Dymek: zwiniety = pigulka, rozwiniety = zaokraglony bąbel z akapitem */
    .uc-tab {
      position: relative;
      display: block;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
      padding: 13px 22px 13px 13px;
      overflow: hidden;
      border: 0;
      border-radius: 999px;
      /* Dymki jak na stronach produktowych Apple: szronione szklo nad tapeta */
      background: rgba(60, 60, 67, .5);
      backdrop-filter: blur(20px) saturate(1.6);
      -webkit-backdrop-filter: blur(20px) saturate(1.6);
      color: #f5f5f7;
      cursor: pointer;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -.01em;
      line-height: 1.25;
      text-align: left;
      transition: background .2s ease, border-radius .2s ease;
    }
    .uc-tab:hover { background: rgba(80, 80, 88, .62); }
    .uc-tab[aria-selected="true"] {
      width: 100%;
      padding: 22px 26px;
      border-radius: 24px;
      background: rgba(48, 48, 54, .58);
      cursor: default;
    }
    .functions .uc-tab { background: #f5f5f7; color: #1d1d1f; }
    .functions .uc-tab:hover { background: #e8e8ed; }
    .functions .uc-tab[aria-selected="true"] { background: #f5f5f7; }
    /* Plynna animacja rozwiniecia jak u Apple: dwa wiersze grid-template-rows
       0fr <-> 1fr animowane przeciwbieznie + fade tresci. Progressive enhancement:
       interpolate-size pozwala nowym przegladarkom animowac tez szerokosc pigulki. */
    .uc-tab { interpolate-size: allow-keywords; transition: background .25s ease, border-radius .35s ease, width .45s cubic-bezier(.32, .72, 0, 1), padding .35s ease; }
    .uc-row { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.32, .72, 0, 1), opacity .28s ease; }
    .uc-clip { display: block; overflow: hidden; min-height: 0; }
    .uc-min-inner { display: flex; align-items: center; gap: 13px; }
    .uc-row-full { opacity: 0; grid-template-rows: 0fr; }
    .uc-tab[aria-selected="true"] .uc-row-min { grid-template-rows: 0fr; opacity: 0; }
    .uc-tab[aria-selected="true"] .uc-row-full { grid-template-rows: 1fr; opacity: 1; transition-delay: .08s; }
    /* (+) w kolku - jak u Apple */
    .uc-tab-plus {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(120, 120, 128, .5);
      color: #f5f5f7;
    }
    .functions .uc-tab-plus { background: #d6d6db; color: #1d1d1f; }
    .uc-tab-plus svg { width: 15px; height: 15px; }
    .uc-tab-label { font-weight: 600; }
    .uc-tab-text { display: block; min-width: 0; font-size: 16px; line-height: 1.5; }
    .uc-tab-title { font-weight: 700; }
    .uc-tab-desc { font-weight: 400; color: #a1a1a6; }
    .functions .uc-tab-desc { color: #6e6e73; }
    .uc-stage { min-width: 0; }
    /* Demo scalone z tlem: bez ramki, bez paska, samo zaokraglenie kadru */
    /* isolation + translateZ: bez wlasnej warstwy kompozycji przycinanie
       skalowanego iframe'a zostawialo "szarpana" ciemna krawedz na zaokragleniach */
    .uc-demo {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 24px;
      background: transparent;
    }
    .uc-demo iframe {
      position: absolute;
      left: 0;
      top: 0;
      width: 1280px;
      height: 720px;
      border: 0;
      transform-origin: 0 0;
      transform: scale(var(--uc-scale, 1));
      pointer-events: none;      /* demo gra samo - klik ma nie zabierac scrolla */
      opacity: 1;
      transition: opacity .45s cubic-bezier(.32, .72, 0, 1);
    }
    .uc-demo::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 28px;
      height: 28px;
      margin: -14px 0 0 -14px;
      border: 2.5px solid rgba(255, 255, 255, .2);
      border-top-color: rgba(255, 255, 255, .7);
      border-radius: 50%;
      opacity: 0;
      transition: opacity .25s ease;
      animation: tm-spin .8s linear infinite;
      pointer-events: none;
    }
    .functions .uc-demo::after { border-color: rgba(0, 0, 0, .12); border-top-color: rgba(0, 0, 0, .42); }
    .uc-demo.is-swapping::after { opacity: 1; }
    /* Pierwsze wejscie kadru tez przez fade - bez tego widac bylo skok */
    .uc-demo:not(.is-swapping) iframe:not([src]) { opacity: 0; }
    .uc-demo.is-swapping iframe {
      opacity: 0;
      transform: scale(calc(var(--uc-scale, 1) * .97)) translateY(14px);
    }
    .uc-demo iframe { transition: opacity .42s cubic-bezier(.32, .72, 0, 1), transform .52s cubic-bezier(.32, .72, 0, 1); }
    /* Kadr w Funkcjach dostaje ten sam miekki cien co animacja w hero.
       box-shadow na .uc-demo bylby PRZYCIETY przez maske antyaliasujaca,
       wiec cien rzuca rodzic przez drop-shadow (respektuje zaokraglone rogi). */
    .functions .uc-stage { filter: drop-shadow(0 20px 46px rgba(14, 25, 43, .17)); }
    @media (max-width: 1023px) {
      .uc-grid, .uc-grid--mirror { grid-template-columns: 1fr; }
      .uc-grid--mirror .uc-tabs-wrap { order: 1; }
      .uc-grid--mirror .uc-stage { order: 2; }
      /* Na waskim ekranie dymki przewijaja sie poziomo; aktywny rozwija sie w pionie */
      .uc-tabs { flex-direction: row; flex-wrap: nowrap; align-items: center; max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; scroll-snap-type: x proximity; }
      .uc-tab { scroll-snap-align: start; }
      .uc-tab[aria-selected="true"] { width: min(84vw, 380px); flex: 0 0 auto; }
      .uc-group { margin: 0 4px; white-space: nowrap; }
      .uc-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
      }
      .uc-tabs-wrap.is-at-bottom .uc-tabs {
        -webkit-mask-image: none;
        mask-image: none;
      }
      .uc-tabs-nav { display: none; }
    }

    /* ---- Gdzie TM daje najwieksza wartosc: uklad "New and noteworthy" ----
       Naglowek po lewej, przelacznik pigulkowy, karty ze zdjeciem w zaokraglonym
       kadrze; pod zdjeciem akapit "Tytul. opis" (bold + szary inline),
       na dole okragle strzalki po prawej. ---- */
    .value { padding: 104px 0 96px; }
    .val-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .value .section-heading { text-align: left; }
    .val-switch {
      display: inline-flex;
      gap: 4px;
      padding: 3px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .1);
    }
    .val-switch-btn {
      min-height: 34px;
      padding: 0 20px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(255, 255, 255, .8);
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: -.01em;
      transition: background .2s ease, color .2s ease;
    }
    .val-switch-btn[aria-selected="true"] { background: #fff; color: var(--ink); }
    .val-slider { position: relative; margin-top: 40px; }
    .val-rail {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: clamp(320px, 34vw, 460px);
      gap: 20px;
      overflow-x: auto;
      padding: 2px;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }
    .val-rail::-webkit-scrollbar { display: none; }
    .val-rail[hidden] { display: none; }
    .val-card { scroll-snap-align: start; }
    .val-photo {
      position: relative;
      overflow: hidden;
      border-radius: 20px;
      aspect-ratio: 4 / 3;
      background: rgba(255, 255, 255, .06);
    }
    .val-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Akapit pod zdjeciem: tytul boldem, opis szary - jak podpisy kart Apple */
    .val-copy {
      margin: 18px 0 0;
      color: rgba(255, 255, 255, .62);
      font-size: 17px;
      font-weight: 400;
      line-height: 1.47;
      letter-spacing: -.01em;
    }
    .val-title { color: #fff; font-weight: 600; }
    .val-title::after { content: "."; }
    /* Link tekstowy z szewronem - wzorzec "Learn about Mac for work >" */
    .val-link {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-top: 10px;
      color: #6aa4ff;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: -.01em;
    }
    .val-link span { font-size: 20px; line-height: 1; translate: 0 -1px; }
    .val-link:hover { text-decoration: underline; }
    .val-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 34px; }
    .val-nav { display: flex; gap: 10px; }
    .val-nav .round-button { width: 40px; height: 40px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; }
    .val-nav .round-button:hover { background: rgba(255, 255, 255, .26); transform: none; }
    .val-nav .round-button:disabled { opacity: .35; pointer-events: none; }
    .val-progress { display: none; } /* w ukladzie Apple wystarczaja same strzalki */
    @media (max-width: 700px) {
      .value { padding: 88px 0 80px; }
      .val-rail { grid-auto-columns: min(86vw, 340px); }
      .val-head { align-items: flex-start; }
    }

    /* ---- Cennik: przelacznik Standard / Pro ---- */
    .plan-switch {
      display: flex;
      justify-content: center;
      gap: 4px;
      width: max-content;
      margin: 34px auto 0;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
    }
    .plan-switch-btn {
      min-height: 42px;
      padding: 0 26px;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 13px;
      font-weight: 700;
    }
    .plan-switch-btn[aria-selected="true"] { background: var(--teal); color: #fff; }
    .price-per { margin: 2px 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
    .price-amount--sm { font-size: 24px; }
    /* atrybut hidden ma wygrywac z display ustawionym na .price w bazowym CSS */
    .price[hidden], .price-per [data-plan][hidden], .price-services [data-plan][hidden] { display: none !important; }

    /* ==================================================================
       MOBILE - przeglad calej strony. Blok celowo NA KONCU arkusza:
       wczesniejsze media queries przegrywaly z pozniejszymi regulami
       "Apple" (ta sama specyficznosc, dalsza pozycja w pliku), przez co
       np. tabela porownania rozjezdzala sie na telefonie.
       ================================================================== */
    @media (max-width: 860px) {
      /* ---- Hero ---- */
      .hero { padding-bottom: 56px; }
      .hero .app-stage { margin-top: 36px; }
      .hero-cards { display: none; }              /* plyty dekoracyjne wychodza poza ekran */
      /* Pigulki: bylo margin-top 96px (wisialy pod kadrem) i padding-inline 30px
         (pierwsza pigulka nie trzymala linii tresci). Rail idzie od krawedzi. */
      .hero .pill-tabs {
        width: calc(100% + 32px);
        margin: 26px -16px 0;
        padding: 4px 16px 6px;
        scroll-padding-inline: 16px;
      }
      /* Logotypy w jednym przewijanym rzedzie (jak w Cenniku). Podpis zostaje
         POZA scrollerem, inaczej odjezdzal razem z logotypami. */
      .hero .trust-row { display: block; margin: 44px 0 0; padding: 0; }
      /* position:static kasuje absolutne pozycjonowanie z bloku 620px - inaczej
         podpis kladl sie na logotypach */
      .hero .trust-label { position: static; display: block; width: auto; margin: 0 0 14px; transform: none; text-align: left; }
      .hero .trust-logos {
        display: flex;
        align-items: center;
        width: calc(100% + 32px);
        gap: 26px;
        margin-inline: -16px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 16px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .hero .trust-logos::-webkit-scrollbar { display: none; }
      .hero .client-logo { flex: 0 0 auto; height: 24px; max-width: none; scroll-snap-align: start; }

      /* ---- Use cases / Funkcje ---- */
      .usecases { padding: 84px 0 88px; }
      .functions { padding: 84px 0 88px; }
      /* Tapeta: bez zapasu po bokach i bez paralaksy - inset -12% zostawial
         uciete tlo z prawej, gdy sekcja jest wezsza od obrazu */
      .usecases-bg { inset: 0; transform: none !important; }
      .uc-grid, .uc-grid--mirror { gap: 26px; }
      .uc-group { display: none; }                /* nazwy kategorii tylko na desktopie */
      .uc-tabs { -webkit-mask-image: none; mask-image: none; }
      .uc-tabs {
        gap: 12px;
        padding: 2px 16px 4px;
        margin-inline: -16px;
        width: calc(100% + 32px);
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
      }
      /* Na telefonie dymki sa OD RAZU rozwiniete - user nie musi zgadywac,
         co kryje sie pod (+). Kazdy to karta o stalej szerokosci ze snapem. */
      /* Rozwiniety dymek ma zaokraglenie karty (24px), nie pigulki (999px) -
         bez tego wysoka karta zamieniala sie w elipse. */
      .uc-tab, .uc-tab[aria-selected="true"] {
        flex: 0 0 auto;
        width: min(78vw, 320px);
        padding: 22px 24px;
        border-radius: 24px;
        scroll-snap-align: start;
      }
      .uc-tab { background: rgba(48, 48, 54, .58); }
      .functions .uc-tab { background: #f5f5f7; }
      .uc-tab .uc-row-min { grid-template-rows: 0fr; opacity: 0; }
      .uc-tab .uc-row-full { grid-template-rows: 1fr; opacity: 1; }
      .uc-tab .uc-tab-plus { display: none; }
      /* Kolejnosc na telefonie w obu wariantach: dymki -> kropki -> demo.
         Bez tego w Funkcjach (uc-grid--mirror) kropki ladowaly nad naglowkiem. */
      .uc-grid .uc-tabs-wrap { order: 1; }
      .uc-grid .rail-dots, .uc-grid .rail-progress { order: 2; }
      .uc-grid .uc-stage { order: 3; }

      /* ---- Tabela porownania na telefonie, w jezyku Apple ----
         Wzorzec z apple.com/pl/iphone/compare: kolumny deklarowane RAZ w
         przyklejonym naglowku, potem same wloskowate wiersze na tle strony.
         Zero kart z cieniem, zero ikon w szarych kafelkach, zero paskow akcentu
         przy wartosciach - hierarchie niesie sama typografia: nazwa cechy to
         drobny szary podpis, wartosci sa pod nia obok siebie, a kolumna Task
         Managera jest ciemniejsza i cięższa od kolumny abonamentu. ---- */
      .compare-table {
        display: block;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      /* Naglowek kolumn - jeden raz, przyklejony pod naglowkiem strony */
      .compare-row:first-child {
        display: grid;
        position: sticky;
        z-index: 20;
        top: 56px;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px;
        min-height: 0;
        padding: 13px 0 11px;
        overflow: visible;
        border: 0;
        /* zerowanie promienia z wczesniejszego bloku 620 px - inaczej pod
           naglowkiem przeswitywal duch zaokraglonej karty */
        border-radius: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .22);
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(1.8) blur(20px);
        backdrop-filter: saturate(1.8) blur(20px);
      }
      .compare-row:first-child .compare-cell {
        display: flex;
        align-items: center;
        min-height: 26px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        font-size: 13px;
        font-weight: 400;
      }
      .compare-row:first-child .compare-cell:first-child { display: none; }  /* pusty rog tabeli */
      .compare-row:first-child .compare-good { background: transparent; }
      .compare-brand img { width: 108px; }

      /* Wiersz cechy: podpis na calej szerokosci, pod nim dwie kolumny wartosci */
      .compare-row:not(:first-child) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px;
        margin: 0;
        padding: 18px 0 20px;
        overflow: visible;
        border: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .09);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }
      .compare-row:not(:first-child):hover { box-shadow: none; }
      .compare-row:not(:first-child):hover .compare-cell { background: transparent; }

      .compare-cell {
        display: block;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 15px;
        line-height: 1.4;
      }
      .compare-cell + .compare-cell { border: 0; }

      /* Nazwa cechy powtorzona NAD KAZDA wartoscia (decyzja wlasciciela): kazda
         odpowiedz jest samodzielna, nie trzeba wracac wzrokiem do wspolnego
         podpisu. Tekst bierzemy z `data-cecha` na komorce - to samo zrodlo co
         naglowek wiersza, wiec nie ma drugiego miejsca do aktualizacji. */
      .compare-label { display: none; }
      .compare-row:not(:first-child) .compare-cell[data-cecha]::before {
        content: attr(data-cecha);
        /* position/text-transform MUSZA byc jawne - wczesniejszy blok 860 px
           pozycjonuje te pseudoelementy absolutnie i pisze wersalikami, przez co
           podpis kladl sie na wartosci. */
        position: static;
        display: block;
        margin: 0 0 6px;
        color: var(--muted);
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.3;
        text-transform: none;
      }

      .compare-row:not(:first-child) .compare-cell:nth-child(2) { color: var(--muted); }
      .compare-row:not(:first-child) .compare-good {
        display: block;
        color: var(--ink);
        font-weight: 500;
      }
      /* Stare etykiety "W abonamencie"/"Task Manager" i paski akcentu - zdjete */
      .compare-row:not(:first-child) .compare-cell::after { content: none; }
      .compare-row:not(:first-child) .compare-good > svg { display: none; }

      /* ---- Referencje: przewijane karty + kropki ---- */
      .references .testimonial-grid {
        display: flex;
        width: calc(100% + 32px);
        gap: 14px;
        margin-inline: -16px;
        padding: 44px 16px 4px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }
      .references .testimonial-grid::-webkit-scrollbar { display: none; }
      .references .testimonial { flex: 0 0 auto; width: min(84vw, 380px); scroll-snap-align: start; padding: 26px 24px 24px; }
      .references .testimonial blockquote { font-size: 17px; }

      /* Blok 620px zeruje gorny padding wyroznionej karty (zostal po wstazce
         przyklejonej do krawedzi). Teraz wstazka jest pigulka w srodku karty,
         wiec padding musi wrocic - inaczej pigulka lezy na zaokragleniu. */
      .price-card.featured { padding-top: 30px; }
      .price-card.featured .price-ribbon { margin: 0 0 12px; padding: 4px 12px; border-radius: 999px; font-size: 12px; }

      /* ---- Cennik: przelacznik wariantu przyklejony pod naglowkiem ----
         Cztery karty jedna pod druga to dlugie przewijanie - bez przypietego
         przelacznika uzytkownik traci z oczu, ktory wariant oglada.
         Uklad skrocony: same nazwy w jednym rzedzie (podpisy tylko na desktopie),
         bo dwa kafle z opisem zajmowaly pol ekranu. DESKTOP BEZ ZMIAN. */
      .pricing .plan-picker {
        position: sticky;
        z-index: 30;
        top: 62px;
        flex-direction: row;
        width: 100%;
        margin: 26px 0 0;
        padding: 4px;
        border-radius: 999px;
        background: rgba(245, 245, 247, .92);
        box-shadow: 0 1px 0 rgba(14, 25, 43, .06), 0 8px 24px rgba(14, 25, 43, .08);
        backdrop-filter: saturate(1.8) blur(20px);
        -webkit-backdrop-filter: saturate(1.8) blur(20px);
      }
      .pricing .plan-card { flex: 1 1 0; min-width: 0; padding: 9px 12px; border-radius: 999px; }
      .pricing .plan-card-tag { display: none; }
      .pricing .plan-card-name { font-size: 15px; }

      /* ---- Odstepy miedzy sekcjami: jedna skala na telefonie ---- */
      .section { padding: 84px 0 88px; }
      .savings { padding: 84px 0 88px; }
      .value { padding: 84px 0 80px; }
      .references { padding: 84px 0 26px; }   /* mniej powietrza przed Cennikiem */
      .pricing { padding: 36px 0 88px; }
      .faq { padding: 84px 0 92px; }
      .section-heading { margin-bottom: 0; }
      .section-subtitle { margin-top: 14px; }
    }

    /* Kropki przewijania: doklejane przez JS pod poziomym railem (przelaczniki
       Use cases / Funkcje, referencje). Sygnalizuja, ze karty ida dalej. */
    /* ---- Oznaczenie grafik tworzonych z pomoca AI (art. 50 aktu o AI) ----
       Ikona (i) w rogu kadru; opis pokazuje sie na hover, focus I klik, zeby
       byl dostepny takze na dotyku i z klawiatury. Sama ikona jest widoczna
       zawsze - informacja nie moze byc ukryta za interakcja, ktorej uzytkownik
       nie odkryje. */
    .ai-mark { position: absolute; z-index: 3; right: 10px; bottom: 10px; }
    .ai-mark-btn {
      display: grid;
      place-items: center;
      width: 26px;
      height: 26px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(0, 0, 0, .42);
      color: #fff;
      cursor: pointer;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      transition: background .2s ease;
    }
    .ai-mark-btn:hover { background: rgba(0, 0, 0, .62); }
    .ai-mark-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .ai-mark-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
    .ai-mark-tip {
      position: absolute;
      right: 0;
      bottom: calc(100% + 8px);
      width: max-content;
      max-width: min(260px, 70vw);
      padding: 9px 12px;
      border-radius: 12px;
      background: rgba(28, 28, 30, .94);
      color: #f5f5f7;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.4;
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity .18s ease, transform .18s ease, visibility .18s;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
    .ai-mark:hover .ai-mark-tip,
    .ai-mark-btn:focus-visible + .ai-mark-tip,
    .ai-mark-btn[aria-expanded="true"] + .ai-mark-tip { opacity: 1; visibility: visible; transform: translateY(0); }
    .ai-mark--dark .ai-mark-btn { background: rgba(255, 255, 255, .18); }
    .ai-mark--dark .ai-mark-btn:hover { background: rgba(255, 255, 255, .3); }
    .val-photo { position: relative; }
    /* Znacznik na wysokosci nadgarstkow - najnizszy punkt kadru, w ktorym
       zdjecie jest jeszcze w pelni widoczne (maska wygasza od 78% wysokosci). */
    .demo-shot .ai-mark { right: 14px; bottom: 10%; }

    /* display:grid z .savings-compare wygrywalo z atrybutem hidden - w wariancie
       Enterprise obie karty (porownanie i Enterprise) pokazywaly sie naraz. */
    [data-sv-compare][hidden], [data-sv-ent][hidden], [data-sv-save-line][hidden] { display: none !important; }

    .rail-dots, .rail-progress { display: none; }
    @media (max-width: 860px) {
      .rail-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
      .rail-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 25, 43, .2); transition: background .2s ease, transform .2s ease; }
      .rail-dot[aria-current="true"] { background: rgba(14, 25, 43, .62); transform: scale(1.18); }
      .usecases .rail-dot { background: rgba(255, 255, 255, .32); }
      .usecases .rail-dot[aria-current="true"] { background: #fff; }
      /* Powyzej 10 kart kropki zamieniaja sie w pasek - 24 kropki to nie jest
         czytelny wskaznik, tylko szum. */
      .rail-progress { position: relative; display: block; width: 140px; height: 4px; margin: 16px auto 0; border-radius: 999px; background: rgba(14, 25, 43, .14); }
      .rail-progress > span { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: rgba(14, 25, 43, .55); transition: left .12s linear, width .12s linear; }
      .usecases .rail-progress { background: rgba(255, 255, 255, .22); }
      .usecases .rail-progress > span { background: rgba(255, 255, 255, .85); }
    }