/* =========================================================================
   Vendispace — style.css
   Design system: "Relate" (jasny, Linear/Attio). Zero-build, self-hosted fonts.
   Zasady: akcent #173350 (granat logotypu) tylko tekst/border/focus; jedyny wypełniony przycisk =
   gradient (rejestracja); Inter max 600; karty 8px lub 40px; light-locked.
   ========================================================================= */

/* ---------- Fonty (self-hosted woff2, latin + latin-ext) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400.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+2074,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:400;font-display:swap;src:url('/assets/fonts/inter-latinext-400.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}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500.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+2074,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:500;font-display:swap;src:url('/assets/fonts/inter-latinext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600.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+2074,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:600;font-display:swap;src:url('/assets/fonts/inter-latinext-600.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/robotomono-latin-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/robotomono-latinext-500.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/robotomono-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/robotomono-latinext-700.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokeny ---------- */
:root{
  /* Kolory (z design systemu) */
  --bg:#fcfcfc; --bg-wash:#eef1f6; --surface:#ffffff;
  --ink:#020520; --ink-2:#14141e; --text:#374151; --muted:#696a72; --faint:#95959b;
  --line:#e3e6ee; --line-strong:#cfcfcf;
  --accent:#173350;            /* granat logotypu — wyłącznie tekst/border/focus */
  --action:#0f1f3d;            /* akcja outlined + logo */
  --grad:linear-gradient(180deg,#234f79 0%,#173350 100%); /* jedyny wypełniony CTA */
  --emerald:#16ca2e; --coral:#f26052; --amber:#ffa64d; --azure:#0099ff;

  /* Typografia */
  --font-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Promienie (8 lub 40 dla kart; 12 przyciski; 100/50 pill; 16 obrazy) */
  --r-badge:4px; --r-card:8px; --r-btn:12px; --r-input:12px; --r-img:16px;
  --r-cardlg:40px; --r-pill:100px; --r-ghost:50px;

  /* Cienie */
  --sh-card:rgba(0,0,0,.10) 0 0 4px -2px;
  --sh-soft:rgba(0,0,0,.06) 0 1px 2px,rgba(0,0,0,.05) 0 8px 24px -12px;
  --sh-feature:rgba(0,0,0,.082) 0 .36px 1.81px -1.42px,rgba(0,0,0,.07) 0 1.37px 6.87px -2.83px,rgba(0,0,0,.05) 0 6px 30px -4.25px;
  --sh-focus:0 0 0 3px rgba(23,51,80,.28);

  /* Layout */
  --maxw:1200px; --gut:24px; --section:96px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(h1,h2,h3,h4){color:var(--ink-2);font-weight:600;line-height:1.12;letter-spacing:-.02em}
strong{font-weight:600;color:var(--ink-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.no-scroll{overflow:hidden}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--section)}
.section--wash{background:var(--bg-wash)}
.section--tight{padding-block:64px}
main{display:block}
[id]{scroll-margin-top:88px}

/* ---------- Typografia pomocnicza ---------- */
.display{font-size:clamp(2.2rem,1.2rem + 4vw,3.5rem);line-height:1.05;letter-spacing:-.033em;color:var(--ink);font-weight:600}
h2{font-size:clamp(1.7rem,1.1rem + 2.6vw,2.5rem);letter-spacing:-.028em}
h3{font-size:clamp(1.15rem,1rem + .7vw,1.4rem);letter-spacing:-.02em}
.lead{font-size:clamp(1.05rem,1rem + .5vw,1.22rem);line-height:1.55;color:var(--muted)}
.mono{font-family:var(--font-mono);font-weight:500;font-feature-settings:'tnum' 1}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--accent);margin-bottom:14px}
.section-head{max-width:66ch;margin-inline:auto;text-align:center;margin-bottom:52px}
.section-head .section-sub{margin-top:16px;font-size:clamp(1rem,.97rem + .3vw,1.12rem);color:var(--muted)}
.text-center{text-align:center}

/* ---------- Ikony ---------- */
.icon{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;vertical-align:-.18em}
.icon-sm{width:1em;height:1em}
.icon-lg{width:24px;height:24px}

