/* ============================================================
   Efektoś — landing page (build produkcyjny)
   Kierunek: BRAND_LANDING.md §2–§4. Prototyp: prototyp/wariant-a.html
   Zasady twarde: tylko transform/opacity w animacjach, zero ease-in,
   zero transition:all, prefers-reduced-motion redukuje WSZYSTKO
   do stanu końcowego, blur wyłącznie na elementach fixed.
   ============================================================ */

/* ── krój: self-host, dwa podzbiory (polskie diakrytyki są w latin-ext),
      plik osiowy 400-800. Prowenancja i licencja: assets/fonts/OFL.txt ── */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/manrope-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:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/manrope-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{
  --navy-950:#0d1233; --navy-900:#131e4f; --navy-800:#16215c;
  --brand:#2543c7; --brand-hover:#1c36a4; --accent:#3b62e0;
  --amber:#f0b429; --amber-ink:#8a5a0d; --gold-a:#c8861a; --gold-b:#e2b04b;
  --green:#276a4d; --green-bg:rgba(46,125,91,.10); --green-border:rgba(46,125,91,.28);
  --amber-bg:rgba(200,134,26,.10); --amber-border:rgba(200,134,26,.28);
  --page:#f4f6fb; --sunken:#eceff7; --card:#ffffff;
  /* tekst drugorzędny podniesiony z .62/.50 na .72/.58 (2026-08-24):
     przy dłuższych akapitach na jasnym tle .62 czytało się jako szary szum */
  --ink:#1d1d1b; --ink-2:rgba(0,0,0,.72); --ink-3:rgba(0,0,0,.58); --border:rgba(0,0,0,.07);
  --sidebar-text:#c9d0ee; --sidebar-muted:#9aa5c9;
  --shadow-card:0 1px 3px rgba(16,24,40,.02), 0 12px 40px rgba(16,24,40,.045);
  --shadow-lift:0 2px 6px rgba(16,24,40,.04), 0 20px 44px rgba(16,24,40,.10);
  --shadow-navy:0 10px 28px rgba(22,33,92,.35);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-pop:cubic-bezier(.22,1.6,.36,1);
  --t-fast:200ms; --t-base:450ms; --t-slow:700ms;
  --font:'Manrope',system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  /* ── SKALA TYPOGRAFICZNA (2026-08-25) ──────────────────────
     Było 22 stałe rozmiary i 12 osobnych clamp() = 34 stopnie na jednej
     stronie, w tym dziesięć w przedziale 13-17.5 px. Nikt tego nie
     zaprojektował, to się narosło sekcja po sekcji.

     ZASADA: nowy tekst bierze stopień z tej skali. Jeśli żaden nie
     pasuje, to nie znaczy, że trzeba dopisać wartość - znaczy, że
     trzeba wybrać sąsiedni. Skala ma sens tylko wtedy, gdy nie ma
     obok niej wyjątków.

     Interlinia i światło są DOWIĄZANE do roli, nie dobierane osobno:
     im większy stopień, tym ciaśniejsze światło i niższa interlinia. */
  --fs-100:11px;    /* etykiety wersalikami, mikro-podpisy */
  --fs-200:12.5px;  /* podpisy, drugi wiersz w karcie */
  --fs-300:13.5px;  /* drobny tekst, wiersze UI, nawigacja */
  --fs-400:15px;    /* przyciski, pola formularza, tekst wtrącony */
  --fs-500:16.5px;  /* akapit podstawowy */
  --fs-600:18px;    /* lead sekcji, pytanie FAQ, akapit dokumentu */
  --fs-700:20px;    /* nagłówek karty, h2 w dokumencie */
  --fs-800:26px;    /* liczba w liczniku, nagłówek modala */

  /* Stopnie display zostają płynne (clamp), bo od 390 do 1440 px nagłówek
     musi się skalować, a nie łamać. NIE są zbite do wspólnego mianownika
     tam, gdzie były dostrajane pod konkretne ograniczenie - patrz --fs-d3. */
  --fs-numeral:clamp(3.4rem,9.6vw,7rem); /* zegar w pasie CTA, cyfra 404 */
  --fs-d1:clamp(2.7rem,6.4vw,5.4rem);    /* H1 strony, jedyne wystąpienie */
  --fs-d2:clamp(2rem,4.2vw,3.4rem);      /* h2 sekcji, h1 dokumentu */
  --fs-d3:clamp(1.9rem,3.8vw,3rem);      /* liczby w szwie ORAZ h2 w sekcji
                                            pinowanej. NIE podnosić: h2 musi
                                            zmieścić się na desktopie w jednej
                                            linii (patrz .pin-head) */
  --fs-d4:clamp(1.8rem,3.4vw,2.7rem);    /* nagłówek boczny, teza „dlaczego" */
  --fs-d5:clamp(1.35rem,2.2vw,1.9rem);   /* podnagłówek w karcie i w pasie CTA */
  --fs-d6:clamp(1.05rem,1.8vw,1.4rem);   /* tytuł karty zbiegania */

  /* Interlinia: 5 rol zamiast 18 wartości (były m.in. 1.55, 1.58, 1.6,
     1.62, 1.65, 1.66 i 1.7 dla tego samego akapitu). */
  --lh-numeral:.9; --lh-display:1.06; --lh-snug:1.25;
  --lh-base:1.5; --lh-relaxed:1.62;

  /* Światło: 7 rol zamiast 19 wartości (były -.01, -.012, -.018, -.02,
     -.022, -.025, -.026 i -.028 obok siebie, nie do odróżnienia okiem). */
  --ls-numeral:-.045em; --ls-display:-.026em; --ls-heading:-.018em;
  --ls-text:-.01em; --ls-label:.06em; --ls-caps:.15em; --ls-caps-tight:.08em;

  /* Kolory dopisane, bo krążyły po pliku jako surowe hexy poza paletą */
  --green-on-navy:#4ade80;
  --tint-0:#eef1fb; --tint-a:#dfe6f9; --tint-b:#c9d4f4;
  /* Promienie: 7 stopni zamiast 15 wartosci (byly 2, 3, 5, 6, 10, 12, 14,
     16, 17, 18, 20, 22 i 24 px obok siebie). Promien idzie za rozmiarem
     elementu: im wieksza plaszczyzna, tym wieksze zaokraglenie. */
  --r-xs:3px; --r-sm:6px; --r-md:12px; --r-lg:14px;
  --r-xl:18px; --r-2xl:22px; --r-pill:9999px;
  /* Rytm między sekcjami (2026-08-25). Przedtem każda sekcja miała swój
     padding u góry I u dołu, a sąsiadujące się DODAWAŁY: moduły 48 px na
     dole + .whysec 56 px marginesu + 96 px paddingu = 200 px dziury.
     Zmierzone odstępy między tuszem szły 74, 96, 160, 201, 201 px - pięć
     różnych, dwa razy po 201.

     ZASADA: odstęp niosą WYŁĄCZNIE paddingi górne. Dolne są zerowe, więc
     nic się nie sumuje i jeden token rządzi całym rytmem. Wyjątkiem są
     sekcje z własnym tłem (--sec-in), bo tam krawędź pasa jest realną
     granicą i potrzebuje wewnętrznego oddechu po obu stronach. */
  --sec-y:clamp(72px,7.5vh,108px);
  --sec-in:clamp(56px,6vh,84px);
}
*{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior:smooth świadomie NIE ma: gładkie przewijanie na
   scrollerze rozjeżdża liczenie pozycji w ScrollTriggerze (pinowana
   sekcja Problem skacze przy kliknięciu kotwicy w nawigacji) */
body{font-family:var(--font);color:var(--ink);background:var(--page);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.tnum{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--brand);padding:12px 18px;border-radius:0 0 10px 0;font-weight:800;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.hero :focus-visible,.cta-band :focus-visible{outline-color:var(--amber)}

/* ── pasek doby ───────────────────────────────────────────── */
.dayline{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;background:rgba(22,33,92,.12)}
.dayline i{display:block;height:100%;transform:scaleX(.06);transform-origin:left;background:linear-gradient(90deg,var(--amber) 0%,var(--gold-b) 100%)}
@supports (animation-timeline: scroll()){
  .dayline i{animation:dayfill linear both;animation-timeline:scroll(root)}
  @keyframes dayfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.dayline .end{position:absolute;top:8px;right:10px;font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps-tight);color:var(--sidebar-muted);font-variant-numeric:tabular-nums}
.hero .dayline-note{position:absolute;top:9px;left:12px;font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps-tight);color:var(--sidebar-muted);font-variant-numeric:tabular-nums;z-index:61}

/* ── nav naga ─────────────────────────────────────────────── */
.topnav{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:0 auto;padding:34px 28px 0}
.nav-logo{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;font-size:var(--fs-500);letter-spacing:var(--ls-text)}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:22px;font-size:var(--fs-300);font-weight:600;color:var(--sidebar-text)}
.nav-links a{transition:color var(--t-fast) var(--ease-out)}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--amber);color:var(--navy-800);font-weight:800;font-size:var(--fs-300);padding:9px 18px;border-radius:var(--r-pill);transition:transform .12s var(--ease-out), background var(--t-fast) var(--ease-out)}
.nav-cta:hover{background:var(--gold-b)}
.nav-cta:active{transform:scale(.975)}
@media(max-width:920px){.nav-links{display:none}}