/* ---------- Przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:600;font-size:.98rem;line-height:1;white-space:nowrap;
  padding:14px 20px;border-radius:var(--r-btn);
  transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease;
}
.btn .icon{width:1.05em;height:1.05em}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:16px 26px;font-size:1.02rem}
/* Jedyny wypełniony przycisk = rejestracja */
.btn-primary{background:var(--grad);color:#fff;box-shadow:rgba(23,51,80,.30) 0 8px 24px -12px}
.btn-primary:hover{box-shadow:rgba(23,51,80,.40) 0 12px 30px -12px;transform:translateY(-1px)}
.btn-primary .icon{transition:transform .2s ease}
.btn-primary:hover .icon{transform:translateX(3px)}
/* Akcja outlined (logowanie itp.) */
.btn-outline{background:rgba(255,255,255,.85);color:var(--action);border:1px solid var(--action)}
.btn-outline:hover{background:#fff;box-shadow:var(--sh-card)}
/* Ghost pill (hero drugorzędne) */
.btn-ghost{background:var(--bg);color:var(--action);border:1px solid rgba(23,51,80,.3);border-radius:var(--r-ghost);padding:13px 26px}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{display:flex;width:100%}

/* ---------- Nagłówek / nawigacja ---------- */
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:#fff;color:var(--action);padding:10px 16px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,252,252,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s ease,background-color .2s ease}
.site-header.is-scrolled{border-bottom-color:var(--line);background:rgba(252,252,252,.92)}
.nav{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand-logo{height:26px;width:auto}
.nav-menu{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{display:inline-block;padding:8px 12px;border-radius:var(--r-pill);font-size:.95rem;font-weight:500;color:var(--slate,#374151);transition:background-color .15s ease,color .15s ease}
.nav-links a:hover{background:var(--bg-wash);color:var(--ink-2)}
.nav-links a.is-current{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:10px;color:var(--action)}
.nav-toggle .icon{width:24px;height:24px}
.nav-toggle .ic-x{display:none}
.site-header.nav-open .nav-toggle .ic-x{display:block}
.site-header.nav-open .nav-toggle .ic-menu{display:none}

/* Przełącznik języka */
.lang-switcher{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;border-radius:var(--r-pill);font-size:.78rem;font-weight:600;color:var(--muted)}
.lang-btn.active{background:var(--bg-wash);color:var(--action)}
.lang-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.lang-btn--flag{min-width:0;padding:0 7px}
.lang-btn--flag img{width:22px;height:22px;display:block}
a.lang-btn--flag:hover{background:var(--bg-wash)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:clip;background:var(--bg);padding-top:64px;padding-bottom:72px}
.hero-wash{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 88% at 50% -12%,#dbe4ef 0%,#eef2f7 34%,rgba(238,241,246,.4) 62%,var(--bg) 82%)}
.hero-inner{position:relative;z-index:1;max-width:900px;margin-inline:auto;text-align:center}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:rgba(255,255,255,.7);font-size:.82rem;font-weight:500;color:var(--slate,#374151);margin-bottom:26px}
.badge .icon{color:var(--accent)}
.hero-sub{margin:22px auto 0;max-width:60ch;font-size:clamp(1.05rem,1rem + .55vw,1.28rem);line-height:1.55;color:var(--muted)}
.hero-disarm{margin:22px auto 0;max-width:52ch;font-size:1.05rem;font-weight:500;color:var(--ink-2);padding:12px 18px;border-left:3px solid var(--accent);background:rgba(238,241,246,.75);border-radius:0 8px 8px 0;text-align:left}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.microcopy{margin-top:16px;font-size:.9rem;color:var(--muted)}
/* Hero dwukolumnowy (grafika po prawej w karcie, karuzela integracji u dołu) */
.hero--split .hero-inner{max-width:var(--maxw);display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4.5vw,60px);align-items:center;text-align:left}
.hero--split .hero-sub{margin-inline:0}
.hero--split .hero-cta{justify-content:flex-start}
.hero--split .hero-art{margin:0;max-width:none}
.hero--split .hero-art img{border-radius:var(--r-img);box-shadow:rgba(20,40,90,.18) 0 34px 64px -32px,rgba(0,0,0,.05) 0 2px 8px}
@media (max-width:920px){
  .hero--split .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero--split .hero-sub{margin-inline:auto}
  .hero--split .hero-cta{justify-content:center}
  .hero--split .hero-art{max-width:520px;margin:34px auto 0}
}
.hero-shot{position:relative;z-index:1;margin-top:52px}

/* Pasek zaufania (pod hero) */
/* Kompaktowa sekcja-pasek pod hero (karuzela integracji) */
.section--band{padding-block:40px;border-block:1px solid var(--line)}
.section--band .section-head{margin-bottom:26px}
.section--band h2{font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem)}

.trust-band{background:var(--bg);border-block:1px solid var(--line)}
.trust-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;padding-block:20px;font-size:.86rem;color:var(--muted)}
.trust-strip .ti{display:inline-flex;align-items:center;gap:7px}
.trust-strip .ti .icon{color:var(--accent);width:16px;height:16px}
.trust-strip .sep{width:1px;height:14px;background:var(--line-strong);opacity:.7}

/* ---------- Zrzut ekranu (placeholder, do podmiany) ---------- */
.shot{aspect-ratio:var(--ar,16/10);width:100%;background:
  linear-gradient(var(--bg-wash),var(--bg-wash)) padding-box;
  border:1px dashed #c2cad6;border-radius:var(--r-img);
  display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:24px;color:var(--muted)}
.shot .icon{width:30px;height:30px;color:#9aa6bb}
.shot-name{font-weight:600;color:var(--action);font-size:.98rem;max-width:34ch}
.shot-hint{font-size:.78rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Karta feature (duża, 40px) ---------- */
.feature-card{background:var(--surface);border-radius:var(--r-cardlg);box-shadow:var(--sh-feature);padding:clamp(20px,3vw,52px)}

/* ---------- Pokaz produktu (dwa widoki) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pane{display:flex;flex-direction:column}
.pane .shot{margin-top:auto}
.pane h3{display:flex;align-items:center;gap:9px;font-size:1.05rem;margin-bottom:14px}
.pane h3 .icon{color:var(--accent);width:20px;height:20px}
.pane h3 .pane-ic{width:56px;height:56px;border-radius:14px;flex-shrink:0}
.pane p{color:var(--muted);font-size:.96rem;margin-bottom:16px}

/* ---------- Kroki ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px}
.step-ic{display:block;width:72px;height:72px;margin:-6px 0 10px -6px}
.step h3{margin-bottom:8px}
.step p{color:var(--muted);font-size:.95rem}
.steps-note{margin-top:24px;text-align:center;color:var(--muted);font-size:.95rem}

/* ---------- Siatka funkcji "a do tego" ---------- */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;box-shadow:var(--sh-card)}
.gcard--feature{box-shadow:var(--sh-feature)}
/* Cennik: ciaśniejsze sekcje (hero ↔ tabela ↔ funkcje) */
#cennik{padding-block:40px 48px}
#wszystkie-funkcje{padding-top:56px}
/* Cennik: wszystkie funkcje w każdym planie — nieregularna mozaika 6-kolumnowa
   (jak sekcja korzyści): 3+3 / 4+2 / 3+3 / 6; najszerszy kafel = najwięcej chipów */
.allfeat{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;max-width:1180px;margin-inline:auto}
.afgroup{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:24px}
.afgroup--w2{grid-column:span 2}
.afgroup--w3{grid-column:span 3}
.afgroup--w4{grid-column:span 4}
.afgroup--w6{grid-column:span 6;flex-direction:row;align-items:flex-start;gap:clamp(24px,4vw,56px)}
.afgroup-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.afgroup-head .gcard-ic{margin-bottom:0;flex-shrink:0}
.afgroup-head h3{font-size:1.02rem}
.afgroup--w6 .afgroup-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:0;flex:0 0 min(240px,28%)}
.afgroup--w6 .afgroup-head h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.3rem)}
.afgroup--w6 .afchips{flex:1}
.afchips{display:flex;flex-wrap:wrap;gap:8px}
.js .allfeat>.fade-up:nth-child(even){transition-delay:.07s}
@media (max-width:1024px){
  .allfeat{grid-template-columns:1fr 1fr}
  .afgroup--w2,.afgroup--w3,.afgroup--w4{grid-column:span 1}
  .afgroup--w6{grid-column:span 2}
}
@media (max-width:700px){
  .allfeat{grid-template-columns:1fr;gap:16px}
  .afgroup--w6{grid-column:span 1;flex-direction:column;align-items:stretch}
  .afgroup--w6 .afgroup-head{flex-direction:row;align-items:center;margin-bottom:16px;flex:none}
}
.gcard-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--bg-wash);color:var(--accent);margin-bottom:14px}
.gcard-ic .icon{width:20px;height:20px}
.gcard-ic--img{width:56px;height:56px;background:none;border-radius:14px;overflow:hidden}
.gcard-ic--img img{width:100%;height:100%;display:block}
/* Kafle korzyści — mozaika 6-kolumnowa (4+2 / 3+3 / 3+3 / 6); kafel otwiera winieta „artefaktu z panelu” */
.benefits{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px;box-shadow:var(--sh-feature)}
.bcard--w2{grid-column:span 2}
.bcard--w3{grid-column:span 3}
.bcard--w4{grid-column:span 4}
.bcard--w6{grid-column:span 6;flex-direction:row;align-items:center;gap:clamp(28px,4vw,64px)}
.bcard h3{font-size:1.08rem;letter-spacing:-.02em;margin-bottom:8px}
.bcard p{color:var(--muted);font-size:.93rem;max-width:75ch}
.bcard--w4 h3,.bcard--w6 h3{font-size:clamp(1.12rem,1.02rem + .5vw,1.35rem)}
.bcard--w4 p,.bcard--w6 p{font-size:.98rem}
.bcard--w6 .bcard-copy{flex:1}
.bcard--w6 .bviz{order:2;flex:0 0 min(360px,36%);margin:0;min-height:0}
/* Winiety: Roboto Mono, drobne, dekoracyjne (aria-hidden) */
.bviz{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:48px;margin-bottom:18px;font-family:var(--font-mono);font-weight:500;font-size:.72rem;color:var(--text)}
.bviz svg{width:100%;height:auto;display:block}
.vchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);white-space:nowrap}
.vchip b{font-weight:500;color:var(--faint);margin-left:4px}
.vdot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.vdot--ok{background:var(--emerald)}
.vdot--amber{background:var(--amber)}
/* łącznik etapów: strzałka + opcjonalna etykieta (data-l) */
.vlink{position:relative;flex:none;width:30px;height:1px;background:var(--line-strong)}
.vlink::after{content:'';position:absolute;right:-1px;top:-3px;border-block:3.5px solid transparent;border-left:5px solid var(--line-strong)}
.vlink[data-l]::before{content:attr(data-l);position:absolute;left:50%;top:-15px;transform:translateX(-50%);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
/* czynności wypadające z procesu */
.vtask{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:var(--bg);border:1px dashed var(--line-strong);border-radius:var(--r-pill);color:var(--faint);white-space:nowrap}
.vtask::after{content:'✕';color:var(--coral);font-size:.66rem}
/* oś doby: zamówienia spływają też w nocy */
.bviz--night{flex-wrap:nowrap;gap:10px}
.vax{color:var(--faint);font-size:.66rem;flex:none}
.vtrack{position:relative;flex:1;height:36px}
.vtrack::before{content:'';position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--line-strong)}
.vtrack::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:4px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/12))}
.vtrack .vdot{position:absolute;bottom:6px;transform:translateX(-50%)}
.vtrack .vdot::after{content:attr(data-t);position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:.66rem;color:var(--muted);white-space:nowrap}
/* nitka wątku na karcie klienta */
.bviz--crm{position:relative;flex-direction:column;align-items:stretch;gap:0}
.bviz--crm::before{content:'';position:absolute;left:3px;top:14px;bottom:14px;width:1px;background:var(--line-strong)}
.vrow{position:relative;display:flex;align-items:center;gap:10px;padding-block:5px;color:var(--muted)}
/* puls świeżego statusu */
@media (prefers-reduced-motion:no-preference){.vdot--pulse{animation:vpulse 2.2s ease-out infinite}}
@keyframes vpulse{0%{box-shadow:0 0 0 0 rgba(22,202,46,.4)}70%{box-shadow:0 0 0 7px rgba(22,202,46,0)}100%{box-shadow:0 0 0 0 rgba(22,202,46,0)}}
.js .benefits>.fade-up:nth-child(even){transition-delay:.07s}
@media (max-width:1024px){
  .benefits{grid-template-columns:1fr 1fr}
  .bcard--w2,.bcard--w3,.bcard--w4{grid-column:span 1}
  .bcard--w6{grid-column:span 2}
}
@media (max-width:700px){
  .benefits{grid-template-columns:1fr;gap:16px}
  .bcard--w6{grid-column:span 1;flex-direction:column;align-items:stretch}
  .bcard--w6 .bviz{order:0;flex:none;margin-bottom:18px;max-width:360px}
}
@media (max-width:640px){.bcard{padding:22px 20px}.vchip,.vtask{white-space:normal}}
.gcard-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gcard-head .gcard-ic{margin-bottom:0;flex-shrink:0}
.gcard-head h3{margin-bottom:0}
/* Intro sekcji: nagłówek po lewej, ilustracja po prawej; multiply wtapia białe tło w --bg */
.section-art{display:block;height:auto;mix-blend-mode:multiply}
/* Wtapianie krawędzi grafiki w tło sekcji: miękka maska zanikająca na brzegach */
.section-art--blend{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-composite:intersect}
.section-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;margin-bottom:44px}
.section-intro .section-head{text-align:left;max-width:none;margin:0}
.section-intro .section-art{width:min(420px,100%);justify-self:center}
/* Wariant odwrócony: ilustracja po lewej, nagłówek po prawej (desktop) */
.section-intro--rev{grid-template-columns:.85fr 1.15fr}
/* 340px przy proporcji 922:942 ≈ ta sama wysokość (~347px), co ilustracja CRM (420px, 930:769) */
.section-intro--rev .section-art{width:min(340px,100%)}
.section-intro--rev .section-head{grid-column:2;grid-row:1}
.section-intro--rev .section-art{grid-column:1;grid-row:1}
.gcard h3{font-size:1.02rem;margin-bottom:8px}
.gcard p{font-size:.93rem;color:var(--muted)}

/* ---------- Dopasowalność ---------- */
.fit{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.fit-list{display:grid;gap:16px}
.fit-item{display:flex;gap:14px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.fit-item .icon{color:var(--accent);width:22px;height:22px;flex:none;margin-top:2px}
.fit-item h3{font-size:1rem;margin-bottom:4px}
.fit-item p{font-size:.93rem;color:var(--muted)}
.fit-close{margin-top:26px;font-size:1.05rem;color:var(--ink-2);font-weight:500;max-width:56ch}

/* ---------- Social proof ---------- */
.proof{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-cardlg);box-shadow:var(--sh-soft);padding:clamp(28px,4vw,56px);text-align:center;max-width:900px;margin-inline:auto}
.proof-frame{border:1px dashed #c2cad6;border-radius:var(--r-img);padding:26px;margin-top:22px;color:var(--muted);background:var(--bg-wash)}
.proof-note{font-size:.82rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}

/* ---------- Cennik ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-cardlg);padding:32px 28px}
.plan--free{border-color:var(--accent);box-shadow:var(--sh-feature);position:relative}
.plan-tag{position:absolute;top:-12px;left:28px;background:var(--grad);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:5px 12px;border-radius:var(--r-pill)}
.plan-name{font-size:1.05rem;font-weight:600;color:var(--ink-2)}
.plan-price{margin:14px 0 4px;font-family:var(--font-mono);font-weight:700;font-size:2.4rem;letter-spacing:-.04em;color:var(--ink)}
.plan-price small{font-family:var(--font-sans);font-size:.9rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan-for{color:var(--muted);font-size:.9rem;min-height:2.6em}
.plan-limits{display:grid;gap:10px;margin:20px 0 24px;padding-top:20px;border-top:1px solid var(--line)}
.plan-limits li{display:flex;align-items:flex-start;gap:9px;font-size:.93rem;color:var(--text)}
.plan-limits .icon{color:var(--emerald);width:18px;height:18px;flex:none;margin-top:2px}
.plan-limits .no .icon{color:var(--faint)}
.plan-limits .mono{color:var(--ink-2)}
.plan .btn{margin-top:auto}
.billing-toggle{display:flex;gap:2px;width:max-content;margin:0 auto 32px;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff}
.bt-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 18px;border-radius:var(--r-pill);font-size:.88rem;font-weight:600;color:var(--muted);transition:background-color .15s ease,color .15s ease}
.bt-btn.is-active{background:var(--bg-wash);color:var(--action)}
.bt-save{font-size:.7rem;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:var(--r-pill);background:var(--grad);color:#fff}
.plan-year-note{margin-top:2px;font-size:.82rem;color:var(--muted)}
/* Cennik: tabela porównawcza planów */
.pt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pricing-table{width:100%;min-width:840px;border-collapse:separate;border-spacing:0;text-align:left}
.pt-col-feature{width:31%}
.pt-col-plan{width:23%}
.pricing-table thead th{position:relative;height:1px;padding:56px 20px 24px;vertical-align:top;font-weight:400}
.pricing-table thead th+th{border-left:1px solid var(--line)}
.pricing-table thead td{position:sticky;left:0;z-index:2;background:var(--bg)}
.pt-corner{padding:0 20px 22px;vertical-align:bottom}
.pt-corner-art{display:block;width:100%;max-width:200px;height:auto;margin-inline:auto}
.pt-head{display:flex;flex-direction:column;height:100%}
.pt-head .btn{margin-top:auto;width:100%}
.pricing-table .plan-tag{top:16px;left:20px}
.pricing-table .plan-price{margin:10px 0 2px;font-size:1.9rem}
.pricing-table .plan-for{margin:4px 0 20px;min-height:0}
.pricing-table .plan-year-note{margin:6px 0 0}
.pricing-table tbody th,.pricing-table tbody td{border-top:1px solid var(--line);padding:11px 20px;font-size:.92rem}
.pricing-table tbody td{border-left:1px solid var(--line);text-align:center;color:var(--text)}
.pricing-table tbody th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--bg);font-weight:500;color:var(--text)}
.pricing-table tbody td .mono{color:var(--ink-2)}
.pricing-table tbody td .icon{display:block;margin-inline:auto;width:18px;height:18px;color:var(--emerald)}
.pricing-table tbody td.no .icon{color:var(--faint)}
.pricing-table tbody tr:last-child th,.pricing-table tbody tr:last-child td{border-bottom:1px solid var(--line)}
.pt-group th{background:var(--bg-wash);padding:13px 20px;font-size:.85rem;font-weight:600;letter-spacing:.02em;color:var(--ink-2)}
.pt-group th span{display:inline-block;position:sticky;left:20px}
.pt-plan--free{box-shadow:inset 0 3px 0 var(--accent)}
.pricing-note{margin-top:28px;max-width:820px;margin-inline:auto;text-align:center;color:var(--muted);font-size:.93rem}
.pricing-note--tight{margin-top:8px}
.pricing-intro{max-width:70ch;margin-inline:auto;text-align:center;color:var(--muted);margin-bottom:40px}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-weight:600;color:var(--ink-2);font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{color:var(--accent);transition:transform .2s ease;flex:none}
.faq-item[open] summary .icon{transform:rotate(180deg)}
.faq-a{padding:0 22px 22px;color:var(--muted);font-size:.97rem;line-height:1.6}
.faq-a p+p{margin-top:10px}