/* Znak marki w DWOCH rozmiarach, nie w trzech przypadkowych. Bylo:
   20x26 z arkusza, 16x21 stylem inline w stopce i 15x20 stylem inline
   w karcie dnia. Rozmiar nalezy do arkusza, nie do znacznika. */
.mark{width:20px;height:26px;flex:none}
.mark.sm{width:16px;height:21px}

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  position:relative;
  background:
    radial-gradient(1100px 700px at 82% -14%, rgba(32,54,160,.5) 0%, rgba(32,54,160,0) 60%),
    linear-gradient(168deg, var(--navy-950) 0%, var(--navy-900) 58%, var(--navy-800) 100%);
  color:#fff;padding:158px 0 56px;overflow:visible;z-index:2;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
  mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 88%);
}
.hero-inner{position:relative}
.hero h1{font-size:var(--fs-d1);font-weight:800;line-height:var(--lh-display);letter-spacing:var(--ls-display);max-width:15ch}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hero h1 .line>span{display:inline-block;transform:translateY(112%);transition:transform var(--t-slow) var(--ease-out)}
.hero.in h1 .line:nth-child(1)>span{transition-delay:.05s}
.hero.in h1 .line:nth-child(2)>span{transition-delay:.16s}
.hero.in h1 .line:nth-child(3)>span{transition-delay:.27s}
.hero.in h1 .line>span{transform:translateY(0)}
.dotblock{display:inline-block;width:.52em;height:.2em;border-radius:.07em;background:var(--amber);margin-left:.14em;vertical-align:baseline;transform:scale(0);transform-origin:left bottom;transition:transform .4s var(--ease-pop) .95s}
.hero.in .dotblock{transform:scale(1)}
.hero-below{display:flex;flex-direction:column;align-items:flex-start;gap:28px;margin-top:34px;max-width:calc(100% - min(470px,45vw))}
.hero-sub{font-size:var(--fs-600);line-height:var(--lh-relaxed);color:var(--sidebar-text);max-width:42ch;font-weight:500;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out) .5s, transform .6s var(--ease-out) .5s}
.hero.in .hero-sub{opacity:1;transform:none}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out) .62s, transform .6s var(--ease-out) .62s}
.hero.in .hero-ctas{opacity:1;transform:none}
.btn-amber{display:inline-flex;align-items:center;gap:12px;background:var(--amber);color:var(--navy-800);font-weight:800;font-size:var(--fs-400);padding:8px 8px 8px 24px;border-radius:var(--r-pill);transition:transform .12s var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);box-shadow:0 6px 24px rgba(240,180,41,.25);white-space:nowrap}
.btn-amber .pod{width:36px;height:36px;border-radius:var(--r-pill);background:rgba(22,33,92,.14);display:grid;place-items:center;transition:transform .25s var(--ease-out)}
.btn-amber:hover{background:var(--gold-b);box-shadow:0 10px 32px rgba(240,180,41,.35)}
.btn-amber:hover .pod{transform:translateX(3px)}
.btn-amber:active{transform:scale(.975)}
.btn-ghost-w{display:inline-flex;align-items:center;font-weight:700;font-size:var(--fs-400);color:#fff;padding:13px 24px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.42);transition:background var(--t-fast) var(--ease-out), transform .12s var(--ease-out);white-space:nowrap}
.btn-ghost-w:hover{background:rgba(255,255,255,.08)}
.btn-ghost-w:active{transform:scale(.975)}
.btn-navy{display:inline-flex;align-items:center;gap:12px;background:var(--brand);color:#fff;font-weight:800;font-size:var(--fs-400);padding:8px 8px 8px 24px;border-radius:var(--r-pill);box-shadow:0 6px 24px rgba(37,67,199,.22);transition:transform .12s var(--ease-out), background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);white-space:nowrap}
.btn-navy .pod{width:36px;height:36px;border-radius:var(--r-pill);background:rgba(255,255,255,.18);display:grid;place-items:center;transition:transform .25s var(--ease-out)}
.btn-navy:hover{background:var(--brand-hover);box-shadow:0 10px 32px rgba(37,67,199,.3)}
.btn-navy:hover .pod{transform:translateX(3px)}
.btn-navy:active{transform:scale(.975)}
.btn-ghost-n{display:inline-flex;align-items:center;font-weight:700;font-size:var(--fs-400);color:var(--navy-800);padding:13px 24px;border-radius:var(--r-pill);border:1px solid rgba(22,33,92,.3);transition:background var(--t-fast) var(--ease-out), transform .12s var(--ease-out);white-space:nowrap}
.btn-ghost-n:hover{background:rgba(22,33,92,.05)}
.btn-ghost-n:active{transform:scale(.975)}

/* ── karta dnia przebija szew ─────────────────────────────── */
.deck{position:absolute;right:0;top:100%;transform:translateY(-58%) rotate(-1.8deg) translateX(64px);width:min(430px,42vw);z-index:6;opacity:0;transition:opacity .8s var(--ease-out) .35s, transform .9s var(--ease-pop) .35s}
.hero.in .deck{opacity:1;transform:translateY(-52%) rotate(-1.8deg) translateX(0)}
.deck-float{animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.shell{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-2xl);padding:8px;box-shadow:var(--shadow-navy), 0 34px 80px rgba(13,18,51,.35)}
.daycard{background:var(--card);border-radius:var(--r-lg);padding:22px;color:var(--ink)}
.dc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.dc-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:var(--fs-400)}
.dc-date{font-size:var(--fs-200);color:var(--ink-3);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-100);font-weight:700;padding:4px 11px;border-radius:var(--r-pill);white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;flex:none}
.pill.amber{background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber-ink)}
.pill.amber .dot{background:var(--amber-ink)}
.pill.green{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green)}
.pill.green .dot{background:var(--green)}
.pill.neutral{background:rgba(138,138,138,.09);border:1px solid rgba(138,138,138,.26);color:var(--ink-3)}
.pill.neutral .dot{background:var(--ink-3)}
.pill.pop{animation:pillpop .35s var(--ease-pop)}
@keyframes pillpop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.dc-clock{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--navy-900),var(--brand-hover));color:#fff;border-radius:var(--r-md);padding:12px 16px;margin-bottom:14px}
.dc-clock .lbl{font-size:var(--fs-100);font-weight:700;letter-spacing:var(--ls-caps-tight);text-transform:uppercase;color:var(--sidebar-muted)}
.dc-clock .time{font-size:var(--fs-700);font-weight:800}
.blocks{display:flex;flex-direction:column;gap:8px}
.block{display:flex;align-items:center;gap:12px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px}
.block .h{font-size:var(--fs-200);font-weight:700;color:var(--ink-3);width:44px;flex:none}
.block .t{font-size:var(--fs-300);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.block.todo{background:transparent;border-style:dashed;border-color:rgba(0,0,0,.14)}
.dc-progress{margin-top:16px}
.dc-progress .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.dc-progress .lbl{font-size:var(--fs-200);font-weight:700;color:var(--ink-2)}
.dc-progress .val{font-size:var(--fs-300);font-weight:800}
.bar{height:6px;border-radius:var(--r-sm);background:var(--sunken);overflow:hidden}
/* skala zamiast szerokości: animowanie width wymusza przeliczanie układu
   w każdej klatce, a DESIGN.md dopuszcza wyłącznie transform i opacity */
.bar>i{display:block;height:100%;width:100%;border-radius:var(--r-sm);background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease-out)}
.pips{display:flex;gap:6px;margin-top:12px}
.pip{width:22px;height:22px;border-radius:var(--r-sm);border:1.5px solid rgba(0,0,0,.14);transition:background .3s var(--ease-out), border-color .3s var(--ease-out)}
.pip.on{background:var(--accent);border-color:var(--accent)}
.pip.gold{background:linear-gradient(135deg,var(--gold-a),var(--gold-b));border-color:var(--gold-a)}
.pip.pop-in{animation:pippop .4s var(--ease-pop)}
@keyframes pippop{0%{transform:scale(.4)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ── szew = fakty produktowe jako znak marki ──────────────── */
.seam{padding:var(--sec-y) 0 0;position:relative;z-index:1}
.seam-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.sblock{border-radius:var(--r-2xl);padding:26px 26px 22px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;opacity:0;transform:translateY(26px);transition:opacity .55s var(--ease-out), transform .55s var(--ease-pop)}
.sblock .num{font-size:var(--fs-d3);font-weight:800;letter-spacing:var(--ls-heading);line-height:var(--lh-display)}
.sblock .num .u{font-size:.5em;font-weight:700;opacity:.75;margin-left:2px}
.sblock .cap{font-size:var(--fs-300);font-weight:600;line-height:var(--lh-base)}
.sblock.done{background:linear-gradient(150deg,var(--navy-800),var(--navy-900));color:#fff;box-shadow:var(--shadow-navy)}
.sblock.done .cap{color:var(--sidebar-text)}
.sblock.now{background:var(--amber);color:var(--navy-800);box-shadow:0 14px 40px rgba(240,180,41,.3)}
.sblock.now .cap{color:rgba(22,33,92,.75)}
.sblock.next{background:transparent;border:1.5px solid rgba(22,33,92,.32);color:var(--navy-800)}
.sblock.next .cap{color:var(--ink-2)}
.seam.in .sblock{opacity:1;transform:none}
.seam.in .sblock:nth-child(2){transition-delay:.12s}
.seam.in .sblock:nth-child(3){transition-delay:.24s}
@media(min-width:981px){.seam-grid{padding-right:min(300px,26vw)}}

/* ── nagłówki sekcji (wspólny rytm) ───────────────────────── */
/* Nadnagłówki zdjęte z całej strony (MSM 2026-08-24): nagłówek niesie się
   sam. Bursztynowy blok doby przeszedł na nagłówek sekcji, żeby znak marki
   nie zniknął razem z etykietą. */
.sec-h2{position:relative}
/* ══ BURSZTYNOWY ZNACZNIK: OTWARCIE SEKCJI NA JASNYM TLE ══
   ZASADA (ustalona 2026-08-25, bo użycie było mieszane): ten pasek
   oznacza POCZĄTEK SEKCJI i nic więcej. Nie stawiamy go przy akapicie,
   przy podnagłówku ani przy pojedynczym zdaniu w treści.

   Dostają go: otwarcia sekcji na jasnym tle - .sec-h2 oraz .why-claim
   (formalnie akapit, ale pełni rolę otwarcia sekcji „dlaczego" i stoi
   w rozmiarze display, więc bez znacznika wypadał z rytmu).

   NIE dostają, świadomie:
   - pas CTA na granacie - sekcja ogłasza się zmianą tła, a bursztyn
     konkurowałby tam z przyciskiem i z wielkim zegarem 20:00,
   - podstrony dokumentów (.doc-h1) - to nie sekcje landingu, mają
     własny pasek nawigacyjny u góry,
   - nagłówek modala - modal nie jest sekcją strony,
   - podnagłówki (h3 w kartach modułów, .poz h3) - znacznik na dwóch
     poziomach hierarchii przestaje cokolwiek znaczyć.

   DWA INNE UŻYCIA tego kształtu, oba świadome - nie „naprawiać" ich
   do jednej reguły, bo niosą co innego:
   1. .dotblock - bursztynowy blok domykający H1 w hero. Kropka zdania
      i blok doby naraz, nie znacznik sekcji. Stąd rozmiar w em (skaluje
      się z pismem) i pozycja W LINII tekstu, nie nad nim.
   2. .poz .glif - trzy punktory w sekcji „dlaczego": granatowy,
      bursztynowy i sam kontur. To TRZY PROSTOKĄTY ZE ZNAKU MARKI
      rozłożone na trzy wiersze, czytane od góry jak znak. Kolor
      bursztynowy w drugim wierszu nie jest tam znacznikiem sekcji. */
.sec-h2::before,
.why-claim::before{content:"";display:block;width:26px;height:7px;border-radius:var(--r-xs);background:var(--amber);margin-bottom:22px}
.pin-head .sec-h2::before{margin-inline:auto}
.sec-h2{font-size:var(--fs-d2);font-weight:800;letter-spacing:var(--ls-display);line-height:var(--lh-display)}
.sec-h2 em{font-style:normal;color:var(--brand)}
.sec-lead{margin-top:16px;font-size:var(--fs-600);line-height:var(--lh-relaxed);color:var(--ink-2);max-width:54ch}
.sec-lead b{color:var(--ink);font-weight:700}

/* ============================================================
   PROBLEM — scroll-pinned zbieganie narzędzi (GSAP ScrollTrigger)
   Jeden najdroższy moment ruchu na całej stronie.
   ============================================================ */
.problem{padding:var(--sec-y) 0 0;position:relative;z-index:1}
.pin-outer{position:relative}
.pin-stage{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:44px 0 36px;overflow:hidden}
/* justify-content na kontenerze wewnętrznym, nie tylko na scenie: przy
   flex:1 to on wypełnia ekran, więc bez tego cała kompozycja przywierała
   do góry i pod nią zostawał pusty pas */
.pin-inner{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:0;width:100%}
/* width:100% jest konieczne: element z auto-marginesami w kolumnie flex
   przestaje się rozciągać i zjeżdża do szerokości min-content, a max-width
   w ch liczy się od 16 px kontenera, nie od wielkości nagłówka */
.pin-head{position:relative;z-index:3;text-align:center;width:100%;max-width:960px;margin:0 auto}
/* nagłówek mieści się w jednej linii na desktopie: dwie linie plus
   rozstawione etykiety robiły z tej sekcji samą przestrzeń */
.pin-head .sec-h2{font-size:var(--fs-d3)}
/* dwa akapity w JEDNEJ komórce siatki: przenikają się bez pozycjonowania
   absolutnego, więc wysokość bierze się z dłuższego z nich sama */
.pin-subs{display:grid;width:100%;max-width:720px;margin:clamp(14px,1.6vh,28px) auto 0;text-align:center;z-index:3;position:relative}
.pin-sub{grid-area:1/1;font-size:var(--fs-500);line-height:var(--lh-relaxed);color:var(--ink-2)}
.pin-sub.b{opacity:0}
.pin-sub .hi{color:var(--brand);font-weight:700}

/* flex:none, nie flex:1 — rozciągnięta scena robiła z tej sekcji pusty
   pas, po którym pływało pięć etykiet. Wysokość jest zadana, a cała
   kompozycja centruje się w pinowanym ekranie.

   ROŚNIE Z EKRANEM (2026-08-25). Było min(42vh,340px), czyli w praktyce
   340 px na każdym monitorze powyżej 810 px wysokości. Efekt: na 2560×1440
   kompozycja zajmowała 38% ekranu, a 62% było powietrzem, i sekcja czytała
   się jako pusta plansza. Zmierzone, nie oszacowane.
   Dolna granica 300 px trzyma układ na niskich oknach, górna 560 px nie
   pozwala rozjechać sceny na monitorze pionowym. */
.orbit{position:relative;flex:none;height:clamp(280px,42vh,520px);margin-top:clamp(16px,1.8vh,34px)}
.tool{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);padding:12px 16px;
  font-size:var(--fs-400);font-weight:700;color:var(--ink);
}
/* Chip pod ikonką zostaje (rytm z blokami w karcie dnia), ale nie jest
   już pustym kwadratem: w środku siedzi znak narzędzia. Ikonki są
   liniowe, jednej grubości, bez wypełnień - mają czytać się jako jeden
   zestaw, a nie pięć znalezisk z różnych bibliotek. */
.tool .glyph{
  width:20px;height:20px;border-radius:var(--r-sm);flex:none;
  background:linear-gradient(140deg,var(--tint-a),var(--tint-b));
  border:1px solid rgba(22,33,92,.16);
  display:grid;place-items:center;color:var(--brand);
}
.tool .glyph svg{width:12px;height:12px;display:block}
@media(min-width:1600px){.tool .glyph svg{width:14px;height:14px}}
/* „Czyjaś pamięć" to jedyna pozycja, która NIE jest narzędziem: kreskowana
   obwódka i znak zapytania niosą to, że tego źródła nie da się odpytać. */
.tool.head .glyph{background:var(--sunken);border-style:dashed;border-color:rgba(22,33,92,.34);color:var(--ink-3)}
/* Cel zbiegania: nie pigułka z dwoma słowami, a artefakt produktu.
   Trzy bloki doby w środku niosą to, co sekcja obiecuje w nagłówku. */
/* JASNA, nie granatowa (decyzja MSM 2026-08-25). Karta stoi na jasnej
   sekcji i jest artefaktem produktu - a produkt pokazujemy wszędzie
   indziej na jasno: karta dnia w hero, wszystkie demo modułów. Granat
   był tu jedynym wyjątkiem i czytał się jako inny produkt.
   Język jest ten sam co w .daycard: białe tło, wiersze na --sunken,
   wiersz „teraz" bursztynowy, wiersz przyszły kreskowany. Ciężar puenty
   niesie teraz rozmiar i cień, nie ciemne tło. */
.converge{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(560px,100%);
  background:var(--card);color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--r-xl);padding:22px 24px;
  box-shadow:var(--shadow-lift),0 34px 80px rgba(16,24,40,.13);opacity:0;
}
.cv-head{display:flex;align-items:center;gap:14px}
.converge .cv-t{font-size:var(--fs-d6);font-weight:800;letter-spacing:var(--ls-heading);line-height:var(--lh-snug)}
.converge .cv-s{font-size:var(--fs-200);font-weight:600;color:var(--ink-3);margin-top:3px}
.cv-blocks{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.cv-b{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:11px 14px;font-size:var(--fs-300);font-weight:700}
.cv-b .t{font-variant-numeric:tabular-nums;color:var(--ink-3);width:46px;flex:none;font-size:var(--fs-200)}
.cv-b .s{margin-left:auto;font-size:var(--fs-100);font-weight:700}
.cv-b.done{background:var(--sunken);border:1px solid var(--border)}
.cv-b.done .s{color:var(--green)}
/* Bursztyn zostaje: to jedyny sygnal „co teraz" w calej sekcji */
.cv-b.now{background:var(--amber);color:var(--navy-900);border:1px solid var(--amber)}
.cv-b.now .t{color:rgba(22,33,92,.7)}
.cv-b.now .s{color:rgba(22,33,92,.78)}
.cv-b.next{border:1px dashed rgba(0,0,0,.16)}
.cv-b.next .s{color:var(--ink-3)}
/* Na szerokim ekranie cała kompozycja idzie o stopień w górę. Nagłówek
   może wziąć --fs-d2, bo ograniczenie „mieści się w jednej linii" gryzie
   przy 1000-1200 px, a nie przy 1600+. Pigułki rosną, żeby nie czytały się
   jako okruchy na dużej płaszczyźnie. */
@media(min-width:1600px){
  .pin-head .sec-h2{font-size:var(--fs-d2)}
  .pin-subs{max-width:820px}
  .pin-sub{font-size:var(--fs-600)}
  /* Pigulka 140x54 px na ekranie 2000 px czytala sie jako okruch */
  .tool{font-size:var(--fs-600);padding:16px 22px;gap:13px;border-radius:var(--r-xl)}
  .tool .glyph{width:28px;height:28px;border-radius:8px}
  /* Puenta musi miec wage: to jedyny artefakt produktu na tym ekranie */
  .converge{width:min(760px,100%);padding:30px 32px}
  .converge .mark{width:24px;height:31px}
  .converge .cv-blocks{gap:10px;margin-top:22px}
  .converge .cv-b{font-size:var(--fs-400);padding:14px 18px}
  .converge .cv-b .t{width:58px;font-size:var(--fs-300)}
  .converge .cv-b .s{font-size:var(--fs-200)}
}
.pin-hint{text-align:center;font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3);margin-top:6px}

/* stan bez pinowania: reduced-motion albo brak GSAP.
   Ta sama treść, bez ruchu i bez sztucznej wysokości. */
.problem.static .pin-stage{min-height:0;padding:8px 0 0}
.problem.static .orbit{position:static;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.problem.static .tool{position:static;left:auto;top:auto;translate:none;transform:none !important;opacity:1 !important}
.problem.static .converge{position:static;left:auto;top:auto;translate:none;transform:none !important;opacity:1 !important;margin:26px auto 0;width:fit-content;max-width:100%}
.problem.static .pin-subs{display:block}
.problem.static .pin-sub{position:static;inset:auto;grid-area:auto}
.problem.static .pin-sub.b{opacity:1;margin-top:10px}
.problem.static .pin-hint{display:none}


/* ── przed/po, układ „przejście" (live 2026-08-24) ────────────
   Para czyta się jako przejście, nie jako dwie listy: stary sposób cofa
   się przy najechaniu, nowy wychodzi do przodu, a znacznik na osi domyka
   się jak potwierdzenie. Zapieczone przy akceptacji: znacznik kropka,
   cofnięcie starego wyraźne. */
/* Wyjątek: nad .ba leży dolna, z definicji pusta połowa pinowanej
   sceny. Pełny --sec-y dokładał do niej drugie tyle. */
.ba{padding:clamp(32px,3.5vh,52px) 0 0}
.p-head{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-bottom:16px}
.p-head span{font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.p-head .n{color:var(--brand)}
.p-rows{position:relative}
.p-rows::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:1px;background:rgba(22,33,92,.16)}
.p-row{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-bottom:16px}
.p-row::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 8px var(--page);
  background:transparent;border:1.5px solid rgba(22,33,92,.4);
  transition:background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), width var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out);
}
.p-row:hover::after{background:var(--navy-800);border-color:var(--navy-800);width:12px;height:12px}
.p-row:last-child:hover::after{background:linear-gradient(135deg,var(--gold-a),var(--gold-b));border-color:var(--gold-a)}
.p-old,.p-new{border-radius:var(--r-lg);padding:22px 24px;font-size:var(--fs-500);line-height:var(--lh-relaxed);font-weight:500;display:flex;flex-direction:column;justify-content:center;min-height:100px}
.p-old{border:1.5px dashed rgba(0,0,0,.16);color:var(--ink-3);transition:opacity var(--t-base) var(--ease-out)}
.p-row:hover .p-old{opacity:.55}
.p-old b{font-weight:800;color:var(--ink-2)}
.p-new{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-card);color:var(--ink);position:relative;padding-left:32px;transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out)}
.p-new::before{content:"";position:absolute;left:14px;top:22px;bottom:22px;width:3px;border-radius:var(--r-xs);background:var(--accent)}
.p-row:last-child .p-new::before{background:linear-gradient(180deg,var(--gold-a),var(--gold-b))}
.p-row:hover .p-new{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.p-new b{font-weight:800}
.p-lbl{display:none}
@media(max-width:860px){
  .p-head{display:none}
  .p-rows::before,.p-row::after{display:none}
  .p-row{grid-template-columns:1fr;gap:8px;margin-bottom:26px}
  .p-old,.p-new{min-height:0}
  .p-lbl{display:block;font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
  .p-new .p-lbl{color:var(--brand)}
}

/* ============================================================
   MODUŁY — jednolita rama, wzorzec Portivo
   ============================================================ */
.modules{padding:var(--sec-y) 0 0}
.mod-head{max-width:720px;margin-bottom:56px}
.modgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.mcard{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-2xl);
  box-shadow:var(--shadow-card);padding:8px;
  display:flex;flex-direction:column;min-width:0;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.c7{grid-column:span 7}.c5{grid-column:span 5}.c12{grid-column:span 12}
@media(max-width:980px){.c7,.c5,.c12{grid-column:span 12}}

/* scena demo: stała wysokość w rzędzie, mini-UI wyśrodkowane.
   ZASADA TEŁ SCEN (decyzja MSM, runda 5): wszystkie te same. */
.stage{
  border-radius:var(--r-lg);height:300px;flex:none;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:26px;overflow:hidden;
  background:linear-gradient(140deg,var(--tint-a),var(--tint-0));
}
.c12 .stage{height:240px}
.demo-ui{
  background:var(--card);border-radius:var(--r-lg);padding:18px;width:100%;max-width:400px;
  box-shadow:0 4px 12px rgba(22,33,92,.08), 0 22px 54px rgba(22,33,92,.18);
}
.c12 .demo-ui{max-width:980px}
@media(max-width:980px){.stage{height:auto;min-height:240px}}
/* Jeden cichy podpis pod siatką zamiast pięciu przerywanych plakietek
   na scenach: to ta sama klasa wizualnego szumu, którą MSM zdjął przy
   placeholderach P1/P2. Uczciwość zostaje, ramki nie. */
.mod-note{margin-top:22px;font-size:var(--fs-300);font-weight:600;color:var(--ink-3);max-width:60ch}

.mc-body{padding:20px 16px 14px;display:flex;flex-direction:column;gap:10px;flex:1}
.mc-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.mc-head h3{font-size:var(--fs-700);font-weight:800;letter-spacing:var(--ls-text)}
/* Moment doby jako pigułka, nie luźny tekst: pięć modułów układa się
   wtedy w oś dnia, którą widać jednym spojrzeniem po siatce. */
.mc-head .when{
  font-size:var(--fs-100);font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;
  white-space:nowrap;background:rgba(37,67,199,.08);border:1px solid rgba(37,67,199,.16);
  border-radius:var(--r-pill);padding:5px 11px;letter-spacing:0;
}
.mc-body .desc{font-size:var(--fs-500);line-height:var(--lh-relaxed);color:var(--ink-2)}
.mc-body .desc b{color:var(--ink);font-weight:700}
.why{display:flex;gap:10px;align-items:baseline;margin-top:auto;padding-top:12px}
.why .k{font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--amber-ink);flex:none}
.why .t{font-size:var(--fs-300);font-weight:500;color:var(--ink-2);line-height:var(--lh-base)}

.demo-ui .block{margin-bottom:8px;opacity:0;transform:translateX(-14px);transition:opacity .45s var(--ease-out), transform .45s var(--ease-out)}
.demo-ui .block:last-of-type{margin-bottom:0}
.mcard.play .demo-ui .block{opacity:1;transform:none}
.mcard.play .demo-ui .block:nth-of-type(2){transition-delay:.12s}
.mcard.play .demo-ui .block:nth-of-type(3){transition-delay:.24s}
.wipnote{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:var(--fs-100);font-weight:700;color:var(--ink-3)}
.wipnote b{color:var(--amber-ink)}
.lrow{display:flex;justify-content:space-between;font-size:var(--fs-300);font-weight:600;padding:7px 0;border-bottom:1px dashed rgba(0,0,0,.1)}
.lrow span:last-child{font-weight:800}
.hashchain{font-family:var(--mono);font-size:var(--fs-100);color:var(--ink-3);margin-top:10px;letter-spacing:0}
.sealrow{display:flex;justify-content:flex-end;margin-top:12px}
.sealpill{opacity:0;transform:scale(.6)}
.mcard.play .sealpill{animation:pillin .4s var(--ease-pop) .5s forwards}
@keyframes pillin{to{opacity:1;transform:scale(1)}}
.cnt{display:flex;justify-content:space-between;align-items:baseline}
.cnt .n{font-size:var(--fs-800);font-weight:800;letter-spacing:var(--ls-heading)}
.cnt .lbl{font-size:var(--fs-200);font-weight:700;color:var(--ink-3)}
.demo-ui .bar{margin-top:14px}
.demo-ui .bar>i.gold{background:linear-gradient(90deg,var(--gold-a),var(--gold-b))}
.weekviz{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;align-items:end;height:110px;padding-top:24px}
.day{border-radius:var(--r-sm);background:var(--accent);opacity:0;transform:scaleY(.15);transform-origin:bottom;transition:opacity .4s var(--ease-out), transform .55s var(--ease-pop);position:relative}
.mcard.play .day{opacity:1;transform:scaleY(1)}
.day.off{background:repeating-linear-gradient(-45deg, rgba(22,33,92,.12) 0 4px, transparent 4px 9px);height:100% !important}
.day .tag{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-label);color:var(--ink-3);white-space:nowrap}
.weeklbl{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:8px;font-size:var(--fs-100);font-weight:700;color:var(--ink-3);text-align:center}
.team-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:980px){.team-strip{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.team-strip{grid-template-columns:1fr}}
.trow{
  display:flex;align-items:center;gap:10px;background:var(--sunken);border:1px solid var(--border);
  border-radius:var(--r-md);padding:11px 13px;min-width:0;
  opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.mcard.play .trow{opacity:1;transform:none}
.mcard.play .trow:nth-child(2){transition-delay:.1s}
.mcard.play .trow:nth-child(3){transition-delay:.2s}
.mcard.play .trow:nth-child(4){transition-delay:.3s}
.ava{width:28px;height:28px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-size:var(--fs-100);font-weight:800;display:grid;place-items:center}
.ava.gold{background:linear-gradient(135deg,var(--gold-a),var(--gold-b))}
.trow .name{font-size:var(--fs-300);font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}

.rv{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease-out), transform .5s var(--ease-out)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   DLACZEGO EFEKTOŚ — jedna sekcja, jeden głos
   ============================================================ */
/* Jedyna sekcja na zapadniętym tle: rozdziela pas modułów od FAQ bez
   dokładania obwiedni ani nagłówka. Tło z tokenów, nie nowy kolor. */
/* Pas na zapadniętym tle: krawędź jest granicą, więc odstęp NAD nią
   jest mniejszy niż zwykły --sec-y (sama krawędź już rozdziela). */
.whysec{padding:var(--sec-in) 0;background:var(--sunken);border-top:1px solid rgba(22,33,92,.07);border-bottom:1px solid rgba(22,33,92,.07);margin-top:clamp(44px,4.5vh,68px)}
.why-claim{font-size:var(--fs-d4);font-weight:800;letter-spacing:var(--ls-display);line-height:var(--lh-snug);max-width:34ch;color:var(--ink-3)}
.why-claim strong{color:var(--ink);font-weight:800}
.why-claim strong em{font-style:normal;color:var(--brand)}
/* Odznaki zaufania stoją teraz samodzielnie, bez karty i bez akapitu
   o pochodzeniu produktu (usunięty 2026-08-24). Sekcja kończy się trzema
   kolumnami i cichym wierszem odznak, nie kolejną obwiednią karty. */
.why-badges{margin-top:48px}
.badges{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(22,33,92,.16);border-radius:var(--r-pill);padding:10px 18px;font-size:var(--fs-300);font-weight:800;color:var(--navy-800);background:var(--card)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* ── „Dlaczego", układ trzech zdań (live 2026-08-24) ──────────
   Powody są wypowiedziami, nie akapitami. Blok doby zastąpił numer
   porządkowy: numeracja nie niosła informacji, znak marki niesie.
   Zapieczona skala wypowiedzi: 1,1. */
/* wiersz ograniczony: na pełnych 1240 px zdanie odrywało się wzrokowo
   od nagłówka i para czytała się jak dwie osobne kolumny */
.lista{margin-top:64px;display:flex;flex-direction:column;max-width:1060px}
.poz{display:flex;align-items:baseline;gap:20px;padding:26px 0;border-top:1px solid rgba(22,33,92,.14)}
.poz:last-child{border-bottom:1px solid rgba(22,33,92,.14)}
.poz .glif{width:26px;height:10px;border-radius:var(--r-xs);flex:none;transition:transform var(--t-fast) var(--ease-out)}
.poz:nth-child(1) .glif{background:var(--navy-800)}
.poz:nth-child(2) .glif{background:var(--amber)}
.poz:nth-child(3) .glif{background:transparent;border:1.5px solid rgba(22,33,92,.42)}
.poz:hover .glif{transform:translateX(6px)}
.poz h3{font-size:var(--fs-d5);font-weight:800;letter-spacing:var(--ls-heading);line-height:var(--lh-snug);flex:0 1 26ch}
.poz p{font-size:var(--fs-500);line-height:var(--lh-relaxed);color:var(--ink-2);flex:1 1 26ch}
@media(max-width:780px){
  .poz{flex-wrap:wrap;gap:12px;padding:20px 0}
  .poz h3,.poz p{flex:1 1 100%}
}

/* ============================================================
   FAQ — accordion
   ============================================================ */
.faq{padding:var(--sec-y) 0 0}
/* Po pasie z własnym tłem odstęp jest mniejszy: dolny padding pasa już
   go dał, a dwa pełne sumowały się do 140 px - najszerszej dziury na
   stronie po ujednoliceniu rytmu. */
.whysec + .faq{padding-top:clamp(36px,3.8vh,56px)}
.faq-inner{display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7fr);gap:56px;align-items:start}
@media(max-width:940px){.faq-inner{grid-template-columns:1fr;gap:34px}}
.faq-aside .sec-h2{font-size:var(--fs-d4)}
.faq-aside .sec-lead{max-width:36ch}
.faq-aside .ask{margin-top:26px}
.faq-list{border-top:1px solid rgba(22,33,92,.16)}
.qa{border-bottom:1px solid rgba(22,33,92,.16)}
.qa .q{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:100%;text-align:left;padding:22px 2px;font-size:var(--fs-600);font-weight:800;letter-spacing:var(--ls-text);line-height:var(--lh-snug);transition:color var(--t-fast) var(--ease-out)}
.qa .q:hover{color:var(--brand)}
.qa .sign{position:relative;width:20px;height:20px;flex:none;margin-top:3px}
.qa .sign::before,.qa .sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--brand);border-radius:var(--r-xs)}
.qa .sign::before{width:14px;height:2px;transform:translate(-50%,-50%)}
.qa .sign::after{width:2px;height:14px;transform:translate(-50%,-50%) scaleY(1);transition:transform .3s var(--ease-out)}
.qa[data-open="true"] .sign::after{transform:translate(-50%,-50%) scaleY(0)}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out)}
.qa[data-open="true"] .a{grid-template-rows:1fr}
.qa .a-in{overflow:hidden}
.qa .a-in p{font-size:var(--fs-500);line-height:var(--lh-relaxed);color:var(--ink-2);max-width:58ch;padding-bottom:26px}
.qa .a-in p b{color:var(--ink);font-weight:700}

/* ============================================================
   CTA — pełnoszerokościowy pas + stopka wewnątrz
   ============================================================ */
.cta-band{
  position:relative;overflow:hidden;color:#fff;margin-top:var(--sec-y);
  background:linear-gradient(150deg,var(--navy-800),var(--brand));
  padding:clamp(48px,5vh,68px) 0 0;
}
/* Ta sama hairline siatka co w hero: pas zamykający jest lustrem sceny
   otwierającej, a nie płaskim gradientem (BRAND_LANDING §2.4). */
.cta-band::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
  mask-image:linear-gradient(0deg,#000 0%,transparent 88%);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 88%);
}
/* Znak w tle: „mocny" znaczy WYRAŹNIEJSZY, nie WIĘKSZY. Przy 360x470 px
   wchodził pod przyciski i przecinał linię stopki; teraz siedzi w pustym
   polu między treścią a akcjami i kończy się nad stopką. */
.cta-band .watermark{position:absolute;right:11%;top:18px;transform:rotate(8deg);width:200px;height:260px;opacity:.2;pointer-events:none}
@media(max-width:980px){.cta-band .watermark{right:4%;top:14px;width:150px;height:195px;opacity:.12}}
.pill.ok-navy{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);color:var(--green-on-navy)}
.pill.ok-navy .dot{background:var(--green-on-navy)}
.cta-pill{opacity:0;transform:scale(.6)}
.cta-band.in .cta-pill{animation:pillin .4s var(--ease-pop) .45s forwards}
/* ── CTA, układ „pieczęć" (live 2026-08-24) ───────────────────
   Oś hierarchii: godzina domknięcia dnia prowadzi kompozycję, nagłówek
   schodzi na drugi plan, akcje siadają na linii bazowej zegara.
   Wartości pokręteł zapieczone przy akceptacji: skala zegara 1,
   znak w tle „mocny". */