/* ---------- Finalne CTA ---------- */
.final{text-align:center}
.final .container{max-width:760px}
.final h2{margin-bottom:14px}
.final .lead{color:var(--muted);margin-bottom:26px}
.final-alt{margin-top:20px;font-size:.95rem;color:var(--muted)}
.final-alt a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* ---------- Stopka ---------- */
.site-footer{background:var(--action);padding-block:56px 28px;color:rgba(255,255,255,.62)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px}
.footer-brand .brand-logo{height:24px;margin-bottom:14px;filter:brightness(0) invert(1)}
.footer-brand p{font-size:.92rem;max-width:34ch}
.footer-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.92);margin-bottom:14px;font-weight:600}
.footer-col ul{display:grid;gap:9px}
.footer-col a,.footer-col li{font-size:.93rem;color:rgba(255,255,255,.62)}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem}
.footer-bottom a:hover{color:#fff}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:16px}

/* ---------- Formularz kontaktowy ---------- */
.contact-layout{display:grid;grid-template-columns:1fr 360px;gap:clamp(28px,4vw,56px);align-items:center;max-width:1080px;margin-inline:auto}
.contact-art{width:100%;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(110% 110% at 0 0,transparent 0,rgba(0,0,0,.5) 16%,#000 38%);
  mask-image:radial-gradient(110% 110% at 0 0,transparent 0,rgba(0,0,0,.5) 16%,#000 38%)}
.contact-form{max-width:720px;margin-inline:auto}
.contact-layout .contact-form{max-width:none;margin:0}
@media (max-width:820px){
  .contact-layout{grid-template-columns:1fr}
  .contact-art{max-width:300px;margin-inline:auto}
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:grid;gap:6px}
.form-field--full{grid-column:1/-1}
.form-field label{font-size:.9rem;font-weight:500;color:var(--ink-2)}
.form-field input,.form-field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--surface);font:inherit;font-size:.98rem;color:var(--text)}
.form-field input:focus,.form-field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form-field textarea{min-height:130px;resize:vertical}
.req{color:var(--accent)}
.form-actions{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.form-note{font-size:.83rem;color:var(--muted);max-width:44ch}
.form-note a{text-decoration:underline;text-underline-offset:2px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{max-width:720px;margin:0 auto 22px;padding:12px 16px;border-radius:10px;font-size:.95rem}
.form-status--ok{background:#e7f5ec;color:#14532d;border:1px solid #bbe3c9}
.form-status--err{background:#fdecec;color:#7f1d1d;border:1px solid #f5c6c6}
.form-status--err a{text-decoration:underline}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* Notka cookies → baner zgody w inc/consent.php (własne style, bo landing
   palarni nie ładuje tego arkusza). */

/* ---------- Status badge ---------- */
.status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:2px 8px;border-radius:var(--r-badge)}
.status--new{color:var(--azure);background:rgba(0,153,255,.1)}
.status--paid{color:var(--emerald);background:rgba(22,202,46,.1)}
.status--sent{color:var(--action);background:rgba(15,31,61,.08)}

/* ---------- Proza (podstrony prawne) ---------- */
.prose{max-width:760px;margin-inline:auto}
.prose h1{font-size:clamp(1.8rem,1.3rem + 2vw,2.4rem);margin-bottom:8px}
.prose .updated{color:var(--faint);font-size:.85rem;margin-bottom:36px}
.prose h2{font-size:1.3rem;margin:36px 0 12px;letter-spacing:-.01em}
.prose h3{font-size:1.05rem;margin:24px 0 8px}
.prose p{margin-bottom:14px;color:var(--text)}
.prose ul,.prose ol{margin:0 0 16px 22px;color:var(--text)}
.prose ul li{list-style:disc;margin-bottom:6px}
.prose ol li{list-style:decimal;margin-bottom:6px}
.prose a{color:var(--accent);text-decoration:underline}
.legal-flag{background:#fff7ed;border:1px solid var(--amber);border-radius:var(--r-card);padding:14px 16px;font-size:.9rem;color:#8a5a1a;margin:20px 0}

/* ---------- Reveal (progresywne, guard .js) ---------- */
.js .fade-up{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
/* Warianty kierunkowe (przed .visible: remis specyficzności rozstrzyga kolejność) */
.js .fade-up.from-left{transform:translateX(-48px)}
.js .fade-up.from-right{transform:translateX(48px)}
.js .fade-up.visible{opacity:1;transform:none}

/* ---------- Utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mt-cta{margin-top:44px;text-align:center}

/* ============ Responsive ============ */
@media (max-width:920px){
  :root{--section:72px}
  .nav-toggle{display:inline-flex;order:3}
  .nav-menu{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:#fff;border-bottom:1px solid var(--line);padding:16px var(--gut) 24px;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .2s ease,opacity .2s ease,visibility .2s;box-shadow:var(--sh-soft)}
  .site-header.nav-open .nav-menu{transform:none;opacity:1;visibility:visible}
  .nav-links{flex-direction:column;align-items:stretch;gap:2px;margin-bottom:14px}
  .nav-links a{padding:12px 12px;font-size:1rem;border-radius:8px}
  .nav-actions{flex-direction:column;align-items:stretch;gap:10px}
  .nav-actions .lang-switcher{align-self:flex-start}
  .nav-actions .btn{width:100%}
}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .section-intro{grid-template-columns:1fr}
  .section-intro--rev .section-head,.section-intro--rev .section-art{grid-column:auto;grid-row:auto}
  .steps{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .fit{grid-template-columns:1fr;gap:28px}
  .plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  :root{--gut:18px;--section:60px}
  .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-disarm{text-align:left}
  .btn{width:100%}
  .hero-cta .btn{width:100%}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- Bloki dodatkowe (obszar funkcji) ---------- */
.callout{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-cardlg);box-shadow:var(--sh-feature);padding:clamp(26px,3.5vw,52px);max-width:900px;margin-inline:auto}
.callout h2{font-size:clamp(1.4rem,1.1rem + 1.4vw,1.9rem);margin-bottom:12px;letter-spacing:-.02em}
.callout p{color:var(--muted)}
.callout .solves{margin-top:14px}

.points{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:820px;margin:0 auto}
.point{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.point .icon{color:var(--accent);width:24px;height:24px;flex:none;margin-top:2px}
.point h3{font-size:1rem;margin-bottom:4px}
.point p{font-size:.93rem;color:var(--muted)}

.chip-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:980px;margin:0 auto}
.chip-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:22px}
.chip-group h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:14px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:.85rem;font-weight:500;color:var(--ink-2);background:#fff}
.chip .icon{width:15px;height:15px;color:var(--accent)}
.badges-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

@media (max-width:820px){
  .points{grid-template-columns:1fr}
  .chip-groups{grid-template-columns:1fr;max-width:440px}
  .callout{flex-direction:column;gap:16px}
}

/* ---------- Logotypy integracji ---------- */
.logo-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;min-height:30px}
.logo-row.center{justify-content:center}
.int-logo{height:26px;width:auto;max-width:120px;object-fit:contain}
.logo-row .int-logo--lg{height:34px;max-width:150px}
.logo-row .chip{padding:6px 11px}
.callout-logo{height:52px;width:auto;margin-bottom:22px}

/* Karuzela (marquee) logotypów */
.marquee{position:relative;overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:56px;padding-left:56px;margin:0;list-style:none}
.marquee-set .int-logo{height:30px;max-width:none}
@keyframes marquee{to{transform:translateX(-50%)}}

@media (max-width:820px){.callout-logo{height:44px}.marquee-set{gap:40px;padding-left:40px}.marquee-set .int-logo{height:26px}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:100%}
  .marquee-set[aria-hidden="true"]{display:none}
  .marquee-set{flex-wrap:wrap;justify-content:center;padding-left:0;gap:26px 40px}
}

/* =========================================================================
   Makiety UI (dekoracyjne, CSS) — panel sprzedawcy + sklep klienta
   ========================================================================= */
.mock{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-feature)}
.mock-top{display:flex;align-items:center;gap:10px;padding:11px 14px;background:linear-gradient(180deg,#fbfcfe,#f3f6fc);border-bottom:1px solid var(--line)}
.mock-dots{display:inline-flex;gap:6px;flex:none}
.mock-dots i{width:10px;height:10px;border-radius:50%;background:var(--line-strong)}
.mock-dots i:nth-child(1){background:#f6685e}
.mock-dots i:nth-child(2){background:#fcbe3c}
.mock-dots i:nth-child(3){background:#34c749}
.mock-url{display:inline-flex;align-items:center;gap:6px;margin-inline:auto;max-width:70%;padding:4px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);font-family:var(--font-mono);font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-url-ic{width:12px;height:12px;color:var(--emerald);flex:none}
.mock-body{background:var(--bg)}
.mock-brand{font-weight:600;color:var(--ink-2);font-size:.9rem}

/* Panel sprzedawcy */
.mock-app{display:grid;grid-template-columns:184px 1fr;min-height:288px}
.mock-side{display:flex;flex-direction:column;gap:3px;padding:16px 12px;background:#fbfcfe;border-right:1px solid var(--line)}
.mock-side .mock-brand{padding:6px 10px 14px}
.mock-nav{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:.85rem;font-weight:500;color:var(--muted)}
.mock-nav .icon{width:16px;height:16px;color:currentColor}
.mock-nav.is-on{background:var(--bg-wash);color:var(--accent)}
.mock-main{padding:18px 20px}
.mock-h{font-weight:600;color:var(--ink-2);font-size:1rem;margin-bottom:14px}
.mock-row{display:grid;grid-template-columns:60px 1fr auto 80px;align-items:center;gap:12px;padding:11px 12px;margin-bottom:8px;background:#fff;border:1px solid var(--line);border-radius:8px;font-size:.85rem}
.mock-row .status{font-size:.72rem}
.mock-row--head{margin-bottom:6px;padding:0 12px 2px;background:transparent;border:0;color:var(--faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.mock-client{color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-amt{text-align:right}

/* Sklep klienta */
.mock-shopbar{display:flex;align-items:center;gap:14px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--line)}
.mock-tabs{display:inline-flex;gap:6px;margin-inline:auto}
.mock-tabs i{width:32px;height:6px;border-radius:var(--r-pill);background:var(--line)}
.mock-tabs i.is-on{width:46px;background:var(--accent)}
.mock-cart{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.8rem;font-weight:600;color:var(--action)}
.mock-cart .icon{width:14px;height:14px}
.mock-note{padding:12px 18px 0;font-size:.78rem;color:var(--muted)}
.mock-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 18px 20px}
.mock-prod{display:flex;flex-direction:column;gap:8px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:10px}
.mock-thumb{aspect-ratio:1/.82;border-radius:8px;background:linear-gradient(135deg,#dbe6ff,#b6ccff)}
.mock-thumb--a{background:linear-gradient(135deg,#dbe6ff,#a9c2ff)}
.mock-thumb--b{background:linear-gradient(135deg,#d8f3e0,#a7e0bd)}
.mock-thumb--c{background:linear-gradient(135deg,#ffe6d6,#ffc4a0)}
.mock-thumb--d{background:linear-gradient(135deg,#e7ddff,#c6b2ff)}
.mock-name{height:8px;width:72%;border-radius:var(--r-pill);background:var(--line-strong);opacity:.5}
.mock-price{font-size:.8rem;color:var(--muted)}
.mock-price b{color:var(--ink-2)}
.mock-add{display:inline-flex;align-items:center;justify-content:center;gap:5px;margin-top:2px;padding:6px 0;border-radius:8px;background:var(--bg-wash);color:var(--accent);font-size:.78rem;font-weight:600}
.mock-add .icon{width:13px;height:13px}

/* Osadzenie makiet */
.hero-mock{max-width:780px;margin:46px auto 0}
.hero-mock .mock{box-shadow:rgba(20,40,90,.18) 0 34px 64px -32px,rgba(0,0,0,.05) 0 2px 8px}
.hero-art{max-width:780px;margin:46px auto 0}
.hero-art img{width:100%;height:auto}
.mock-showcase{max-width:840px;margin-inline:auto}

/* =========================================================================
   Zrzuty ekranu aplikacji + karuzela (scroll-snap; bez JS: poziomy scroll)
   ========================================================================= */
.mock--screen .mock-body img{display:block;width:100%;height:auto}
.pane .mock{margin-top:auto}
/* Zrzut jako ilustracja section-intro (szerszy niż .section-art — UI musi być czytelne) */
.section-intro .mock--screen{width:min(520px,100%);justify-self:center}

.car .mock--screen .mock-body img{aspect-ratio:var(--car-ar,1.9);object-fit:cover;object-position:center top}
.car-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px}
.car-track::-webkit-scrollbar{display:none}
.car-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.car-slide{flex:0 0 100%;scroll-snap-align:center;min-width:0}
.car-cap{margin-top:12px;text-align:center;font-size:.9rem;color:var(--muted);min-height:1.5em}
.car-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px}
.car-nav[hidden]{display:none}
.car-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:border-color .2s,color .2s}
.car-btn .icon{width:16px;height:16px}
.car-btn .ic-flip{transform:rotate(180deg)}
.car-btn:hover{border-color:var(--accent);color:var(--accent)}
.car-dots{display:flex;gap:8px}
.car-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:var(--line-strong);cursor:pointer;transition:background .2s,transform .2s}
.car-dot.is-on{background:var(--accent);transform:scale(1.25)}
@media (max-width:640px){
  .mock-app{grid-template-columns:1fr}
  .mock-side{display:none}
  .mock-row{grid-template-columns:52px 1fr auto;font-size:.8rem}
  .mock-row .mock-amt{display:none}
  .mock-grid{grid-template-columns:repeat(2,1fr)}
  .hero-mock{margin-top:36px}
  .hero-art{margin-top:36px}
}

/* =========================================================================
   Baza wiedzy (blog) — lista, karty, artykuł SSR, oceny
   ========================================================================= */

/* Gwiazdki (średnia): nakładka fg przycięta do --pct */
.stars{position:relative;display:inline-block;line-height:1;white-space:nowrap;vertical-align:-.08em;font-family:var(--font-sans)}
.stars-bg{color:var(--line-strong)}
.stars-fg{position:absolute;left:0;top:0;overflow:hidden;width:var(--pct,0);color:#f5a623}

/* Hero listy — niższy niż na home */
.hero--compact{padding-top:56px;padding-bottom:40px}
.hero--compact .hero-sub{margin-top:20px}

/* ---------- Siatka kart ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-card);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.blog-card:hover{box-shadow:var(--sh-soft);transform:translateY(-2px);border-color:var(--line-strong)}
.blog-card-media{aspect-ratio:1200/630;background:var(--bg-wash);overflow:hidden}
.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.blog-card:hover .blog-card-media img{transform:scale(1.03)}
.blog-card-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.blog-card-meta{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted)}
.blog-card-rating{display:inline-flex;align-items:center;gap:5px}
.blog-card-rating .stars{font-size:.85rem}
.blog-card-rating b{color:var(--ink-2);font-weight:600}
.blog-card-title{font-size:1.08rem;line-height:1.28;letter-spacing:-.015em}
.blog-card-title a{color:var(--ink-2);transition:color .15s ease}
.blog-card-title a::after{content:"";position:absolute;inset:0}
.blog-card:hover .blog-card-title a{color:var(--accent)}
.blog-card-excerpt{font-size:.92rem;color:var(--muted);flex:1}
.blog-card-more{margin-top:4px;font-size:.86rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.blog-card-more .icon{width:1em;height:1em;transition:transform .2s ease}
.blog-card:hover .blog-card-more .icon{transform:translateX(3px)}

/* Pusty stan */
.blog-empty{text-align:center;max-width:540px;margin:12px auto;padding:48px 20px}
.blog-empty-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-pill);background:var(--bg-wash);color:var(--accent);margin-bottom:20px}
.blog-empty-ic .icon{width:26px;height:26px}
.blog-empty h2{font-size:1.5rem;margin-bottom:12px}
.blog-empty p{color:var(--muted)}
.blog-empty a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ---------- Paginacja (klient) ---------- */
.blog-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:48px}
.blog-pagination[hidden]{display:none}
.blog-pagination button{min-width:42px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600;font-size:.92rem;color:var(--ink-2);transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.blog-pagination button:hover:not(:disabled):not([aria-current]){border-color:var(--accent);color:var(--accent)}
.blog-pagination button[aria-current="page"]{background:var(--bg-wash);border-color:var(--accent);color:var(--accent)}
.blog-pagination button:disabled{opacity:.4;cursor:default}
.blog-pagination .bp-gap{align-self:center;color:var(--faint);padding:0 2px}

/* ---------- Artykuł: hero ---------- */
.post-hero{padding-top:40px;padding-bottom:8px}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:800px;margin:0 auto 18px;font-size:.85rem;color:var(--muted)}
.breadcrumb a{color:var(--muted);transition:color .15s ease}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .bc-sep{color:var(--faint)}
.breadcrumb .bc-current{color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(46ch,100%)}
.post-title{max-width:800px;margin:0 auto;font-size:clamp(1.9rem,1.3rem + 2.8vw,2.9rem);line-height:1.1;letter-spacing:-.028em;color:var(--ink)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:800px;margin:18px auto 0;font-size:.9rem;color:var(--muted)}
.post-meta time{font-weight:500}
.post-meta-rating{display:inline-flex;align-items:center;gap:6px}
.post-meta-rating .stars{font-size:1rem}
.post-meta-rating b{color:var(--ink-2)}
.post-meta .muted{color:var(--faint)}
.post-cover{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r-img);box-shadow:var(--sh-soft);margin-top:28px}

/* ---------- Artykuł: treść ---------- */
.post-body{max-width:800px;margin-inline:auto;padding-top:44px}
.article-content{color:var(--text);font-size:1.05rem;line-height:1.72}
.article-content > p:first-of-type{font-size:1.15rem;line-height:1.65;color:var(--ink-2)}
.article-content h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,1.75rem);margin:44px 0 14px;letter-spacing:-.02em}
.article-content h3{font-size:1.25rem;margin:32px 0 10px}
.article-content h4{font-size:1.08rem;margin:24px 0 8px}
.article-content p{margin-bottom:18px}
.article-content ul,.article-content ol{margin:0 0 20px 24px}
.article-content ul li{list-style:disc;margin-bottom:9px}
.article-content ol li{list-style:decimal;margin-bottom:9px}
.article-content li::marker{color:var(--accent)}
.article-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.article-content a:hover{text-decoration-thickness:2px}
.article-content strong,.article-content b{color:var(--ink-2);font-weight:600}
.article-content blockquote{margin:24px 0;padding:16px 22px;border-left:3px solid var(--accent);background:var(--bg-wash);border-radius:0 8px 8px 0;color:var(--ink-2);font-size:1.06rem}
.article-content blockquote p:last-child{margin-bottom:0}
.article-content img{width:100%;height:auto;border-radius:var(--r-img);margin:26px 0;box-shadow:var(--sh-card)}
.article-content figure{margin:26px 0}
.article-content figcaption{margin-top:10px;font-size:.85rem;color:var(--muted);text-align:center}
.article-content code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-wash);padding:.15em .4em;border-radius:6px;color:var(--ink-2)}
.article-content pre{margin:22px 0;padding:18px 20px;background:var(--ink-2);color:#e6edf7;border-radius:var(--r-card);overflow-x:auto;font-family:var(--font-mono);font-size:.88rem;line-height:1.6}
.article-content pre code{background:none;padding:0;color:inherit}
.article-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.95rem;display:block;overflow-x:auto}
.article-content th,.article-content td{padding:11px 14px;border:1px solid var(--line);text-align:left;vertical-align:top}
.article-content thead th{background:var(--bg-wash);color:var(--ink-2);font-weight:600}
.article-content h2:first-child,.article-content h3:first-child,.article-content p:first-child{margin-top:0}

/* ---------- Widget oceny ---------- */
.rate{max-width:800px;margin:44px auto 0;padding:26px 24px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.rate-q{font-weight:600;color:var(--ink-2);margin-bottom:12px}
.rate-stars{display:inline-flex;gap:6px;margin-bottom:10px}
.rate-star{font-size:2rem;line-height:1;color:var(--line-strong);padding:0 2px;transition:color .12s ease,transform .12s ease}
.rate-star:hover{transform:scale(1.14)}
.rate-star.is-on{color:#f5a623}
.rate[data-done] .rate-star{cursor:default;pointer-events:none}
.rate-summary{font-size:.9rem;color:var(--muted)}
.rate-summary .rate-avg{color:var(--ink-2);font-weight:600}
.rate-thanks{margin-top:8px;font-weight:600;color:var(--accent)}

/* ---------- Nawigacja prev/next ---------- */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:800px;margin:48px auto 0;padding-top:32px;border-top:1px solid var(--line)}
.post-nav-link{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.post-nav-link:hover{border-color:var(--line-strong);box-shadow:var(--sh-card);transform:translateY(-2px)}
.post-nav-newer{text-align:right;align-items:flex-end}
.post-nav-dir{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--accent)}
.post-nav-dir .icon{width:1em;height:1em}
.post-nav-dir .ic-flip{transform:rotate(180deg)}
.post-nav-t{font-weight:600;color:var(--ink-2);font-size:.98rem;line-height:1.3}

/* ---------- Powiązane ---------- */
.post-related{margin-top:64px}

/* ---------- Responsive blog ---------- */
@media (max-width:820px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .post-nav{grid-template-columns:1fr}
  .post-nav-newer{text-align:left;align-items:flex-start}
}
@media (max-width:560px){
  .blog-grid{grid-template-columns:1fr}
  .post-cover{border-radius:12px}
  .rate-star{font-size:1.75rem}
}

/* =========================================================================
   Warstwa kinowa — scroll-storytelling, paralaksa, choreografia wejść.
   Zasady: wyłącznie transform/opacity (kompozytor, zero CLS); efekty
   scroll-driven pod @supports (progresywne); pełny respekt reduced-motion.
   Bez dodatkowego JS — TBT/INP nietknięte.
   ========================================================================= */
:root{--ease-cine:cubic-bezier(.22,1,.36,1)}

/* --- Pasek postępu narracji (scroll(root)); bez wsparcia = scaleX(0), niewidoczny.
       Poza gate'em reduced-motion: to wskaźnik pozycji, nie ruch dekoracyjny. --- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline: scroll()){
  .scroll-progress{animation:progress-grow linear both;animation-timeline:scroll(root)}
}
@keyframes progress-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- Scena 1 (wejście): plansza tytułowa — obietnica → dowód → akcja.
       H1 i grafika tylko transform (bez opacity): oba są kandydatami LCP. --- */
@media (prefers-reduced-motion:no-preference){
  .hero--home .display{animation:rise-in .7s var(--ease-cine) both}
  .hero--home .hero-sub{animation:fade-rise .6s var(--ease-cine) .16s both}
  .hero--home .hero-cta{animation:fade-rise .6s var(--ease-cine) .3s both}
  .hero--home .hero-copy>.microcopy{animation:fade-rise .6s var(--ease-cine) .42s both}
  .hero--home .hero-art{animation:art-in .8s var(--ease-cine) both}
}
@keyframes rise-in{from{transform:translateY(16px)}}
@keyframes fade-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes art-in{from{transform:translateY(30px) scale(.98)}}

/* --- Kaskada w siatkach: karty wchodzą sekwencyjnie (IO nadaje .visible,
       opóźnienie buduje rytm czytania zamiast jednoczesnego "wyskoku") --- */
.js .grid>.fade-up:nth-child(2),.js .steps>.fade-up:nth-child(2){transition-delay:.07s}
.js .grid>.fade-up:nth-child(3),.js .steps>.fade-up:nth-child(3){transition-delay:.14s}
.js .grid>.fade-up:nth-child(4){transition-delay:.21s}
.js .grid>.fade-up:nth-child(5){transition-delay:.28s}
.js .grid>.fade-up:nth-child(6){transition-delay:.35s}

/* --- Sceny-bandy: sekcje wash jako uniesione plansze (warstwy, nie strona-ściana) --- */
.section--stage{border-radius:clamp(28px,4vw,44px);margin-inline:clamp(10px,1.6vw,24px);overflow:clip}

/* --- FAQ: płynne rozwijanie odpowiedzi (bez „cięcia montażowego”) --- */
@supports (interpolate-size: allow-keywords){
  .faq-item{interpolate-size:allow-keywords}
  .faq-item::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility .4s allow-discrete,opacity .4s var(--ease-cine),block-size .4s var(--ease-cine)}
  .faq-item[open]::details-content{opacity:1;block-size:auto}
}

/* --- Ruch kamery i paralaksa sprzężone ze scrollem (animation-timeline: view()).
       Scrub zamiast trigger: cofnięcie scrolla cofa ujęcie — jak przewijanie filmu. --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* Kamera panoruje w dół: hero łagodnie ustępuje scenie 2 */
    .hero--home .hero-inner{animation:hero-recede linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
    /* Poświata tła dryfuje wolniej niż treść — separacja planów (głębia) */
    .hero--home .hero-wash{animation:wash-drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    /* Najazd (dolly-in): okno aplikacji prostuje się z lekkiej perspektywy,
       gdy widz się do niego „zbliża” — uwaga skupia się na ekranie */
    .car .mock--screen,.section-intro .mock--screen{animation:dolly-flat linear both;animation-timeline:view();animation-range:entry 5% entry 90%}
    /* Ilustracje płyną wolniej niż otaczający tekst — paralaksa warstw */
    .section-art,.contact-art{animation:drift-y linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    /* Nagłówki scen i pozycje FAQ wjeżdżają w rytmie scrolla */
    .section .section-head,.faq-item{animation:head-in linear both;animation-timeline:view();animation-range:entry 5% entry 50%}
    /* Karty bloga: tylko opacity (transform zostaje wolny dla hover-lift) */
    .blog-card{animation:card-in linear both;animation-timeline:view();animation-range:entry 5% entry 45%}
  }
}
@keyframes hero-recede{to{opacity:.3;transform:translateY(-28px) scale(.99)}}
@keyframes wash-drift{to{transform:translateY(14%)}}
@keyframes dolly-flat{from{opacity:.4;transform:perspective(1200px) rotateX(8deg) scale(.965)}}
@keyframes drift-y{from{transform:translateY(4.5%)}to{transform:translateY(-4.5%)}}
@keyframes head-in{from{opacity:0;transform:translateY(24px)}}
@keyframes card-in{from{opacity:0}}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .fade-up,.js .fade-up.from-left,.js .fade-up.from-right{opacity:1;transform:none}
}