.cta-band .v-inner{display:grid;grid-template-columns:auto auto;justify-content:start;gap:24px 64px;align-items:end;position:relative}
.v-clock{grid-column:1 / -1;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap}
.v-clock .t{font-size:var(--fs-numeral);font-weight:800;letter-spacing:var(--ls-numeral);line-height:var(--lh-numeral);font-variant-numeric:tabular-nums}
.v-body{max-width:32ch}
.v-body h2{font-size:var(--fs-d5);font-weight:800;letter-spacing:var(--ls-heading);line-height:var(--lh-snug)}
.v-body .sub{margin-top:10px;color:var(--sidebar-text);font-size:var(--fs-400);font-weight:500}
.v-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
/* Skala tylko w tym pasie: ten sam .btn-amber w hero i w nawigacji
   zostaje bez zmian, bo tam konkuruje z innymi elementami. */
.cta-band .btn-amber{font-size:var(--fs-500);padding:10px 10px 10px 30px;gap:14px}
.cta-band .btn-amber .pod{width:38px;height:38px}
.v-actions .note{font-size:var(--fs-300);font-weight:600;color:var(--sidebar-text);max-width:28ch;line-height:var(--lh-base)}
@media(max-width:860px){
  .cta-band .v-inner{grid-template-columns:1fr;gap:26px}
  .v-actions{align-items:stretch}
}

/* ── stopka wewnątrz granatowego pasa ─────────────────────── */
.foot{position:relative;margin-top:clamp(40px,4.5vh,60px);padding:clamp(30px,3.4vh,40px) 0 clamp(26px,3vh,34px);border-top:1px solid rgba(255,255,255,.18)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:44px}
.foot-brand{max-width:36ch}
.foot-logo{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:var(--fs-500);letter-spacing:var(--ls-text)}
.foot-desc{margin-top:12px;font-size:var(--fs-400);line-height:var(--lh-relaxed);color:var(--sidebar-text);font-weight:500}
.foot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fbadge{font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--sidebar-text);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);padding:5px 11px}
.foot-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.foot-col .fh{font-size:var(--fs-400);font-weight:800;color:#fff;margin-bottom:5px}
.foot-col a,.foot-col .fmuted{font-size:var(--fs-400);font-weight:500;color:var(--sidebar-text)}
.foot-col a{transition:color var(--t-fast) var(--ease-out)}
.foot-col a:hover{color:#fff}
.foot-col .fmuted{color:var(--sidebar-muted)}
.foot-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:clamp(26px,3vh,38px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.fcopy{font-size:var(--fs-300);font-weight:600;color:var(--sidebar-muted)}
.fentity{display:flex;flex-direction:column;gap:4px;text-align:right;font-size:var(--fs-200);font-weight:500;color:var(--sidebar-muted);line-height:var(--lh-base)}
.fentity .fname{color:var(--sidebar-text);font-weight:700}
@media(max-width:980px){
  .foot-top{grid-template-columns:1fr 1fr;gap:34px}
  .foot-brand{grid-column:span 2;max-width:100%}
}
@media(max-width:560px){
  .foot-top{grid-template-columns:1fr;gap:30px}
  .foot-brand{grid-column:auto}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .fentity{text-align:left}
}

@media(max-width:980px){
  .hero{padding:130px 0 40px}
  .hero h1{max-width:100%}
  .hero-below{max-width:100%}
  .deck{position:static;width:100%;max-width:430px;transform:none;margin-top:40px}
  .hero.in .deck{transform:none}
  /* rytm na mobile schodzi automatycznie przez clamp() w --sec-y */
  .seam-grid{grid-template-columns:1fr;padding-right:0}
}
@media(max-width:560px){
  .tool{font-size:var(--fs-200);padding:9px 12px;gap:8px}
  .converge{padding:16px 18px;gap:12px}
}

/* ── prefers-reduced-motion: wszystko do stanu końcowego ──── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .hero h1 .line>span,.dotblock{transform:none}
  .hero-sub,.hero-ctas,.deck,.rv,.sblock,.demo-ui .block,.trow,.day{opacity:1;transform:none}
  .sealpill,.cta-pill{opacity:1;transform:scale(1)}
  .deck-float{animation:none}
  .dayline i{animation:none;transform:scaleX(.38)}
  /* Problem: bez pinowania i bez scruba, treść w stanie końcowym.
     Klasę .static dokłada też JS; to tutaj jest zabezpieczenie na
     wypadek wyłączonego skryptu. */
  .problem .pin-stage{min-height:0;padding:8px 0 0}
  .problem .orbit{position:static;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
  .problem .tool{position:static;translate:none;transform:none !important;opacity:1 !important}
  .problem .converge{position:static;translate:none;transform:none !important;opacity:1 !important;margin:26px auto 0;width:fit-content}
  .problem .pin-subs{display:block}
  .problem .pin-sub{position:static;inset:auto;grid-area:auto}
  .problem .pin-sub.b{opacity:1;margin-top:10px}
  .problem .pin-hint{display:none}
  /* FAQ: otwiera się natychmiast, bez animowania wiersza siatki */
  .qa .a{transition:none}
}

/* ── brak JavaScriptu: treść widoczna od razu, w stanie końcowym ──
   Wszystkie stany startowe choreografii (opacity:0, translateY(112%),
   scale(.6)) czekają na klasę, którą dokłada assets/js/efektos.js.
   Bez skryptu strona nie miała nic do pokazania: hero, szew, karta dnia
   i wszystkie .rv zostawały niewidoczne (audyt 2026-08-25).

   Klasę „js" dokłada skrypt inline w <head> index.html, PRZED pierwszym
   renderem, więc przy włączonym JS ten blok nie ma czego nadpisywać
   i nie ma mrugnięcia.

   Zestaw resetów jest ten sam co w bloku prefers-reduced-motion wyżej:
   to sprawdzony stan końcowy, przechodzący node scripts/check.mjs na
   1440 i 390 px bez poziomego scrolla. Sekcja Problem dostaje układ
   statyczny (odpowiednik klasy .static), bo bez niego pięć etykiet
   i karta zbiegania leżą jedna na drugiej w jednym punkcie: same stany
   startowe nie wystarczą, pinowanie wymaga też innego układu.

   UWAGA na granicę: to łapie wyłącznie WYŁĄCZONY JavaScript. Jeśli JS
   działa, a efektos.js padnie albo zostanie zablokowany, klasa „js"
   już jest i strona zostaje na stanach startowych. */
html:not(.js) .hero h1 .line>span,
html:not(.js) .dotblock{transform:none}
html:not(.js) .hero-sub,
html:not(.js) .hero-ctas,
html:not(.js) .deck,
html:not(.js) .rv,
html:not(.js) .sblock,
html:not(.js) .demo-ui .block,
html:not(.js) .trow,
html:not(.js) .day{opacity:1;transform:none}
html:not(.js) .sealpill,
html:not(.js) .cta-pill{opacity:1;transform:scale(1)}
html:not(.js) .problem .pin-stage{min-height:0;padding:8px 0 0}
html:not(.js) .problem .orbit{position:static;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
html:not(.js) .problem .tool{position:static;translate:none;transform:none !important;opacity:1 !important}
html:not(.js) .problem .converge{position:static;translate:none;transform:none !important;opacity:1 !important;margin:26px auto 0;width:fit-content}
html:not(.js) .problem .pin-subs{display:block}
html:not(.js) .problem .pin-sub{position:static;inset:auto;grid-area:auto}
html:not(.js) .problem .pin-sub.b{opacity:1;margin-top:10px}
html:not(.js) .problem .pin-hint{display:none}
/* FAQ bez skryptu: przycisk nie ma czego przełączyć, a pięć z sześciu
   odpowiedzi jest zwiniętych wierszem siatki 0fr. Otwieramy wszystkie na
   stałe i chowamy znak plus/minus, żeby nie obiecywał klikania.
   Świadomy kompromis: aria-expanded="false" zostaje w znacznikach i przy
   otwartej odpowiedzi mówi nieprawdę. Treść nieosiągalna jest gorsza niż
   atrybut nie na miejscu, a ten stan istnieje tylko z wyłączonym JS. */
html:not(.js) .qa .a{grid-template-rows:1fr;transition:none}
html:not(.js) .qa .sign{display:none}
html:not(.js) .qa .q{cursor:default}

/* ============================================================
   PODSTRONY DOKUMENTÓW I 404
   Ta sama tożsamość co landing: granatowy pasek u góry, jasna
   treść pod spodem, jeden krój, te same tokeny. Nie ma tu
   choreografii scrolla, bo to strony do przeczytania, nie sceny.
   ============================================================ */
.docpage{background:var(--page)}
.doc-top{background:linear-gradient(150deg,var(--navy-950) 0%,var(--navy-800) 100%);color:#fff;padding:24px 0}
.doc-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.doc-back{font-size:var(--fs-300);font-weight:700;color:var(--sidebar-text);transition:color var(--t-fast) var(--ease-out)}
.doc-back:hover{color:#fff}
.doc-main{padding:72px 0 88px}
.doc-h1{font-size:var(--fs-d2);font-weight:800;letter-spacing:var(--ls-display);line-height:var(--lh-display);max-width:20ch}
.doc-status{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:var(--fs-200);font-weight:800;padding:6px 13px;border-radius:var(--r-pill);background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber-ink)}
.doc-status .dot{width:6px;height:6px;border-radius:50%;background:var(--amber-ink);flex:none}
.doc-status.ok{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.doc-status.ok .dot{background:var(--green)}
.doc-body{margin-top:30px;max-width:62ch}
.doc-body p{font-size:var(--fs-600);line-height:var(--lh-relaxed);color:var(--ink-2)}
.doc-body p+p{margin-top:18px}
.doc-body b{color:var(--ink);font-weight:700}
.doc-body h2{font-size:var(--fs-700);font-weight:800;letter-spacing:var(--ls-text);color:var(--ink);margin-top:34px}
.doc-card{margin-top:40px;max-width:62ch;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:24px 26px}
.doc-card .k{font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--amber-ink)}
.doc-card p{margin-top:10px;font-size:var(--fs-500);line-height:var(--lh-relaxed);color:var(--ink-2)}
.doc-card a{color:var(--brand);font-weight:700}
.doc-card a:hover{color:var(--brand-hover)}
.doc-foot{border-top:1px solid rgba(22,33,92,.1);padding:26px 0 40px}
.doc-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:var(--fs-200);font-weight:600;color:var(--ink-3)}
.doc-foot .r{text-align:right;line-height:var(--lh-base)}
/* 404 */
/* Cyfra stoi nad nagłówkiem, poza .doc-body, ale reguła musi też wygrać
   z .doc-body p (17 px), gdyby kiedyś wróciła do środka */
.err-code,.doc-body p.err-code{font-size:var(--fs-numeral);font-weight:800;letter-spacing:var(--ls-numeral);line-height:var(--lh-numeral);color:rgba(22,33,92,.14);font-variant-numeric:tabular-nums;margin-bottom:6px}
.err-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@media(max-width:560px){
  .doc-main{padding:48px 0 64px}
  .doc-foot .wrap{flex-direction:column}
  .doc-foot .r{text-align:left}
}

/* dokumenty prawne: wiersz wersji, listy, odstępy między paragrafami */
.doc-meta{margin-top:14px;font-size:var(--fs-300);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.doc-body h2{font-size:var(--fs-600);font-weight:800;letter-spacing:var(--ls-text);color:var(--ink);margin-top:38px;margin-bottom:12px}
.doc-body h2+p,.doc-body h2+ul{margin-top:0}
.doc-body ul{margin-top:14px;padding-left:0;list-style:none}
.doc-body li{position:relative;padding-left:20px;font-size:var(--fs-600);line-height:var(--lh-relaxed);color:var(--ink-2)}
.doc-body li+li{margin-top:10px}
.doc-body li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:var(--r-xs);background:var(--accent);opacity:.55}
.doc-body ul+p{margin-top:18px}
.doc-body a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(37,67,199,.35)}
.doc-body a:hover{color:var(--brand-hover);text-decoration-color:currentColor}

/* wyjście z wiersza odznak na stronę o danych: link, nie kolejna odznaka,
   żeby było widać, że prowadzi dalej */
.badge-link{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-300);font-weight:800;color:var(--brand);padding:10px 4px;transition:color var(--t-fast) var(--ease-out)}
.badge-link svg{transition:transform var(--t-fast) var(--ease-out)}
.badge-link:hover{color:var(--brand-hover)}
.badge-link:hover svg{transform:translateX(3px)}

/* ── nawigacja mobilna ────────────────────────────────────── */
.nav-toggle{display:none;align-items:center;gap:9px;font-size:var(--fs-300);font-weight:800;color:#fff;padding:9px 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.32);transition:background var(--t-fast) var(--ease-out)}
.nav-toggle:hover{background:rgba(255,255,255,.08)}
.nav-burger{position:relative;width:15px;height:9px;flex:none}
.nav-burger::before,.nav-burger::after{content:"";position:absolute;left:0;width:100%;height:2px;border-radius:var(--r-xs);background:#fff;transition:transform var(--t-fast) var(--ease-out)}
.nav-burger::before{top:0}
.nav-burger::after{bottom:0}
.topnav[data-open="true"] .nav-burger::before{transform:translateY(3.5px) rotate(45deg)}
.topnav[data-open="true"] .nav-burger::after{transform:translateY(-3.5px) rotate(-45deg)}
@media(max-width:920px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    display:flex;flex-direction:column;gap:0;position:absolute;top:100%;right:28px;left:28px;margin-top:14px;
    background:rgba(13,18,51,.96);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-xl);padding:6px;
    box-shadow:0 24px 60px rgba(13,18,51,.45);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), visibility var(--t-fast);
  }
  .topnav[data-open="true"] .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a{padding:13px 14px;border-radius:var(--r-md);font-size:var(--fs-400);color:#fff}
  .nav-links a:hover{background:rgba(255,255,255,.08)}
}
@media(max-width:560px){.nav-cta{display:none}}

/* ── modal „Umów demo" i formularz ────────────────────────────
   Dialog otwierają wszystkie pięć przycisków „Umów demo". Ten sam
   formularz stoi też wprost na /kontakt/ (klasy .fdemo bez modala).
   Widoczność sterujemy atrybutem data-open, a nie [hidden]: display:none
   zabiłoby przejście, a visibility:hidden wyjmuje dialog z kolejności
   tabulatora i z drzewa dostępności, gdy jest zamknięty. */
.modal-scrim{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;
  background:rgba(13,18,51,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  /* visibility przełącza się SKOKOWO, nie przejściem: przy
     transition:visibility przeglądarka trzyma starą wartość przez cały
     czas trwania przejścia, więc panel po otwarciu jest jeszcze
     „hidden" i focus() na nim jest po cichu ignorowany (dialog otwierał
     się bez fokusu). Zamykanie dostaje opóźnienie równe zanikaniu,
     żeby panel nie znikał w pierwszej klatce. */
  transition:opacity var(--t-fast) var(--ease-out), visibility 0s linear var(--t-fast);
}
.modal-scrim[data-open="true"]{
  opacity:1;visibility:visible;
  transition:opacity var(--t-fast) var(--ease-out), visibility 0s;
}
.modal-panel{
  position:relative;width:100%;max-width:496px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--card);border-radius:var(--r-2xl);box-shadow:0 30px 80px rgba(13,18,51,.4);
  padding:30px 32px 32px;
  transform:translateY(12px) scale(.985);
  transition:transform var(--t-base) var(--ease-out);
}
.modal-scrim[data-open="true"] .modal-panel{transform:none}
.modal-panel:focus{outline:none}
.modal-panel:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
/* blokada przewijania strony pod dialogiem: bez niej kółko myszy
   przewija landing za panelem i pinowana sekcja Problem rusza w tle */
html.modal-otwarty{overflow:hidden}
.modal-x{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--ink-3);
  transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.modal-x:hover{background:var(--sunken);color:var(--ink)}
.modal-kicker{font-size:var(--fs-100);font-weight:800;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--amber-ink)}
.modal-h2{margin-top:9px;font-size:var(--fs-800);font-weight:800;letter-spacing:var(--ls-display);line-height:var(--lh-display);padding-right:34px}
.modal-lead{margin-top:11px;font-size:var(--fs-400);line-height:var(--lh-relaxed);color:var(--ink-2)}
.modal-panel .fdemo{margin-top:22px}

/* formularz wbudowany w stronę /kontakt/ */
.doc-form{margin-top:26px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:26px 28px}
.doc-form .fdemo{margin-top:0}

.fpole+.fpole{margin-top:15px}
.fpole label{display:block;font-size:var(--fs-300);font-weight:800;letter-spacing:var(--ls-text);color:var(--ink);margin-bottom:6px}
.fopc{font-weight:600;color:var(--ink-3);letter-spacing:0}
.fpole input,.fpole textarea{
  display:block;width:100%;font:inherit;font-size:var(--fs-400);color:var(--ink);
  background:var(--page);border:1px solid rgba(22,33,92,.16);border-radius:var(--r-md);padding:11px 14px;
  transition:border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.fpole textarea{resize:vertical;min-height:76px;line-height:var(--lh-base)}
.fpole input:hover,.fpole textarea:hover{border-color:rgba(22,33,92,.3)}
.fpole input:focus,.fpole textarea:focus{outline:none;background:var(--card);border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,67,199,.14)}
.fpole input[aria-invalid="true"],.fpole textarea[aria-invalid="true"]{border-color:var(--gold-a);background:var(--amber-bg)}
/* Bez czerwieni (zasada §6): błąd pola niesie bursztyn i treść komunikatu,
   nie kolor alarmowy. */
.fblad{display:block;margin-top:6px;font-size:var(--fs-200);font-weight:700;line-height:var(--lh-base);color:var(--amber-ink)}
.fhint{display:block;margin-top:6px;font-size:var(--fs-200);line-height:var(--lh-base);color:var(--ink-3)}

/* pułapka na boty: poza ekranem POZYCJĄ, nie display:none - patrz
   scripts/formularz.mjs */
.fpulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fstan{margin-top:16px;font-size:var(--fs-300);font-weight:700;line-height:var(--lh-relaxed);border-radius:var(--r-md);padding:11px 14px}
.fstan.zle{background:var(--amber-bg);border:1px solid var(--amber-border);color:var(--amber-ink)}

.fstopka{margin-top:18px}
.fwyslij{justify-content:space-between;width:100%}
.fwyslij[disabled]{opacity:.6;cursor:progress}
.fnota{margin-top:12px;font-size:var(--fs-200);line-height:var(--lh-relaxed);color:var(--ink-3)}

.fsukces{padding:6px 0 2px}
.fsukces .fptaszek{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-pill);background:var(--green-bg);border:1px solid var(--green-border)}
.fsukces h3{margin-top:14px;font-size:var(--fs-700);font-weight:800;letter-spacing:var(--ls-heading)}
.fsukces h3:focus{outline:none}
.fsukces p{margin-top:9px;font-size:var(--fs-400);line-height:var(--lh-relaxed);color:var(--ink-2)}
.fsukces a{color:var(--brand);font-weight:700}
.doc-form .fsukces,.modal-panel .fsukces{margin-top:4px}

@media(max-width:560px){
  .modal-scrim{padding:12px;place-items:end center}
  .modal-panel{padding:26px 20px 24px;max-height:calc(100vh - 24px)}
  .modal-h2{font-size:var(--fs-700)}
  .doc-form{padding:22px 18px;border-radius:var(--r-xl)}
}

@media(prefers-reduced-motion:reduce){
  .modal-scrim,.modal-panel{transition:none}
  .modal-scrim[data-open="false"] .modal-panel,.modal-panel{transform:none}
}