/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/BricolageGrotesque-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/BricolageGrotesque-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 650;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/BricolageGrotesque-650-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 650;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/BricolageGrotesque-650-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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Figtree-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Figtree-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Figtree-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Figtree-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Figtree-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Figtree-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/JetBrainsMono-500-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;
}
/* Contelizer prototyp v2. Układ: spokojna kolumna 1120 px, dużo powietrza, zielony z logo tylko na akcentach */
:root{
  --bg:#F6F8F7; --surface:#FFFFFF; --fg:#1C2320; --muted:#5B6662; --line:#DFE6E3;
  --accent:#23855F; --accent-soft:#E3F2EB; --accent-ink:#FFFFFF; --sand:#EDEAE4; --warn:#8A5D0C; --warn-soft:#FBF1DC;
  --invert-bg:#1C2320; --invert-fg:#F6F8F7;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  --r:14px; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#111614; --surface:#18201D; --fg:#E8EEEB; --muted:#9AA6A1; --line:#2A3531;
  --accent:#4CC493; --accent-soft:#1B3329; --accent-ink:#0D1A14; --sand:#22201C; --warn:#E3B45A; --warn-soft:#2E2512;
  --invert-bg:#E8EEEB; --invert-fg:#111614; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#111614; --surface:#18201D; --fg:#E8EEEB; --muted:#9AA6A1; --line:#2A3531;
  --accent:#4CC493; --accent-soft:#1B3329; --accent-ink:#0D1A14; --sand:#22201C; --warn:#E3B45A; --warn-soft:#2E2512;
  --invert-bg:#E8EEEB; --invert-fg:#111614; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
html[data-lang="pl"] [data-l="en"], html[data-lang="en"] [data-l="pl"]{display:none!important}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display);font-weight:650;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,5.8vw,68px);line-height:1.03}
h2{font-size:clamp(28px,3.8vw,44px);line-height:1.1}
h3{font-size:20px;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:58ch}
.eyebrow{display:inline-block;font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.prose{max-width:62ch;display:grid;gap:16px;color:var(--muted)}
.prose b{color:var(--fg);font-weight:600}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 16px/1 var(--body);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px var(--accent)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--fg)}
.btn .arr{width:16px;height:16px;flex:none;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-note{font-size:14px;color:var(--muted)}

.proto{background:var(--warn-soft);color:var(--warn);font:500 13px/1.4 var(--mono);text-align:center;padding:8px 16px}
.proto a{font-weight:600}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:72px}
.logo{height:22px;width:auto;display:block}
.logo-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .logo-light{display:none}:root:not([data-theme="light"]) .logo-dark{display:block}}
:root[data-theme="dark"] .logo-light{display:none}:root[data-theme="dark"] .logo-dark{display:block}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{text-decoration:none;font-weight:500;font-size:15px;color:var(--muted);position:relative;padding:12px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-spacer{margin-left:auto}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.lang button{background:none;border:0;color:var(--muted);font:500 13px/1 var(--mono);min-width:44px;min-height:36px;border-radius:999px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.nav .btn{min-height:44px;padding:0 18px;font-size:15px}



section{scroll-margin-top:84px}
.hero{padding-block:clamp(52px,8vw,110px) clamp(64px,8vw,110px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,88px);align-items:center}
.hero-grid > *{min-width:0}
.hero-copy{display:grid;gap:26px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

.block{padding-block:clamp(72px,9vw,130px);border-top:1px solid var(--line)}
.block-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.block-head > *{min-width:0}
.block-head .eyebrow{margin-bottom:18px}
@media (max-width:860px){.block-head{grid-template-columns:1fr}}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.two > *{min-width:0}
@media (max-width:860px){.two{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 30px 60px -42px rgba(20,40,30,.4)}
.card-top{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.thumb{width:60px;height:72px;border-radius:10px;background:var(--sand);display:grid;place-items:center;flex:none}
.thumb svg{width:38px;height:54px}
.src{font:400 12px/1.4 var(--mono);color:var(--muted)}
.card-top b{display:block;font-weight:600;font-size:16px}
.rows{display:grid;margin:8px 0 18px}
.row{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15px;align-items:center}
.row > span:first-child{font:400 12px/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.v{position:relative;min-height:22px;transition:opacity .35s,transform .35s var(--ease)}
.hide{opacity:0;transform:translateY(4px)}
.scan .v::before{content:"";position:absolute;inset:2px 30% 2px 0;border-radius:6px;background:linear-gradient(90deg,var(--accent-soft),transparent);animation:pulse .6s linear infinite}
.status{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--mono);padding:8px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.chip.wait{background:var(--sand);color:var(--muted)}
.chip.wait .dot{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* rozdzielnik na głównej */
.door-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.door{display:grid;grid-template-columns:auto 1fr;gap:18px 20px;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-decoration:none;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;min-width:0}
.door:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 22px 40px -30px var(--accent)}
.door .ic{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.door .ic svg{width:24px;height:24px}
.door-body{display:grid;gap:8px;min-width:0}
.door p{color:var(--muted);font-size:16px}
.door .proof{font:500 13px/1.4 var(--mono);color:var(--fg)}
.door .go{grid-column:2;font-weight:600;font-size:15px;display:flex;align-items:center;gap:8px;color:var(--accent)}
.door .go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.door:hover .go svg{transform:translateX(5px)}
@media (max-width:760px){.door-grid{grid-template-columns:1fr}.door{grid-template-columns:1fr}.door .go{grid-column:1}}

/* problem */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pain{padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.pain q{font:600 18px/1.4 var(--display);quotes:"„" "”";letter-spacing:-.01em}
.pain p{color:var(--muted);font-size:15px}
@media (max-width:860px){.pains{grid-template-columns:1fr}}
.cost{margin-top:28px;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:20px 24px;border-radius:var(--r);background:var(--warn-soft);color:var(--warn)}
.cost b{font:650 26px/1 var(--display)}

/* historia krok po kroku */
.story{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.story > li{display:grid;grid-template-columns:72px 1fr 1fr;gap:clamp(20px,4vw,56px);padding-block:36px;border-top:1px solid var(--line);align-items:start}
.story > li > *{min-width:0}
.story .n{font:500 14px/1 var(--mono);color:var(--muted);padding-top:6px;position:relative}
.story .n::after{content:"";position:absolute;left:0;top:-37px;height:2px;width:0;background:var(--accent);transition:width .9s var(--ease)}
.story li.on .n{color:var(--accent)}
.story li.on .n::after{width:72px}
.story h3{margin-bottom:10px}
.story p{color:var(--muted)}
.story .vis{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;font-size:14px}
@media (max-width:860px){.story > li{grid-template-columns:1fr;gap:14px}.story .n::after{top:-37px}}

.list{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:28px 1fr;gap:14px}
.list li svg{width:22px;height:22px;color:var(--accent);margin-top:3px}
.list b{display:block;font-weight:600;margin-bottom:2px}
.list p{color:var(--muted);font-size:16px}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font:500 13px/1 var(--mono);padding:9px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}

/* case study */
.case{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);padding:clamp(28px,4vw,52px);border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.case > *{min-width:0}
.case .who{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:14px;display:block}
.case-nums{display:grid;gap:22px;align-content:start}
.case-nums div{display:grid;gap:4px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.case-nums div:last-child{border-bottom:0;padding-bottom:0}
.case-nums b{font:650 clamp(32px,4vw,48px)/1 var(--display);letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.case-nums span{color:var(--muted);font-size:15px}
.case.example{border-style:dashed}
@media (max-width:860px){.case{grid-template-columns:1fr}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.stat b{display:block;font:650 clamp(28px,3.4vw,40px)/1 var(--display);letter-spacing:-.02em;margin-bottom:10px;font-variant-numeric:tabular-nums}
.stat p{color:var(--muted);font-size:15px}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.stats{grid-template-columns:1fr}}

/* suwak przed i po */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs button,.pick button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:500 15px/1 var(--body);cursor:pointer;transition:all .25s}
.tabs button[aria-selected="true"],.pick button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pick{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.pick span{font-size:14px;color:var(--muted);margin-right:4px}
.pick button{display:inline-flex;align-items:center;gap:8px}
.pick i{width:14px;height:14px;border-radius:50%;display:inline-block}
.compare{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:20px;overflow:hidden;background:var(--sand);user-select:none;touch-action:pan-y}
.compare svg.scene{position:absolute;inset:0;width:100%;height:100%}
.compare .after{clip-path:inset(0 0 0 var(--pos,50%))}
.compare.anim .after{transition:clip-path .9s var(--ease)}
.handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.compare.anim .handle{transition:left .9s var(--ease)}
.handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.handle i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:20px;height:12px;color:#1C2320}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.tag{position:absolute;top:16px;font:500 12px/1 var(--mono);padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.92);color:#1C2320;pointer-events:none}
.tag.l{left:16px}.tag.r{right:16px}
.ph-note{margin-top:12px;font:400 13px/1.4 var(--mono);color:var(--warn)}

/* źródła danych (crawler) */
.sources{display:grid;gap:8px;margin:14px 0 18px}
.source{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid var(--line);font-size:14px;transition:border-color .3s,background .3s}
.source svg{width:18px;height:18px;color:var(--muted)}
.source .s{font:500 12px/1 var(--mono);color:var(--muted)}
.source.on{border-color:var(--accent);background:var(--accent-soft)}
.source.on svg,.source.on .s{color:var(--accent)}

/* paleta zwrotów */
.pallet-bars{display:grid;gap:14px;margin:16px 0 18px}
.pb{display:grid;gap:6px}
.pb-top{display:flex;justify-content:space-between;font-size:14px;gap:10px}
.track{height:10px;border-radius:999px;background:var(--sand);overflow:hidden}
.fill{height:100%;border-radius:999px;background:var(--accent);width:var(--w);transition:width 1.2s var(--ease)}
.fill.grey{background:var(--muted)}
.bar{display:grid;gap:8px}
.bar-top{display:flex;justify-content:space-between;font-size:15px;gap:12px}

/* architektura presta */
.stack{display:grid;gap:10px}
.layer{position:relative;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:16px 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:border-color .3s}
.layer b{font-weight:600}
.layer .mono{font-size:12px;color:var(--muted)}
.layer.on{border-color:var(--accent)}
.layer.on::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--accent-soft),transparent);animation:sweep 1s var(--ease)}
.layer > *{position:relative}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.layer-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.layer-row .layer{grid-template-columns:1fr}
@media (max-width:480px){.layer-row{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:0;max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font:600 18px/1.4 var(--body);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{color:var(--muted);padding-bottom:22px;max-width:68ch}

/* Easyitem */
.easy-box{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:clamp(28px,4vw,48px);border-radius:24px;background:var(--invert-bg);color:var(--invert-fg)}
.easy-box p{opacity:.75;max-width:60ch;margin-top:12px}
.easy-box .btn{background:var(--invert-fg);color:var(--invert-bg)}
@media (max-width:760px){.easy-box{grid-template-columns:1fr}}

/* inne rozwiązania */
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.more a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);text-decoration:none;font-weight:600;transition:border-color .3s,transform .3s var(--ease)}
.more a:hover{border-color:var(--accent);transform:translateY(-2px)}
.more a svg{width:16px;height:16px;color:var(--accent);flex:none}
@media (max-width:760px){.more{grid-template-columns:1fr}}

/* formularz */
.talk-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.talk-grid > *{min-width:0}
@media (max-width:860px){.talk-grid{grid-template-columns:1fr}}
.person{display:flex;gap:14px;align-items:center;margin-top:28px}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:650 18px/1 var(--display);flex:none}
.person span{display:block;font-size:14px;color:var(--muted)}
form{display:grid;gap:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
label{display:grid;gap:8px;font-size:14px;font-weight:600}
input[type=text],textarea,select{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:400 16px/1.4 var(--body);transition:border-color .2s,box-shadow .2s}
textarea{min-height:100px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.done{padding:28px;border-radius:var(--r);background:var(--accent-soft)}
.done b{display:block;font:650 24px/1.2 var(--display);margin-bottom:8px}
.form-meta{font:400 12px/1.4 var(--mono);color:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:40px 56px;font-size:14px;color:var(--muted)}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot a{text-decoration:none}.foot a:hover{color:var(--fg)}

.rise{animation:rise .9s var(--ease) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}
@keyframes rise{from{opacity:.001;transform:translateY(14px)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ===== v3: menu ===== */
.brand{flex:none}
.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu-top{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--muted);font:500 15px/1 var(--body);text-decoration:none;cursor:pointer;transition:color .2s,background .2s}
.menu-top:hover,.menu-top[aria-expanded="true"]{color:var(--fg);background:var(--surface)}
.menu-top svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.menu-top[aria-expanded="true"] svg{transform:rotate(180deg)}
.menu-group{position:relative}
.menu-panel{position:absolute;top:calc(100% + 10px);left:-12px;width:min(560px,90vw);display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(10,30,20,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.menu-group.open .menu-panel{opacity:1;visibility:visible;transform:none}
.menu-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu-item{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px;border-radius:12px;text-decoration:none;transition:background .2s}
.menu-item:hover,.menu-item[aria-current="page"]{background:var(--accent-soft)}
.menu-item .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}
.menu-item:hover .ic,.menu-item[aria-current="page"] .ic{background:var(--surface)}
.menu-item .ic svg{width:20px;height:20px}
.menu-item b{display:block;font-weight:600;font-size:15px}
.menu-item small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:2px}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1060px){
  .nav{gap:10px}
  .burger{display:block}
  .lang{margin-left:auto}
  .menu{position:fixed;left:0;right:0;top:calc(72px + env(safe-area-inset-top,0px));bottom:0;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:16px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px));background:var(--bg);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease),visibility .25s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu-top{min-height:52px;font-size:18px;color:var(--fg);justify-content:space-between;padding:0 8px}
  .menu-panel{position:static;width:auto;grid-template-columns:1fr;box-shadow:none;border:0;padding:0 0 8px;background:none;opacity:1;visibility:visible;transform:none;display:none}
  .menu-group.open .menu-panel{display:grid}
  body.menu-open{overflow:hidden}
}
@media (max-width:520px){.nav-cta{display:none}}

/* przyklejony przycisk na telefonie */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left, 0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -12px 30px -20px rgba(0,0,0,.3);transform:translateY(110%);transition:transform .35s var(--ease)}
.sticky-cta.show{transform:none}
.sticky-cta span{font-size:14px;color:var(--muted);line-height:1.3}
.sticky-cta .btn{flex:none}
@media (min-width:861px){.sticky-cta{display:none!important}}

/* pasek dowodów */
.proof{border-block:1px solid var(--line);background:var(--surface)}
.proof-in{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-in div{padding:22px 18px;display:grid;gap:4px;border-left:1px solid var(--line)}
.proof-in div:first-child{border-left:0;padding-left:0}
.proof-in b{font-size:20px;font-weight:500;color:var(--fg)}
.proof-in span{font-size:14px;color:var(--muted);line-height:1.35}
@media (max-width:760px){.proof-in{grid-template-columns:1fr 1fr}.proof-in div{border-left:0;padding-left:0;border-top:1px solid var(--line)}.proof-in div:nth-child(-n+2){border-top:0}}

/* formularz w dwóch krokach */
.form-card{padding:clamp(22px,3vw,32px);border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.fprog{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.fprog-bar{flex:1;height:6px;border-radius:999px;background:var(--sand);overflow:hidden}
.fprog-bar i{display:block;height:100%;width:50%;background:var(--accent);border-radius:999px;transition:width .5s var(--ease)}
form.s2 .fprog-bar i{width:100%}
.fprog-txt{font-size:13px;color:var(--muted)}
.fstep{display:grid;gap:20px;animation:rise .5s var(--ease) both}
.q{border:0;padding:0;margin:0;display:grid;gap:12px}
.q legend{font-weight:600;font-size:16px;padding:0;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipopt{position:relative;display:inline-flex}
.chipopt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chipopt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-weight:500;font-size:15px;transition:all .25s var(--ease)}
.chipopt:hover span{border-color:var(--fg)}
.chipopt input:checked + span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);transform:scale(1.03)}
.chipopt input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.trust{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.trust li{display:flex;gap:10px;align-items:center;font-weight:500}
.trust svg{width:20px;height:20px;color:var(--accent);flex:none}
.person{flex-wrap:wrap}
.person > div{display:grid;gap:2px;min-width:0}

/* kalkulator */
.calc{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.calc > *{min-width:0}
.calc-in{padding:clamp(22px,3.5vw,40px);display:grid;gap:26px;align-content:center}
.calc-in label{display:grid;grid-template-columns:1fr auto;gap:10px 16px;font-weight:500;font-size:15px}
.calc-in output{font-size:16px;font-weight:500;color:var(--fg)}
.calc-in input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.calc-out{padding:clamp(22px,3.5vw,40px);background:var(--warn-soft);display:grid;gap:12px;align-content:center}
.calc-big{font:650 clamp(40px,5.4vw,64px)/1 var(--display);letter-spacing:-.02em;color:var(--warn);font-variant-numeric:tabular-nums}
.calc-out p{font-size:17px}
.calc-out .btn{justify-self:start;margin-top:6px}
.calc-bars{display:grid;gap:8px;margin:6px 0}
.calc-bars div{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.cb{display:block;height:10px;border-radius:999px;background:var(--warn);opacity:.55;transition:width .5s var(--ease)}
.cb.now{width:100%}
.cb.us{background:var(--accent);opacity:1;width:30%}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* scrollytelling */
.scrolly{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.scrolly > *{min-width:0}
.scrolly-vis{position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.scrolly-steps{list-style:none;margin:0;padding:0}
.scrolly-steps li{display:grid;grid-template-columns:48px 1fr;gap:16px;min-height:62vh;align-content:center;opacity:.35;transition:opacity .4s}
.scrolly-steps li.cur{opacity:1}
.scrolly-steps li > div{display:grid;gap:12px}
.scrolly-steps p{color:var(--muted)}
.st-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;transition:all .3s}
.st-btn .n{font:500 13px/1 var(--mono);color:var(--muted)}
li.cur .st-btn{background:var(--accent);border-color:var(--accent)}
li.cur .st-btn .n{color:var(--accent-ink)}
.scn{position:relative;aspect-ratio:4/5;width:100%;border-radius:22px;overflow:hidden;background:var(--sand);container-type:inline-size;border:1px solid var(--line)}
.scn *{transition:opacity .6s var(--ease),transform .8s var(--ease),background .5s,border-color .5s,clip-path .9s var(--ease),left .8s var(--ease),top .8s var(--ease)}
.lbl{position:absolute;left:5%;bottom:5%;font:500 max(11px,3cqw)/1.2 var(--mono);padding:8px 12px;border-radius:999px;background:var(--surface);color:var(--fg);box-shadow:0 8px 20px -12px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);z-index:3}
@media (max-width:860px){
  .scrolly{grid-template-columns:1fr}
  .scrolly-vis{top:calc(76px + env(safe-area-inset-top,0px));z-index:2;max-width:380px;width:100%;margin:0 auto}
  .scn{aspect-ratio:1/1}
  .scrolly-steps li{min-height:52vh;position:relative;z-index:1;align-content:end;padding-bottom:20px}
  .scrolly-steps li > div{background:var(--bg);padding:16px 0}
}

/* scena AI */
.scn-ai{background:#fff}
.ai-mess{position:absolute;inset:0;background:linear-gradient(180deg,#A39C8E 0 30%,#8F897D 30% 72%,#7F796E 72%)}
.ai-mess::before{content:"";position:absolute;left:6%;top:8%;width:26%;height:40%;background:#B9B2A5;border-radius:4px}
.ai-mess::after{content:"";position:absolute;right:5%;top:12%;width:24%;height:62%;background:#9b9486;border-radius:4px}
.ai-sweep{position:absolute;top:0;bottom:0;left:-10%;width:8%;background:linear-gradient(90deg,transparent,rgba(76,196,147,.6),transparent);opacity:0}
.ai-stage{position:absolute;inset:4% 12% 2%}
.fig{width:100%;height:100%}
.fig g{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.f-model{opacity:0;transform:translateY(16px)}
.ai-corners i{position:absolute;width:9%;aspect-ratio:1;border:3px solid #23855F;opacity:0}
.ai-corners i:nth-child(1){left:9%;top:5%;border-right:0;border-bottom:0}
.ai-corners i:nth-child(2){right:9%;top:5%;border-left:0;border-bottom:0}
.ai-corners i:nth-child(3){left:9%;bottom:3%;border-right:0;border-top:0}
.ai-corners i:nth-child(4){right:9%;bottom:3%;border-left:0;border-top:0}
.ai-grid{position:absolute;inset:4%;display:grid;grid-template-columns:1fr 1fr;gap:4%;opacity:0;transform:scale(.92);pointer-events:none}
.gcell{position:relative;border-radius:12px;overflow:hidden;background:#F3EFE8;box-shadow:0 10px 24px -16px rgba(0,0,0,.4)}
.gcell svg{width:100%;height:100%;display:block}
.gcell span{position:absolute;left:8px;bottom:8px;font:500 max(10px,2.6cqw)/1 var(--mono);padding:6px 8px;border-radius:999px;background:#fff;color:#1C2320}
.scn-ai.s0:not(.s1) .l0{opacity:1;transform:none}
.scn-ai.s1 .ai-mess{opacity:0}
.scn-ai.s1:not(.s2) .ai-sweep{animation:sweepx 1.2s var(--ease) 1}
@keyframes sweepx{0%{opacity:1;left:-10%}100%{opacity:1;left:105%}}
.scn-ai.s1 .ai-corners i{opacity:1}
.scn-ai.s1:not(.s2) .l1{opacity:1;transform:none}
.scn-ai.s2 .f-hanger{opacity:0}
.scn-ai.s2 .f-model{opacity:1;transform:none}
.scn-ai.s2{background:#EFEAE2}
.scn-ai.s2 .ai-corners i{opacity:0}
.scn-ai.s2:not(.s3) .l2{opacity:1;transform:none}
.scn-ai.s3 .ai-stage{opacity:0;transform:scale(.5)}
.scn-ai.s3 .ai-grid{opacity:1;transform:none}
.scn-ai.s3 .l3{opacity:1;transform:none;left:50%;bottom:50%;transform:translate(-50%,50%)}

/* scena danych */
.scn-dane{background:var(--surface)}
.dlines{position:absolute;inset:0;width:100%;height:100%}
.dlines path{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:6 8;transition:stroke .5s}
.packets{opacity:0;transition:opacity .4s}
.packets circle{fill:var(--accent)}
.dn{position:absolute;width:24%;display:grid;justify-items:center;gap:6px;padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:var(--bg);font:500 max(10px,2.8cqw)/1 var(--mono);color:var(--muted);transform:translate(-50%,-50%)}
.dn svg{width:max(18px,6cqw);height:max(18px,6cqw)}
.dn.n1{left:17.5%;top:18%}.dn.n2{left:82.5%;top:18%}.dn.n3{left:17.5%;top:82%}.dn.n4{left:82.5%;top:82%}
.dcard{position:absolute;left:50%;top:50%;width:54%;transform:translate(-50%,-50%) scale(.9);padding:4cqw;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(0,0,0,.35);display:grid;gap:3cqw;opacity:.7}
.dcard-ean{font-size:max(10px,2.8cqw);color:var(--muted)}
.dvals{position:relative;height:max(28px,8cqw)}
.dv{position:absolute;left:0;top:0;font:500 max(10px,2.8cqw)/1 var(--mono);padding:6px 9px;border-radius:999px;background:var(--sand);color:var(--muted);opacity:0;white-space:nowrap}
.dv.vok{background:var(--accent-soft);color:var(--accent)}
.dcat{display:grid;gap:4px;font-size:max(10px,2.8cqw);opacity:0}
.dcat .mono{color:var(--accent)}
.dout{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);display:flex;gap:6px;opacity:0}
.dout span{font:500 max(10px,2.6cqw)/1 var(--mono);padding:7px 9px;border-radius:8px;background:var(--fg);color:var(--bg)}
.scn-dane .l0{left:50%;bottom:auto;top:4%;transform:translateX(-50%) translateY(8px)}
.scn-dane.s0:not(.s1) .l0{opacity:1;transform:translateX(-50%)}
.scn-dane.s1 .dn{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.scn-dane.s1:not(.s2) .packets{opacity:1}
.scn-dane.s1 .dlines path{stroke:var(--accent)}
.scn-dane.s1 .dcard{opacity:1;transform:translate(-50%,-50%) scale(1)}
.scn-dane.s2 .dv{opacity:1}
.scn-dane.s2 .v1{transform:translateY(-120%)}.scn-dane.s2 .v2{transform:translateX(30%)}.scn-dane.s2 .v3{transform:translateY(120%)}
.scn-dane.s2 .vok{opacity:0}
.scn-dane.s3 .dv:not(.vok){opacity:0;transform:none}
.scn-dane.s3 .vok{opacity:1}
.scn-dane.s3 .dcat{opacity:1}
.scn-dane.s3 .dlines path{stroke:var(--line)}
.scn-dane.s3 .dn{opacity:.35}
.scn-dane.s4 .dout{opacity:1}
.scn-dane.s4 .dcard{top:46%}

/* scena zwrotów */
.scn-zw{background:var(--sand)}
.zbox{position:absolute;left:50%;top:20%;width:58%;transform:translate(-50%,-50%);aspect-ratio:2/1;background:#C9A876;border-radius:10px;box-shadow:inset 0 -12px 0 rgba(0,0,0,.08);display:grid;place-items:center;align-content:center;gap:4px;overflow:hidden}
.zbox::before{content:"";position:absolute;left:46%;top:0;bottom:0;width:8%;background:rgba(255,255,255,.25)}
.zbar{width:52%;height:34%;background:repeating-linear-gradient(90deg,#1C2320 0 2px,transparent 2px 4px,#1C2320 4px 5px,transparent 5px 8px);background-color:#fff;border:6px solid #fff;position:relative;z-index:1}
.zbox .mono{font-size:max(10px,2.6cqw);color:#3b2f1d;position:relative;z-index:1}
.zbeam{position:absolute;left:20%;right:20%;top:20%;height:3px;background:#E5484D;box-shadow:0 0 12px #E5484D;opacity:0;z-index:2}
.zcond{position:absolute;left:50%;top:42%;transform:translateX(-50%);display:flex;gap:6px;opacity:0}
.zcond span{font:500 max(10px,2.6cqw)/1 var(--mono);padding:8px 10px;border-radius:999px;background:var(--surface);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.zcond span.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.zcard{position:absolute;left:50%;top:74%;width:86%;transform:translate(-50%,-50%) translateY(20px);display:grid;grid-template-columns:34% 1fr;gap:4cqw;padding:4cqw;border-radius:16px;background:var(--surface);border:1px solid var(--line);opacity:0;box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.zph{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#E7E3DC}
.zph > div{position:absolute;inset:0;display:grid;place-items:center}
.zph-a svg{width:50%}
.zph-b{opacity:0}.zph-b svg{width:100%;height:100%}
.zinfo{display:grid;gap:2cqw;align-content:center;font-size:max(11px,3cqw);min-width:0}
.zcat{color:var(--muted);opacity:0}
.zprice{font-size:max(13px,4.4cqw);font-weight:500;opacity:0}
.zlive{display:inline-flex;align-items:center;gap:6px;font:500 max(10px,2.6cqw)/1 var(--mono);color:var(--accent);opacity:0}
.zlive i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.2s infinite;flex:none}
.scn-zw .l4{left:auto;right:5%;bottom:auto;top:4%}
.scn-zw .l0{left:50%;bottom:auto;top:38%;transform:translateX(-50%) translateY(8px)}
.scn-zw.s0:not(.s1) .zbeam{opacity:1;animation:beam 1.2s ease-in-out infinite alternate}
@keyframes beam{from{top:18%}to{top:78%}}
.scn-zw.s0:not(.s1) .l0{opacity:1;transform:translateX(-50%)}
.scn-zw.s1 .zcond{opacity:1}
.scn-zw.s2 .zcard{opacity:1;transform:translate(-50%,-50%)}
.scn-zw.s2 .zph-a{opacity:0}.scn-zw.s2 .zph-b{opacity:1}
.scn-zw.s3 .zcat{opacity:1}
.scn-zw.s4 .zprice,.scn-zw.s4 .zlive{opacity:1}
.scn-zw.s4 .l4{opacity:1;transform:none}
.scn-zw.s4 .zbox{transform:translate(-50%,-50%) scale(.85);opacity:.5}

/* scena PrestaShop */
.scn-pr{background:var(--surface)}
.pr-old{position:absolute;left:8%;top:8%;width:84%;display:grid;gap:8px;padding:5cqw;border-radius:16px;border:1px dashed var(--muted);background:var(--bg);font-size:max(11px,3.2cqw)}
.pr-old span{padding:8px 10px;border-radius:8px;background:var(--sand);color:var(--muted);font:500 max(10px,2.8cqw)/1 var(--mono)}
.warn{position:absolute;width:14px;height:14px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 6px rgba(229,72,77,.18);opacity:0}
.w1{right:8%;top:42%}.w2{right:16%;top:70%}
.pr-lens{position:absolute;left:10%;top:10%;width:26%;aspect-ratio:1;border-radius:50%;border:4px solid var(--fg);opacity:0}
.pr-lens::after{content:"";position:absolute;right:-28%;bottom:-28%;width:34%;height:6px;background:var(--fg);transform:rotate(45deg);border-radius:4px}
.pr-new{position:absolute;left:8%;top:8%;width:84%;display:grid;gap:8px;opacity:0;transform:translateY(12px)}
.pl{padding:4cqw;border-radius:12px;border:2px solid var(--accent);font:600 max(11px,3.4cqw)/1 var(--body);background:var(--surface);clip-path:inset(0 100% 0 0)}
.pr-kanban{position:absolute;left:8%;right:8%;bottom:8%;height:30%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;opacity:0}
.pr-kanban > div{border-radius:12px;background:var(--bg);border:1px solid var(--line);padding:8px}
.pr-kanban em{font:500 max(10px,2.5cqw)/1 var(--mono);font-style:normal;color:var(--muted)}
.kc{position:absolute;width:calc((100% - 16px)/3 - 16px);height:18%;border-radius:8px;background:var(--accent-soft);border:1px solid var(--accent);left:8px}
.k1{top:30%}.k2{top:52%}.k3{top:74%}
.pr-move{position:absolute;inset:0;pointer-events:none}
.pb-blk{position:absolute;left:10%;top:30%;font:500 max(10px,2.8cqw)/1 var(--mono);padding:8px 10px;border-radius:8px;background:var(--fg);color:var(--bg);opacity:0}
.b2{top:40%}.b3{top:50%}.b4{top:60%}
.scn-pr .l3{left:auto;right:5%}
.scn-pr.s0:not(.s1) .warn{opacity:1;animation:pulse 1s infinite}
.scn-pr.s0:not(.s1) .pr-lens{opacity:1;animation:lens 3s var(--ease) infinite}
@keyframes lens{0%{transform:translate(0,0)}33%{transform:translate(160%,60%)}66%{transform:translate(60%,140%)}100%{transform:translate(0,0)}}
.scn-pr.s0:not(.s1) .l0{opacity:1;transform:none}
.scn-pr.s1 .pr-old{opacity:0;transform:scale(.96)}
.scn-pr.s1 .pr-new{opacity:1;transform:none}
.scn-pr.s1 .pl{clip-path:inset(0 0 0 0)}
.scn-pr.s1 .pl.l2{transition-delay:.2s}.scn-pr.s1 .pl.l3{transition-delay:.4s}.scn-pr.s1 .pl.l4{transition-delay:.6s}
.scn-pr.s2 .pr-new{transform:scale(.8) translateY(-14%)}
.scn-pr.s2:not(.s3) .pr-kanban{opacity:1}
.scn-pr.s2:not(.s3) .k1{animation:kmove 3s var(--ease) infinite}
.scn-pr.s2:not(.s3) .k2{animation:kmove 3s var(--ease) .8s infinite}
@keyframes kmove{0%{left:8px}40%,60%{left:calc(33.3% + 8px)}100%{left:calc(66.6% + 8px)}}
.scn-pr.s3 .pr-new{opacity:.25}
.scn-pr.s3 .pb-blk{opacity:1;animation:fly 2.4s var(--ease) infinite}
.scn-pr.s3 .b2{animation-delay:.3s}.scn-pr.s3 .b3{animation-delay:.6s}.scn-pr.s3 .b4{animation-delay:.9s}
@keyframes fly{0%{left:6%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:64%;opacity:0}}
.scn-pr.s3 .l3{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.scn *{transition:none!important}}

@media (max-width:420px){.logo{height:17px}.nav{gap:8px}}
@media (max-width:1060px){header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}}
.menu-cta{display:none}
@media (max-width:1060px){.menu-cta{display:inline-flex;justify-content:center;margin-top:20px}}
@media (max-width:860px){.scrolly-vis{max-width:min(290px,70vw)}.scrolly-steps li{min-height:64vh}}
.st-extra{display:block}
.ai-grid{inset:4% 4% 13%}
.scn-ai.s3 .l3{left:50%;bottom:3%;top:auto;right:auto;transform:translateX(-50%);white-space:nowrap}

.dprog{display:block;height:6px;border-radius:999px;background:var(--sand);overflow:hidden;opacity:0}
.dprog i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px}
.scn-dane.s1:not(.s2) .dprog{opacity:1}
.scn-dane.s1:not(.s2) .dprog i{animation:dfill 2.4s var(--ease) infinite}
@keyframes dfill{from{width:0}to{width:100%}}
.scn-dane.s2:not(.s3) .dvals{height:max(84px,25cqw)}
.scn-dane.s2 .v1{transform:none}.scn-dane.s2 .v2{transform:translateY(115%)}.scn-dane.s2 .v3{transform:translateY(230%)}
.scn-dane.s3 .dv:not(.vok){transform:none}
.dvals{transition:height .7s var(--ease)}

.zbar{background:repeating-linear-gradient(90deg,#1C2320 0 3px,#fff 3px 5px,#1C2320 5px 6px,#fff 6px 10px)}
.pr-db{position:absolute;top:24%;width:30%;height:48%;border-radius:16px;border:2px dashed var(--muted);display:grid;place-content:center;justify-items:center;gap:6px;opacity:0;background:var(--bg)}
.pr-db b{font:650 max(22px,9cqw)/1 var(--display)}
.pr-db span{font:500 max(10px,2.6cqw)/1 var(--mono);color:var(--muted)}
.pr-db.from{left:6%}.pr-db.to{right:6%;border-style:solid;border-color:var(--accent)}
.pr-db.to b{color:var(--accent)}
.scn-pr.s3 .pr-db{opacity:1}
.scn-pr.s3 .pr-new{opacity:0}
.pb-blk{left:38%;z-index:2}
.scn-pr .b1{top:34%}.scn-pr .b2{top:42%}.scn-pr .b3{top:50%}.scn-pr .b4{top:58%}
@keyframes fly{0%{left:14%;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:66%;opacity:0}}

.sticky-cta span{color:inherit;font-size:inherit}
.sticky-cta > span{font-size:14px;color:var(--muted);line-height:1.3}
@media (max-width:860px){.scrolly-vis{max-width:none;background:var(--bg);padding-block:6px 10px;margin:0 calc(-1 * max(20px, env(safe-area-inset-left, 0px)));padding-inline:max(20px, env(safe-area-inset-left, 0px))}.scn{max-width:min(290px,70vw);margin:0 auto}}

/* v4: produkty prosto w menu */
.menu-prod{gap:8px;position:relative}
.menu-prod .ic{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.menu-prod .ic svg{width:15px;height:15px}
.menu-prod[aria-current="page"]{color:var(--fg);background:var(--surface)}
.menu-prod[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--accent)}
@media (max-width:1060px){.menu-prod{justify-content:flex-start;gap:12px}.menu-prod .ic{width:36px;height:36px;border-radius:10px}.menu-prod .ic svg{width:20px;height:20px}.menu-prod[aria-current="page"]::after{display:none}}
.proto a{color:inherit}

/* v4.1: menu w jednej linii */
.menu-top,.btn,.nav .btn{white-space:nowrap;flex-shrink:0}
@media (min-width:1061px){.menu-prod .ic{display:none}.menu{gap:2px}.menu-top{padding:0 14px}}

/* ===== v5: landing zwrotów ===== */
.bagscn{display:grid;gap:18px;overflow:hidden}
.bag-top{display:grid;grid-template-columns:44% 1fr;gap:12px;align-items:center;min-height:150px}
.bag{position:relative;aspect-ratio:1/1;max-width:180px;width:100%;background:#D9CBB0;border-radius:42% 42% 18% 18%/30% 30% 14% 14%;box-shadow:inset 0 -14px 0 rgba(0,0,0,.08),inset 0 10px 0 rgba(255,255,255,.25);display:grid;align-content:center;justify-items:center;gap:8px;padding:12px;animation:bagw 3.2s ease-in-out infinite;transform-origin:50% 100%}
.bag::before{content:"";position:absolute;top:-7%;left:36%;right:36%;height:16%;background:#C4B394;border-radius:6px 6px 2px 2px}
@keyframes bagw{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg) scale(1.01)}}
.bag-l{font-size:11px;color:#4a3d27;text-align:center}
.btags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.btag{font:600 10px/1 var(--mono);letter-spacing:.04em;padding:5px 6px;border-radius:5px;background:#fff;color:#1C2320;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.flyzone{position:relative;height:150px}
.fly{position:absolute;left:0;top:50%;width:34px;height:46px;opacity:0;animation:flyo 3.2s cubic-bezier(.3,.7,.3,1) infinite}
.fly svg{width:100%;height:100%}
.fly.f1{animation-delay:.8s}.fly.f2{animation-delay:1.6s}.fly.f3{animation-delay:2.4s}
@keyframes flyo{0%{opacity:0;transform:translate(-20px,10px) rotate(-20deg) scale(.6)}15%{opacity:1}55%{opacity:1;transform:translate(60px,-50px) rotate(10deg) scale(1)}85%{opacity:0;transform:translate(130px,40px) rotate(0) scale(.7)}100%{opacity:0}}
.stack{position:relative;height:96px}
.offer{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -20px rgba(0,0,0,.4);transition:transform .7s var(--ease),opacity .7s var(--ease);transform-origin:50% 0}
.o-ph{width:52px;height:64px;border-radius:8px;background:#F3EFE8;display:grid;place-items:center}
.o-ph svg{width:30px;height:42px}
.o-tx{display:grid;gap:3px;min-width:0}
.o-tx b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-src{font-size:10px;letter-spacing:.06em;color:var(--muted)}
.o-meta{font-size:13px;color:var(--muted)}
.o-price{font-size:16px;font-weight:500}
.offer[data-pos="0"]{transform:none;opacity:1;z-index:3}
.offer[data-pos="1"]{transform:translateY(10px) scale(.95);opacity:.7;z-index:2}
.offer[data-pos="2"]{transform:translateY(20px) scale(.9);opacity:.35;z-index:1}
.offer[data-pos="3"]{transform:translateY(-30px) scale(1.02);opacity:0;z-index:4}
.bagscn .chip b{font-weight:600;color:inherit}
@media (max-width:480px){.bag-top{grid-template-columns:52% 1fr}}

/* scena: 4 stany i kanały */
.zcond.z4{flex-wrap:wrap;justify-content:center;width:90%;row-gap:6px}
.zch{position:absolute;left:50%;bottom:5%;transform:translateX(-50%) translateY(10px);display:flex;align-items:center;gap:6px;opacity:0;white-space:nowrap}
.zch span{font:500 max(10px,2.6cqw)/1 var(--mono);padding:7px 9px;border-radius:8px;background:var(--surface);border:1px solid var(--line)}
.zch span.mono{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.zch i{width:18px;height:2px;background:var(--accent)}
.scn-zw.s3 .zprice,.scn-zw.s3 .zlive{opacity:1}
.scn-zw.s3 .l4{opacity:1;transform:none}
.scn-zw.s4 .zch{opacity:1;transform:translateX(-50%)}
.scn-zw.s4 .zcard{top:68%}
.scn-zw.s4 .zcond{opacity:.35}

/* porównanie */
.cmp table{min-width:560px}
.cmp td,.cmp th{padding:16px 20px}
.cmp th.us,.cmp td.us{background:var(--accent-soft);text-align:center}
.cmp th:nth-child(2),.cmp td:nth-child(2){text-align:center;color:var(--muted)}
.cmp th.us{color:var(--accent)}
.yes{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.yes svg{width:16px;height:16px}
.no{font:500 18px/1 var(--mono);color:var(--muted)}
.cmp tbody tr{transition:background .2s}
.cmp tbody tr:hover{background:var(--bg)}

/* opinie */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quote{margin:0;padding:28px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:grid;gap:18px}
.quote.ph{border-style:dashed}
.quote blockquote{margin:0;font:500 20px/1.45 var(--display);letter-spacing:-.01em;color:var(--muted)}
.quote figcaption{display:grid;gap:2px}
.quote figcaption span{font:400 12px/1.4 var(--mono);color:var(--warn)}
@media (max-width:760px){.quotes{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.bag,.fly{animation:none}.fly{opacity:0}}

/* v5.1: worek jak worek */
.bag{background:none;box-shadow:none;border-radius:0;padding:22% 12% 8%;aspect-ratio:180/190}
.bag::before{display:none}
.bag .sack{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.bag > *:not(.sack){position:relative;z-index:1}
.flypath{position:absolute;inset:0;width:100%;height:100%}
.flypath path{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:4 6;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-20}}

/* v5.2: tabele */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:15px}
.table-wrap th,.table-wrap td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.table-wrap th{font:500 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.table-wrap tr:last-child td{border-bottom:0}
.cmp th:nth-child(2),.cmp td:nth-child(2),.cmp th.us,.cmp td.us{text-align:center;width:22%}
.bag-l{font-size:10px;max-width:86%;line-height:1.3}

/* v5.3: tylko bezpośrednie spany */
.chipopt span span{display:inline;border:0;padding:0;min-height:0;border-radius:0;background:none;transform:none}
.chipopt input:checked + span span{background:none;transform:none}
.person .avatar{display:grid;place-items:center;color:var(--accent);font:650 18px/1 var(--display)}

/* ===== v6: więcej tłumaczenia i mikroanimacji ===== */
/* pasek postępu czytania */
.readbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.readbar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* słowniczek */
.term{position:relative;border-bottom:1.5px dotted var(--accent);cursor:help;color:var(--fg)}
.term::after{content:attr(data-tip-pl);position:absolute;left:50%;bottom:calc(100% + 10px);width:max-content;max-width:260px;padding:10px 12px;border-radius:10px;background:var(--invert-bg);color:var(--invert-fg);font:400 13px/1.45 var(--body);text-align:left;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s;z-index:20;pointer-events:none;white-space:normal}
html[data-lang="en"] .term::after{content:attr(data-tip-en)}
.term:hover::after,.term:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.term:focus-visible{outline-offset:2px}

/* ikony w kartach problemu */
.pain-ic{width:40px;height:40px;border-radius:12px;background:var(--warn-soft);color:var(--warn);display:grid;place-items:center}
.pain-ic svg{width:22px;height:22px}
.pain-ic .hand{transform-origin:12px 12px;animation:tick 4s steps(8) infinite}
@keyframes tick{to{transform:rotate(360deg)}}
.pain-ic .swing{transform-origin:20px 4px;animation:swing 2.6s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.pain-ic .flash{stroke-width:3;animation:flash 2.4s infinite}
@keyframes flash{0%,80%,100%{opacity:.2}85%{opacity:1}}

/* przechył kart pod myszą */
.tilt{transition:transform .25s var(--ease),box-shadow .3s,border-color .3s;transform-style:preserve-3d;will-change:transform}

/* błysk na głównym przycisku w hero */
.hero .btn-primary{position:relative;overflow:hidden}
.hero .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out 1.5s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}

/* FAQ: płynne pojawienie odpowiedzi */
.faq details[open] p{animation:rise .45s var(--ease) both}
.faq summary:hover{color:var(--accent)}

/* przed i po w tekście */
.typer{display:grid;grid-template-columns:1fr 72px 1.2fr;gap:20px;align-items:center;padding:clamp(22px,3vw,36px);border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.typer > *{min-width:0}
.ty-col{display:grid;gap:10px}
.ty-lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ty-raw{display:block;font:500 15px/1.5 var(--mono);padding:14px 16px;border-radius:12px;background:var(--bg);border:1px dashed var(--line);color:var(--muted);word-break:break-word;transition:opacity .3s}
.ty-out{font:600 clamp(18px,2vw,22px)/1.35 var(--display);letter-spacing:-.01em;min-height:2.7em}
.ty-out.typing::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;background:var(--accent);vertical-align:-.15em;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ty-meta{font-size:12px;color:var(--accent)}
.ty-mid{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--accent)}
.ty-mid svg{width:20px;height:20px}
.ty-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.25;animation:tdot 1.2s infinite}
.ty-dot:nth-child(2){animation-delay:.2s}.ty-dot:nth-child(3){animation-delay:.4s}
@keyframes tdot{30%{opacity:1;transform:translateY(-3px)}}
@media (max-width:760px){.typer{grid-template-columns:1fr}.ty-mid{transform:rotate(90deg);height:40px}}

/* anatomia oferty */
.anat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.anat > *{min-width:0}
.anat-vis{position:relative}
.am-offer{display:grid;grid-template-columns:38% 1fr;gap:18px;padding:18px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -42px rgba(20,40,30,.45)}
.am-ph{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#F3EFE8}
.am-ph svg,.am-photo svg{width:100%;height:100%;display:block}
.am-body{display:grid;gap:10px;align-content:start;min-width:0}
.am-cat{font-size:11px;color:var(--muted)}
.am-title{font:600 17px/1.35 var(--display);letter-spacing:-.01em}
.am-price{font-size:22px;font-weight:500}
.am-cond{font-size:13px;color:var(--accent)}
.am-params{display:flex;flex-wrap:wrap;gap:6px}
.am-params span{font-size:12px;padding:5px 8px;border-radius:7px;background:var(--bg);border:1px solid var(--line)}
.am-desc{display:grid;gap:6px;margin-top:4px}
.am-desc i{display:block;height:7px;border-radius:4px;background:var(--line)}
.am-desc i:nth-child(2){width:86%}.am-desc i:nth-child(3){width:62%}
.am-photo{aspect-ratio:4/5;max-width:380px;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.pin{position:absolute;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;border:0;background:var(--fg);color:var(--bg);font:600 13px/1 var(--mono);cursor:pointer;display:grid;place-items:center;box-shadow:0 0 0 4px color-mix(in srgb,var(--fg) 18%,transparent);transition:transform .3s var(--ease),background .3s}
.pin::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0}
.pin.on{background:var(--accent);color:var(--accent-ink);transform:scale(1.15)}
.pin.on::before{animation:ring 1.4s ease-out infinite}
@keyframes ring{from{opacity:.9;transform:scale(.8)}to{opacity:0;transform:scale(1.6)}}
.anat-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.anat-list li{display:grid;grid-template-columns:32px 1fr;gap:14px;padding:14px 16px;border-radius:14px;cursor:pointer;transition:background .3s,opacity .3s;opacity:.55}
.anat-list li.on{background:var(--surface);opacity:1;box-shadow:inset 3px 0 0 var(--accent)}
.anat-list li:hover{opacity:1}
.pin-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sand);font-size:12px}
.anat-list li.on .pin-n{background:var(--accent);color:var(--accent-ink)}
.anat-list b{display:block;font-weight:600;margin-bottom:2px}
.anat-list p{font-size:15px;color:var(--muted)}
@media (max-width:860px){.anat{grid-template-columns:1fr}.am-offer{grid-template-columns:34% 1fr}}

/* headless: dwa tory */
.lanes{display:grid;gap:18px}
.lane{display:grid;grid-template-columns:150px 1fr;gap:8px 20px;align-items:center;padding:20px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.lane-n{font-weight:600}
.lane-track{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap}
.lane-pt{font-size:12px;color:var(--muted);padding:6px 9px;border-radius:999px;border:1px solid var(--line)}
.lane-box{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:1px dashed var(--warn);color:var(--warn);font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.lane-box.ok{border:1px solid var(--accent);color:var(--accent);flex:0 1 auto}
.lane-bg{font-size:12px;color:var(--muted);padding:8px 10px;border-radius:10px;background:var(--bg);animation:pulse 2s infinite}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .9s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.pkt{position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.lane.slow .pkt{background:var(--warn);box-shadow:0 0 12px var(--warn);animation:pkt 4.2s cubic-bezier(.5,0,.5,1) infinite}
.lane.fast .pkt{animation:pkt 1.2s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes pkt{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.lane-note{grid-column:2;font-size:14px;color:var(--muted)}
@media (max-width:620px){.lane{grid-template-columns:1fr}.lane-note{grid-column:1}}

/* ekosystem na głównej */
.eco{display:grid;grid-template-columns:1fr 80px 1fr 80px 1fr;align-items:center;gap:0}
.eco > *{min-width:0}
.eco-in{display:grid;gap:8px}
.eco-n{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:15px;transition:border-color .3s,transform .3s var(--ease)}
.eco-n:hover{border-color:var(--accent);transform:translateX(4px)}
.eco-n .ic{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.eco-n .ic svg{width:16px;height:16px}
.eco-link{height:4px;border-radius:4px;background:var(--line);position:relative;overflow:hidden;margin:0 8px}
.eco-link i{position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:flow 1.6s linear infinite}
@keyframes flow{from{left:-40%}to{left:100%}}
.eco-mid{display:grid;gap:6px;justify-items:center;text-align:center;padding:26px 18px;border-radius:20px;background:var(--accent-soft);border:1px solid var(--accent)}
.eco-mid b{font:650 20px/1.2 var(--display)}
.eco-mid span{font-size:14px;color:var(--muted)}
.eco-out{display:grid;gap:10px;padding:22px;border-radius:20px;background:var(--invert-bg);color:var(--invert-fg)}
.eco-out b{font:650 22px/1 var(--display)}
.eco-chips{display:flex;flex-wrap:wrap;gap:6px}
.eco-chips span{font:500 12px/1 var(--mono);padding:7px 9px;border-radius:8px;background:color-mix(in srgb,var(--invert-fg) 12%,transparent)}
@media (max-width:900px){.eco{grid-template-columns:1fr}.eco-link{height:36px;width:4px;margin:8px auto}.eco-link i{width:100%;height:40%;animation:flowv 1.6s linear infinite}}
@keyframes flowv{from{top:-40%}to{top:100%}}

@media (prefers-reduced-motion: reduce){.pain-ic *,.hero .btn-primary::after,.ty-dot,.pkt,.eco-link i,.lane-bg,.spin{animation:none!important}.hero .btn-primary::after{display:none}}

/* v6.1: poprawki po zrzutach */
.eco-chips span span,.am-params span span,.zch span span,.tags span span,.lane-pt span{padding:0;border:0;background:none;border-radius:0;font:inherit;color:inherit;box-shadow:none}
.lane-box{display:block;position:relative;padding-right:40px}
.lane-box .spin{position:absolute;right:14px;top:50%;margin-top:-8px}
.lane.fast .lane-bg{flex:1}
.am-offer{padding-right:46px}
@media (max-width:620px){.lane-bg{display:none}.lane-track{flex-wrap:nowrap;gap:8px}.lane-box{font-size:13px}.lane-pt{flex:none}}
body{overflow-x:clip}
.term::after{max-width:min(260px,70vw)}
@media (max-width:760px){.term::after{position:fixed;left:16px;right:16px;top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;transform:translateY(6px)}.term:hover::after,.term:focus-visible::after,.term:focus::after{transform:none;opacity:1;visibility:visible}}
/* v6.2: paleta zamiast worka */
.bag{animation:palb 3.2s ease-in-out infinite;padding:8% 10% 30%;align-content:start;padding-top:18%}
@keyframes palb{0%,100%{transform:none}50%{transform:translateY(-2px)}}
.bag .boxes{animation:boxj 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes boxj{0%,100%{transform:none}10%{transform:scaleY(.98)}}
.bag-l{color:#3b2f1d;font-weight:500}
.bag-l{background:#fff;padding:5px 8px;border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.08);max-width:none;white-space:nowrap}
.offer > *{transition:opacity .4s}
.offer:not([data-pos="0"]) > *{opacity:0}

/* ===== v7: PrestaShop, integracje, motyw ===== */
/* przełącznik motywu */
.theme-t{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .3s var(--ease)}
.theme-t:hover{transform:rotate(-12deg)}
.theme-t svg{width:20px;height:20px}
.theme-t .moon{display:none}
:root[data-theme="dark"] .theme-t .sun{display:none}
:root[data-theme="dark"] .theme-t .moon{display:block}
@media (max-width:420px){.theme-t{width:40px}}

/* autoskalowanie */
.asc{display:grid;gap:14px}
.as-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.as-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.as-users{font-size:13px;color:var(--muted)}
.as-users b{font-size:18px;color:var(--fg);font-weight:500}
.as-graph{width:100%;height:80px;display:block}
.as-line{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke}
.as-area{fill:var(--accent-soft)}
.as-lb{padding:10px 12px;border-radius:10px;border:1px solid var(--accent);color:var(--accent);text-align:center;font-size:12px;position:relative;overflow:hidden}
.as-lb::after{content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(90deg,transparent,var(--accent-soft),transparent);animation:flow 1.4s linear infinite}
.as-lb span{position:relative;z-index:1}
.as-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.as-inst{position:relative;display:grid;gap:2px;padding:12px;border-radius:12px;border:1px dashed var(--line);color:var(--muted);opacity:.35;transform:scale(.96);transition:all .6s var(--ease);overflow:hidden}
.as-inst b{font-size:13px;font-weight:600}
.as-inst span{font-size:11px}
.as-inst.on{opacity:1;transform:none;border:1px solid var(--accent);color:var(--fg);background:var(--surface)}
.as-inst.new{animation:pop .6s var(--ease)}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.as-load{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);width:0;transition:width .8s var(--ease)}
.as-inst.on .as-load{width:var(--l,40%)}

/* sześć korzyści z miniaturami */
.bfs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bf{padding:24px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);display:grid;gap:10px;align-content:start}
.bf p{color:var(--muted);font-size:15px}
.bf-anim{position:relative;height:64px;border-radius:12px;background:var(--bg);overflow:hidden;margin-bottom:6px}
.bf-anim i{position:absolute;display:block}
.bf-instant i{top:12px;width:56px;height:40px;border-radius:6px;background:var(--accent-soft);border:1px solid var(--accent);animation:slidep 2.4s var(--ease) infinite}
.bf-instant i:nth-child(1){left:14px}.bf-instant i:nth-child(2){left:80px;animation-delay:.8s}.bf-instant i:nth-child(3){left:146px;animation-delay:1.6s}
@keyframes slidep{0%,100%{transform:none;opacity:.5}15%{transform:translateY(-4px);opacity:1}30%{transform:none;opacity:.5}}
.bf-seo i{left:14px;height:6px;border-radius:3px;background:var(--accent);width:0;animation:lineg 3s var(--ease) infinite}
.bf-seo i:nth-child(1){top:14px;--w:70%}.bf-seo i:nth-child(2){top:28px;--w:52%;animation-delay:.3s}.bf-seo i:nth-child(3){top:42px;--w:80%;animation-delay:.6s}
@keyframes lineg{0%{width:0}40%,85%{width:var(--w)}100%{width:var(--w);opacity:0}}
.bf-search i:nth-child(1){left:12px;right:12px;top:10px;height:16px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.bf-search i:nth-child(2),.bf-search i:nth-child(3){left:12px;height:7px;border-radius:4px;background:var(--accent-soft);animation:res 2.2s var(--ease) infinite}
.bf-search i:nth-child(2){top:34px;width:60%}.bf-search i:nth-child(3){top:46px;width:42%;animation-delay:.15s}
@keyframes res{0%,20%{opacity:0;transform:translateY(4px)}35%,90%{opacity:1;transform:none}100%{opacity:0}}
.bf-track i{width:10px;height:10px;border-radius:50%;top:27px;background:var(--accent);animation:trk 2s linear infinite}
.bf-track i:nth-child(1){left:14px}.bf-track i:nth-child(2){left:14px;top:12px;background:var(--muted);animation-delay:.3s}.bf-track i:nth-child(3){right:14px;left:auto;width:22px;height:22px;top:21px;border-radius:6px;background:none;border:2px solid var(--accent);animation:none}
@keyframes trk{from{transform:translateX(0);opacity:1}90%{opacity:1}to{transform:translateX(170px);opacity:0}}
.bf-pwa i:nth-child(1){left:50%;top:6px;width:34px;height:56px;margin-left:-17px;border-radius:8px;border:2px solid var(--fg)}
.bf-pwa i:nth-child(2){left:50%;top:12px;width:60px;height:12px;margin-left:-30px;border-radius:6px;background:var(--accent);animation:push 2.6s var(--ease) infinite}
.bf-pwa i:nth-child(3){display:none}
@keyframes push{0%,15%{opacity:0;transform:translateY(-12px)}30%,80%{opacity:1;transform:none}100%{opacity:0}}
.bf-pay i:nth-child(1){left:20px;top:16px;width:52px;height:32px;border-radius:6px;background:var(--fg)}
.bf-pay i:nth-child(2){left:90px;top:22px;width:40px;height:20px;border-radius:5px;border:2px solid var(--accent);animation:pulse 1.4s infinite}
.bf-pay i:nth-child(3){left:146px;top:14px;width:36px;height:36px;border-radius:6px;background:var(--warn-soft);border:2px solid var(--warn);animation:boxj 2s ease-in-out infinite}
@media (max-width:900px){.bfs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.bfs{grid-template-columns:1fr}}

/* pod maską */
.sx{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.sx > *{min-width:0}
.sx-stack{display:grid;gap:8px}
.sx-l{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:500 15px/1.2 var(--body);cursor:pointer;text-align:left;transition:all .3s var(--ease)}
.sx-l .mono{font-size:12px;color:var(--muted)}
.sx-l:hover{border-color:var(--fg)}
.sx-l.on{border-color:var(--accent);background:var(--accent-soft);transform:translateX(8px)}
.sx-l.on .mono{color:var(--accent)}
.sx-panel{position:relative;padding:clamp(22px,3vw,36px);border-radius:20px;background:var(--invert-bg);color:var(--invert-fg);display:grid;align-content:center;overflow:hidden;min-height:260px}
.sx-d{display:grid;gap:12px;animation:rise .45s var(--ease) both;position:relative;z-index:1}
.sx-k{font-size:13px;color:var(--accent)}
.sx-d p{font-size:clamp(18px,2vw,22px);line-height:1.5;font-family:var(--display);letter-spacing:-.01em}
.sx-flow{position:absolute;left:0;right:0;bottom:0;height:3px;background:color-mix(in srgb,var(--invert-fg) 12%,transparent)}
.sx-flow i{position:absolute;top:0;bottom:0;width:25%;background:var(--accent);animation:flow 2s linear infinite}
@media (max-width:860px){.sx{grid-template-columns:1fr}.sx-l.on{transform:none}}

/* realizacje */
.pcases{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pcase{grid-template-columns:1fr}
@media (max-width:760px){.pcases{grid-template-columns:1fr}}

/* integracje */
.ig{display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,4vw,48px);align-items:center}
.ig > *{min-width:0}
.ig-hub{position:relative;display:grid;justify-items:center;gap:14px;padding:30px 20px;border-radius:24px;background:var(--surface);border:1px solid var(--accent)}
.ig-hub::before,.ig-hub::after{content:"";position:absolute;inset:-1px;border-radius:24px;border:1px solid var(--accent);opacity:0;animation:hubr 3s ease-out infinite}
.ig-hub::after{animation-delay:1.5s}
@keyframes hubr{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.12)}}
.ig-hub .logo{height:20px}
.ig-now{font-size:12px;color:var(--muted)}
.ig-now b{color:var(--accent);font-weight:500}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 14px}
.ig-g{display:grid;gap:8px;align-content:start}
.ig-t{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ig-c{display:flex;flex-wrap:wrap;gap:6px}
.ig-x{font-size:13px;font-weight:500;padding:7px 10px;border-radius:9px;background:var(--surface);border:1px solid var(--line);transition:all .35s var(--ease)}
.ig-x.hit{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:translateY(-2px)}
.ig-api{border-style:dashed;border-color:var(--accent);color:var(--accent);animation:pulse 1.6s infinite}
@media (max-width:1000px){.ig-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.ig{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.ig-hub::before,.ig-hub::after,.as-lb::after,.sx-flow i,.bf-anim i{animation:none!important}}
.menu-theme{display:none}
@media (max-width:520px){.nav > .theme-t{display:none}.menu-theme{display:flex;width:auto;gap:10px;padding:0 14px;justify-content:flex-start;margin-top:12px;font:500 16px/1 var(--body)}}

/* ===== v8: kolory produktów, logo marek, film ===== */
:root{--c-ai:#6D4AFF;--c-dane:#1F6FE0;--c-zwroty:#B8620A;--c-presta:#C8005C}
:root[data-theme="dark"]{--c-ai:#A08CFF;--c-dane:#6AA5FF;--c-zwroty:#F2A341;--c-presta:#FF5C9F}
.pg{background:var(--bg);color:var(--fg)}
.acc-ai{--accent:#6D4AFF;--accent-soft:#EEEAFF;--accent-ink:#fff}
.acc-dane{--accent:#1F6FE0;--accent-soft:#E6F0FD;--accent-ink:#fff}
.acc-zwroty{--accent:#B05C08;--accent-soft:#FCF0E1;--accent-ink:#fff}
.acc-presta{--accent:#C8005C;--accent-soft:#FCE6EF;--accent-ink:#fff}
:root[data-theme="dark"] .acc-ai{--accent:#A08CFF;--accent-soft:#241D45;--accent-ink:#120C2A}
:root[data-theme="dark"] .acc-dane{--accent:#6AA5FF;--accent-soft:#142640;--accent-ink:#071425}
:root[data-theme="dark"] .acc-zwroty{--accent:#F2A341;--accent-soft:#33240F;--accent-ink:#1F1404}
:root[data-theme="dark"] .acc-presta{--accent:#FF5C9F;--accent-soft:#3A1424;--accent-ink:#2A0614}
/* delikatna poświata w kolorze produktu za hero */
.pg .hero{position:relative;overflow:hidden}
.pg .hero::before{content:"";position:absolute;right:-10%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent);pointer-events:none;animation:glow 9s ease-in-out infinite alternate}
.pg .hero > .wrap{position:relative}
@keyframes glow{from{transform:translate(0,0) scale(1)}to{transform:translate(-6%,8%) scale(1.1)}}

/* menu: każdy produkt w swoim kolorze */
.mp-ai{--pc:var(--c-ai)}.mp-dane{--pc:var(--c-dane)}.mp-zwroty{--pc:var(--c-zwroty)}.mp-presta{--pc:var(--c-presta)}
.menu-prod .ic{background:color-mix(in srgb,var(--pc) 14%,transparent);color:var(--pc)}
.menu-prod[aria-current="page"]::after{background:var(--pc)}
.menu-prod::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pc);display:inline-block;opacity:.85}
@media (max-width:1060px){.menu-prod::before{display:none}}
.menu-prod:hover{color:var(--pc)}
.door .ic,.eco-n .ic,.more a svg{color:var(--accent)}

/* logo marek */
.bl{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}
.bl-dot{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block;flex:none}
.ig-x{display:inline-flex;align-items:center;gap:7px}
.ig-x span{all:unset}
.sx-l b{display:inline-flex;align-items:center;gap:10px}
.sxlogo{width:20px;height:20px}
.as-inst b{display:inline-flex;align-items:center;gap:6px}
.as-inst .bl{width:14px;height:14px}
.as-leg{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;counter-reset:l}
.as-leg li{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.as-leg li::before{counter-increment:l;content:counter(l);width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:600 11px/1 var(--mono)}

/* ===== film PrestaShop premium ===== */
.film-sec{background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--accent) 6%,var(--bg)))}
.film{display:grid;gap:14px}
.fstage{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:24px;overflow:hidden;background:radial-gradient(120% 90% at 80% 0%,#3A0F27 0%,#130A12 55%,#0B080C 100%);color:#F4EEF2;box-shadow:0 40px 80px -40px rgba(120,0,60,.55);container-type:inline-size}
.fgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:6cqw 6cqw;mask-image:radial-gradient(closest-side,#000,transparent)}
.sc{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.97);transition:opacity .6s var(--ease),transform .8s var(--ease);pointer-events:none}
.sc.on{opacity:1;transform:none}
.fl{width:7cqw;height:7cqw;filter:drop-shadow(0 0 2cqw rgba(255,255,255,.12))}
.fl path[fill="currentColor"]{fill:#fff}
/* 0: przeglądarka */
.br{width:56cqw;border-radius:1.6cqw;background:#1D1620;border:1px solid rgba(255,255,255,.12);overflow:hidden}
.br-bar{display:flex;align-items:center;gap:.8cqw;padding:1.2cqw 1.6cqw;background:#251C28}
.br-bar i{width:1cqw;height:1cqw;border-radius:50%;background:#5a4a5f}
.br-bar span{margin-left:1.6cqw;font:500 1.6cqw/1 var(--mono);color:#b9a9bd}
.br-body{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4cqw;padding:2cqw}
.tile{aspect-ratio:3/4;border-radius:1cqw;background:linear-gradient(160deg,#3a2a40,#2a1f2e)}
.sc0.on .tile{animation:tilein .6s var(--ease) both}
.sc0.on .tile:nth-child(2){animation-delay:.1s}.sc0.on .tile:nth-child(3){animation-delay:.2s}.sc0.on .tile:nth-child(4){animation-delay:.3s}
@keyframes tilein{from{opacity:0;transform:translateY(1.5cqw)}}
.cursor{position:absolute;left:58%;top:62%;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#FF5C9F;box-shadow:0 0 0 1cqw rgba(255,92,159,.25);opacity:0}
.sc0.on .cursor{animation:clk 2.4s var(--ease) .4s infinite}
@keyframes clk{0%{opacity:0;transform:translate(6cqw,6cqw)}30%{opacity:1;transform:none}40%{transform:scale(.7)}50%,100%{transform:none;opacity:1}}
.edge{position:absolute;right:6%;top:10%;display:flex;align-items:center;gap:1cqw;font:600 1.8cqw/1 var(--body);padding:1cqw 1.6cqw;border-radius:99px;background:rgba(255,255,255,.08)}
.edge .fl{width:4cqw;height:4cqw}
/* 1: składanie strony */
.asm{position:relative;width:60cqw;height:34cqw}
.asm .fl{position:absolute;top:0;width:6cqw;height:6cqw}
.asm .fl:nth-of-type(1){left:0}.asm .fl:nth-of-type(2){right:0}
.page{position:absolute;left:18cqw;right:18cqw;top:4cqw;bottom:0;border-radius:1.6cqw;border:1px dashed rgba(255,255,255,.25)}
.blk{position:absolute;font:500 1.7cqw/1 var(--mono);padding:1.2cqw 1.6cqw;border-radius:1cqw;background:#00DC82;color:#06281a}
.blk.b3,.blk.b4{background:#FF4438;color:#fff}
.b1{left:20cqw;top:6cqw}.b2{left:20cqw;top:13cqw;right:20cqw}.b3{left:20cqw;top:22cqw}.b4{right:20cqw;top:22cqw}
.sc1.on .blk{animation:fly1 .8s var(--ease) both}
.sc1.on .b2{animation-delay:.25s}.sc1.on .b3{animation-delay:.5s;animation-name:fly2}.sc1.on .b4{animation-delay:.7s;animation-name:fly2}
@keyframes fly1{from{opacity:0;transform:translate(-14cqw,-6cqw)}}
@keyframes fly2{from{opacity:0;transform:translate(14cqw,-6cqw)}}
/* 2: klaster */
.clu{width:62cqw;display:grid;gap:2cqw}
.clu-h{display:flex;align-items:center;gap:1.4cqw;font:600 2cqw/1 var(--body)}
.clu-h .fl{width:5cqw;height:5cqw}
.pods{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw}
.pod{display:grid;justify-items:center;gap:.8cqw;padding:1.6cqw .6cqw;border-radius:1.2cqw;border:1px solid rgba(255,92,159,.5);background:rgba(200,0,92,.12);font:500 1.5cqw/1 var(--mono);opacity:.15}
.pod .plg{width:4cqw;height:4cqw}
.sc2.on .pod{animation:podon .5s var(--ease) both}
.sc2.on .p0{animation-delay:.1s}.sc2.on .p1{animation-delay:.3s}.sc2.on .p2{animation-delay:1.1s}.sc2.on .p3{animation-delay:1.5s}.sc2.on .p4{animation-delay:2.3s}.sc2.on .p5{animation-delay:2.7s}
@keyframes podon{to{opacity:1;transform:translateY(-.5cqw)}}
.meter{height:1cqw;border-radius:1cqw;background:rgba(255,255,255,.1);overflow:hidden}
.meter i{display:block;height:100%;width:15%;background:linear-gradient(90deg,#FF5C9F,#FFB36B)}
.sc2.on .meter i{animation:meter 3.2s var(--ease) both}
@keyframes meter{to{width:92%}}
/* 3: wyszukiwanie */
.srch{width:50cqw;display:grid;gap:1.4cqw;justify-items:start}
.srch .fl{width:5cqw;height:5cqw}
.sbox{width:100%;padding:1.6cqw 2cqw;border-radius:1.4cqw;background:#fff;color:#111;font:500 2.2cqw/1 var(--body)}
.stype{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid #C8005C;width:0}
.sc3.on .stype{animation:type 1.2s steps(12) .2s both}
@keyframes type{to{width:12ch}}
.sres{display:block;height:3.4cqw;border-radius:1cqw;background:rgba(255,255,255,.1);width:100%;opacity:0}
.r2{width:84%}.r3{width:66%}
.sc3.on .sres{animation:res2 .4s var(--ease) both}
.sc3.on .r1{animation-delay:1.5s}.sc3.on .r2{animation-delay:1.62s}.sc3.on .r3{animation-delay:1.74s}
@keyframes res2{from{opacity:0;transform:translateY(1cqw)}to{opacity:1}}
/* 4: baza */
.db{position:relative;width:54cqw;height:30cqw;display:grid;place-items:center}
.db .fl{position:absolute;top:0}
.db .fl:nth-of-type(1){left:6cqw}.db .fl:nth-of-type(2){right:6cqw}
.cyl{display:grid;gap:.6cqw}
.cyl i{display:block;width:16cqw;height:5cqw;border-radius:50%/40%;background:linear-gradient(180deg,#5a8fc0,#2f5f8f);box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.25)}
.ord{position:absolute;font:500 1.6cqw/1 var(--mono);padding:1cqw 1.4cqw;border-radius:1cqw;background:#fff;color:#111;opacity:0}
.o1{left:0;top:50%}.o2{right:0;top:30%}
.sc4.on .o1{animation:ordin 2.4s var(--ease) .3s infinite}
.sc4.on .o2{animation:ordin2 2.4s var(--ease) 1.2s infinite}
@keyframes ordin{0%{opacity:0;transform:translateX(-4cqw)}30%{opacity:1;transform:none}70%{opacity:1;transform:translateX(14cqw) scale(.8)}100%{opacity:0;transform:translateX(18cqw) scale(.5)}}
@keyframes ordin2{0%{opacity:0;transform:translateX(4cqw)}30%{opacity:1;transform:none}70%{opacity:1;transform:translateX(-14cqw) scale(.8)}100%{opacity:0;transform:translateX(-18cqw) scale(.5)}}
/* 5: wdrożenia */
.pipe{position:relative;width:66cqw;display:flex;align-items:center;justify-content:space-between;gap:1cqw;padding-bottom:9cqw}
.pipe::before{content:"";position:absolute;left:4cqw;right:4cqw;top:3cqw;height:.4cqw;background:rgba(255,255,255,.15)}
.st{position:relative;z-index:1;display:grid;place-items:center;width:12cqw;height:6cqw;border-radius:1.2cqw;background:#251C28;border:1px solid rgba(255,255,255,.15);font:500 1.7cqw/1 var(--mono)}
.sc5.on .st{animation:stok .4s var(--ease) both}
.sc5.on .s1{animation-delay:.2s}.sc5.on .s2{animation-delay:.8s}.sc5.on .s3{animation-delay:1.4s}.sc5.on .s4{animation-delay:2s}
@keyframes stok{to{background:#0f3b2a;border-color:#00DC82;color:#7CFFC4}}
.sent{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:1.2cqw;padding:1.2cqw 2cqw;border-radius:99px;background:rgba(255,255,255,.08);font:600 1.8cqw/1 var(--body)}
.sent .fl{width:4cqw;height:4cqw}
/* 6: plansza końcowa */
.endc{display:grid;justify-items:center;gap:1.6cqw;text-align:center}
.endc .fl{width:10cqw;height:10cqw}
.endc b{font:650 6cqw/1 var(--display);letter-spacing:-.02em;background:linear-gradient(90deg,#fff,#FFB3D2,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%}
.sc6.on .endc b{animation:shimmer 3s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}
.endc .mono{font-size:1.8cqw;color:#d9bfcc;letter-spacing:.2em;text-transform:uppercase}
.badges{display:flex;gap:1.2cqw;flex-wrap:wrap;justify-content:center}
.badges span{font:500 1.8cqw/1 var(--mono);padding:1.2cqw 1.8cqw;border-radius:99px;border:1px solid rgba(255,179,210,.4)}
/* sterowanie, napisy, rozdziały */
.fbar{display:flex;align-items:center;gap:14px}
.fplay{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;flex:none}
.fplay svg{width:20px;height:20px}
.fplay .i-play{display:none}
.film.paused .fplay .i-play{display:block}.film.paused .fplay .i-pause{display:none}
.fprog2{flex:1;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.fprog2 i{display:block;height:100%;width:0;background:var(--accent)}
.ftime{font-size:13px;color:var(--muted);min-width:48px;text-align:right}
.fcaps{min-height:120px}
.fc{display:grid;gap:6px;max-width:72ch;animation:rise .45s var(--ease) both}
.fc-n{font-size:12px;color:var(--accent)}
.fc b{font:650 22px/1.25 var(--display);letter-spacing:-.01em}
.fc p{color:var(--muted);font-size:17px}
.fchaps{display:flex;flex-wrap:wrap;gap:8px}
.fch{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 14px/1 var(--body);cursor:pointer;overflow:hidden}
.fch i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.fch.on{color:var(--fg);border-color:var(--accent)}
.fch.done i{width:100%}
.fch span{position:relative}
@media (max-width:620px){.fcaps{min-height:170px}.fch{min-height:44px}}
@media (prefers-reduced-motion: reduce){.sc *{animation:none!important}.pod{opacity:1}.stype{width:auto}.sres{opacity:1}.pg .hero::before{animation:none}}
@media (max-width:620px){.fstage{aspect-ratio:4/3}.fl{width:9cqw;height:9cqw}.blk,.st,.ord,.pod,.badges span,.br-bar span,.edge,.clu-h,.sent{font-size:max(10px,2.4cqw)!important}.sbox{font-size:max(12px,3cqw)}.endc b{font-size:8cqw}.fchaps{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.fch{flex:none}.br{width:72cqw}.clu,.pipe{width:84cqw}.srch{width:70cqw}}

/* ===== v9: typografia liczb, odtwarzacz filmów, sceny AI, danych i zwrotów ===== */
.proof-in b.pnum{font:650 clamp(22px,2.4vw,28px)/1.1 var(--display);letter-spacing:-.02em;color:var(--fg)}
.proof-in b.pnum span{font:inherit}

/* scena flat lay w scrollytellingu AI: blat zamiast magazynu, bez wieszaka */
.scn-ai .f-hanger{display:none}
.scn-ai .ai-mess{background:repeating-linear-gradient(180deg,#D8CCB8 0 24%,#CDBFA8 24% 25%)}
.scn-ai .ai-mess::before,.scn-ai .ai-mess::after{display:none}

/* odtwarzacz: scena w kolorze produktu */
.fstage{background:radial-gradient(120% 90% at 80% 0%,color-mix(in srgb,var(--accent) 42%,#0b080c) 0%,#120d14 55%,#0b0a0c 100%);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--accent) 60%,transparent)}
.sc{visibility:hidden}
.sc.on{visibility:visible}
/* napis w kadrze */
.flt{position:absolute;left:4%;bottom:6%;display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw 2cqw 1.2cqw 1.2cqw;border-radius:1.4cqw;background:rgba(10,8,12,.72);backdrop-filter:blur(6px);color:#fff;opacity:0;transform:translateY(1.5cqw);transition:opacity .45s var(--ease),transform .55s var(--ease);z-index:4;max-width:70%}
.flt > span{font-size:max(10px,1.6cqw);padding:.7cqw 1cqw;border-radius:.8cqw;background:var(--accent);color:var(--accent-ink)}
.flt b{font:600 max(12px,2.4cqw)/1.2 var(--display);letter-spacing:-.01em}
.flt.on{opacity:1;transform:none;transition-delay:.25s}
/* przejście między scenami */
.fwipe{position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent);z-index:5;pointer-events:none;opacity:0}
.fwipe.go{animation:wipe .7s var(--ease)}
@keyframes wipe{0%{left:-30%;opacity:1}100%{left:110%;opacity:1}}
/* ponowne odtworzenie */
.freplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:0;background:#fff;color:#111;font:600 15px/1 var(--body);cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.freplay svg{width:18px;height:18px}
.film:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:24px}
.tag2{position:absolute;right:6%;top:8%;font-size:max(11px,1.8cqw);padding:1cqw 1.4cqw;border-radius:99px;background:#fff;color:#111}

/* --- film AI --- */
.hg{width:26cqw;height:auto;filter:drop-shadow(0 2cqw 3cqw rgba(0,0,0,.35))}
.mag,.cut,.dress{position:relative;display:grid;place-items:center;width:40cqw;height:46cqw}
.ai0.on .hg{animation:drop .8s var(--ease) both}
@keyframes drop{from{opacity:0;transform:translateY(-4cqw) rotate(-6deg)}}
.cut-bg{position:absolute;inset:0;border-radius:2cqw;background:#fff;clip-path:inset(0 100% 0 0)}
.ai1.on .cut-bg{animation:revealx 1.1s var(--ease) .3s both}
@keyframes revealx{to{clip-path:inset(0 0 0 0)}}
.cut .hg.flat rect,.cut .hg.flat path[stroke]{transition:opacity .4s}
.ai1.on .cut .hg.flat > rect,.ai1.on .cut .hg.flat > path{animation:fadeo .4s 1.2s both}
@keyframes fadeo{to{opacity:0}}
.cut-line{position:absolute;top:0;bottom:0;left:0;width:.5cqw;background:var(--accent);box-shadow:0 0 2cqw var(--accent);opacity:0}
.ai1.on .cut-line{animation:linex 1.1s var(--ease) .3s both}
@keyframes linex{0%{opacity:1;left:0}100%{opacity:0;left:100%}}
.cn{position:absolute;width:5cqw;height:5cqw;border:.5cqw solid var(--accent);opacity:0}
.c1{left:0;top:0;border-right:0;border-bottom:0}.c2{right:0;top:0;border-left:0;border-bottom:0}.c3{left:0;bottom:0;border-right:0;border-top:0}.c4{right:0;bottom:0;border-left:0;border-top:0}
.ai1.on .cn{animation:podon .4s var(--ease) 1.4s both}
.avs{display:flex;gap:4cqw}
.av{display:grid;justify-items:center;gap:1.4cqw;opacity:.45;transition:all .4s var(--ease)}
.av svg{width:14cqw;height:14cqw;border-radius:50%;border:.5cqw solid transparent}
.av b{font:600 max(11px,2cqw)/1 var(--body)}
.ai2.on .av{animation:podon .5s var(--ease) both}
.ai2.on .av:nth-child(2){animation-delay:.15s}.ai2.on .av:nth-child(3){animation-delay:.3s}
.ai2.on .av.on svg{animation:ringon .5s var(--ease) 1.2s both}
@keyframes ringon{to{border-color:var(--accent);transform:scale(1.12)}}
.dr-a,.dr-b{position:absolute;inset:0;display:grid;place-items:center}
.dr-b svg{width:28cqw;height:35cqw;border-radius:2cqw;overflow:hidden}
.dr-b{opacity:0;transform:scale(.92)}
.ai3.on .dr-a,.zw3.on .dr-a{animation:fadeo .6s var(--ease) 1s both}
.ai3.on .dr-b,.zw3.on .dr-b{animation:popin .8s var(--ease) 1.1s both}
@keyframes popin{to{opacity:1;transform:none}}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw;width:70cqw}
.gc{position:relative;border-radius:1.4cqw;overflow:hidden;background:#F3EFE8}
.gc svg{width:100%;aspect-ratio:4/5;display:block}
.gc span{position:absolute;left:.8cqw;bottom:.8cqw;font:500 max(10px,1.5cqw)/1 var(--mono);padding:.6cqw .9cqw;border-radius:99px;background:#fff;color:#111}
.ai4.on .gc{animation:tilein .5s var(--ease) both}
.ai4.on .gc:nth-child(2){animation-delay:.15s}.ai4.on .gc:nth-child(3){animation-delay:.3s}.ai4.on .gc:nth-child(4){animation-delay:.45s}

/* --- film danych --- */
.fil{display:grid;gap:1cqw;width:36cqw;padding:2.4cqw;border-radius:1.6cqw;background:#fff;color:#111}
.fil b{font-size:max(11px,1.8cqw);margin-bottom:.6cqw}
.ln{font-size:max(11px,1.9cqw);padding:.8cqw 1cqw;border-radius:.6cqw;background:#F1F3F6;opacity:0}
.da0.on .ln{animation:tilein .4s var(--ease) both}
.da0.on .l2{animation-delay:.35s}.da0.on .l3{animation-delay:.7s}.da0.on .l4{animation-delay:1.05s}
.hub{position:relative;width:66cqw;height:40cqw}
.nd{position:absolute;display:grid;justify-items:center;gap:.8cqw;width:16cqw;padding:1.6cqw 1cqw;border-radius:1.4cqw;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font:500 max(10px,1.6cqw)/1 var(--mono)}
.nd svg{width:4cqw;height:4cqw;color:var(--accent)}
.nd b{font-weight:500}
.n1{left:0;top:0}.n2{right:0;top:0}.n3{left:0;bottom:0}.n4{right:0;bottom:0}
.core,.core2{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:2cqw 2.6cqw;border-radius:1.6cqw;background:#fff;color:#111;font:600 max(11px,2cqw)/1 var(--mono)}
.pk{position:absolute;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--accent);box-shadow:0 0 1.6cqw var(--accent);opacity:0}
.k1{left:12%;top:18%}.k2{right:12%;top:18%}.k3{left:12%;bottom:18%}.k4{right:12%;bottom:18%}
.da1.on .k1{animation:pk1 1.4s var(--ease) infinite}.da1.on .k2{animation:pk2 1.4s var(--ease) .3s infinite}.da1.on .k3{animation:pk3 1.4s var(--ease) .6s infinite}.da1.on .k4{animation:pk4 1.4s var(--ease) .9s infinite}
@keyframes pk1{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(22cqw,12cqw)}}
@keyframes pk2{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-22cqw,12cqw)}}
@keyframes pk3{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(22cqw,-12cqw)}}
@keyframes pk4{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-22cqw,-12cqw)}}
.mrg{position:relative;width:50cqw;height:24cqw}
.mv{position:absolute;left:50%;font-size:max(11px,2.2cqw);padding:1.2cqw 1.8cqw;border-radius:99px;background:rgba(255,255,255,.12);white-space:nowrap;transform:translateX(-50%)}
.m1{top:0}.m2{top:8cqw}.m3{top:16cqw}
.mok{top:8cqw;background:var(--accent);color:var(--accent-ink);opacity:0;transform:translateX(-50%) scale(.8)}
.da2.on .m1{animation:mtop 1s var(--ease) 1s both}.da2.on .m2{animation:mmid 1s var(--ease) 1s both}.da2.on .m3{animation:mbot 1s var(--ease) 1s both}
.da2.on .mok{animation:mok .5s var(--ease) 1.9s both}
@keyframes mtop{to{top:8cqw;opacity:0}}@keyframes mmid{to{opacity:0}}@keyframes mbot{to{top:8cqw;opacity:0}}
@keyframes mok{to{opacity:1;transform:translateX(-50%) scale(1)}}
.chk{display:grid;grid-template-columns:auto 1fr auto;gap:2cqw;align-items:center;width:58cqw}
.chk .fl{width:8cqw;height:8cqw}
.chk ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1cqw 2cqw}
.chk li{display:flex;align-items:center;gap:1cqw;font-size:max(11px,2cqw)}
.chk li i{width:2.6cqw;height:2.6cqw;border-radius:50%;border:.4cqw solid rgba(255,255,255,.3);flex:none}
.da3.on .chk li i{animation:tickon .3s var(--ease) both}
.da3.on .chk li:nth-child(1) i{animation-delay:.3s}.da3.on .chk li:nth-child(2) i{animation-delay:.6s}.da3.on .chk li:nth-child(3) i{animation-delay:.9s}.da3.on .chk li:nth-child(4) i{animation-delay:1.2s}.da3.on .chk li:nth-child(5) i{animation-delay:1.5s}.da3.on .chk li:nth-child(6) i{animation-delay:1.8s}
@keyframes tickon{to{background:var(--accent);border-color:var(--accent)}}
.cnt{font-size:max(14px,4cqw);color:var(--accent)}
.exp,.chn{position:relative;width:64cqw;height:36cqw}
.ex{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:1cqw;padding:1.4cqw 2cqw;border-radius:1.2cqw;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font:600 max(11px,2cqw)/1 var(--body);opacity:0}
.ex .bl{width:2.6cqw;height:2.6cqw}
.da4.on .e1,.zw5.on .e1{animation:ex1 .7s var(--ease) .4s both}.da4.on .e2,.zw5.on .e2{animation:ex2 .7s var(--ease) .6s both}.da4.on .e3,.zw5.on .e3{animation:ex3 .7s var(--ease) .8s both}.da4.on .e4,.zw5.on .e4{animation:ex4 .7s var(--ease) 1s both}
@keyframes ex1{to{opacity:1;transform:translate(-160%,-190%)}}@keyframes ex2{to{opacity:1;transform:translate(60%,-190%)}}@keyframes ex3{to{opacity:1;transform:translate(-160%,90%)}}@keyframes ex4{to{opacity:1;transform:translate(60%,90%)}}

/* --- film zwrotów --- */
.palin{position:relative;display:grid;justify-items:center;gap:2cqw}
.palx{width:34cqw;height:auto;filter:drop-shadow(0 2cqw 3cqw rgba(0,0,0,.4))}
.zw0.on .palx{animation:palin 1s var(--ease) both}
@keyframes palin{from{opacity:0;transform:translateX(-30cqw)}}
.ptags{display:flex;gap:1cqw}
.ptags span{font:700 max(10px,1.6cqw)/1 var(--mono);padding:1cqw 1.2cqw;border-radius:.8cqw;background:#fff;color:#111;opacity:0}
.zw0.on .ptags span{animation:podon .4s var(--ease) both}
.zw0.on .ptags span:nth-child(1){animation-delay:.8s}.zw0.on .ptags span:nth-child(2){animation-delay:.95s}.zw0.on .ptags span:nth-child(3){animation-delay:1.1s}.zw0.on .ptags span:nth-child(4){animation-delay:1.25s}
.palin .tag2{position:static}
.lab{position:relative;display:grid;justify-items:center;gap:1.6cqw;padding:3cqw 4cqw;border-radius:1.6cqw;background:#fff;color:#111;overflow:hidden}
.bars{width:34cqw;height:12cqw;background:repeating-linear-gradient(90deg,#111 0 .5cqw,#fff .5cqw .9cqw,#111 .9cqw 1.1cqw,#fff 1.1cqw 1.8cqw)}
.lab b{font-size:max(12px,2.2cqw)}
.beam{position:absolute;left:4%;right:4%;top:15%;height:.5cqw;background:#E5484D;box-shadow:0 0 2cqw #E5484D}
.zw1.on .beam{animation:beam2 1.2s ease-in-out infinite alternate}
@keyframes beam2{to{top:72%}}
.cds{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw}
.cd{font:500 max(11px,2.2cqw)/1 var(--body);padding:2cqw 2.6cqw;border-radius:1.4cqw;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);text-align:center}
.zw2.on .cd{animation:cdsel 3.6s steps(1) both}
.zw2.on .d1{animation-delay:.9s}.zw2.on .d2{animation-delay:1.8s}.zw2.on .d3{animation-delay:2.7s}
@keyframes cdsel{0%{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}25%,100%{background:rgba(255,255,255,.08);color:inherit;border-color:rgba(255,255,255,.2)}}
.zw2.on .d0{animation-name:cdsel0}
@keyframes cdsel0{0%,24%{background:var(--accent);color:var(--accent-ink)}25%,100%{background:rgba(255,255,255,.08)}}
.ofr{display:grid;justify-items:center;gap:2cqw}
.ofr .fl{width:7cqw;height:7cqw}
.ofc{display:grid;grid-template-columns:14cqw 1fr;gap:2cqw;align-items:center;width:50cqw;padding:2cqw;border-radius:1.6cqw;background:#fff;color:#111}
.ofp svg{width:100%;aspect-ratio:4/5;display:block;border-radius:1cqw}
.ofc b{display:block;font:600 max(12px,2.2cqw)/1.25 var(--display);margin-bottom:1cqw}
.ofc .mono{display:block;font-size:max(13px,3cqw)}
.ofc em{display:inline-block;margin-top:1cqw;font:500 max(10px,1.6cqw)/1 var(--mono);font-style:normal;padding:.8cqw 1.2cqw;border-radius:99px;background:#E3F2EB;color:#23855F;opacity:0}
.zw4.on .ofc{animation:tilein .6s var(--ease) .2s both}
.zw4.on .ofc em{animation:popin .4s var(--ease) 1.4s both}
@media (max-width:620px){.g4{width:84cqw}.hub,.exp,.chn{width:84cqw;height:48cqw}.chk{width:84cqw}.ofc{width:76cqw}.fil{width:60cqw}.hg{width:34cqw}.mag,.cut,.dress{width:56cqw;height:60cqw}}
@media (prefers-reduced-motion: reduce){.fwipe{display:none}.ln,.ex,.mok,.ofc em,.ptags span,.dr-b{opacity:1!important;transform:none!important}}
.flt span span{all:unset}
.flt > span{font-size:max(10px,1.6cqw)}
.sc{box-sizing:border-box;padding-bottom:11cqw}
.mag,.cut,.dress{width:34cqw;height:38cqw}
.hg{width:22cqw}
.dr-b svg{width:24cqw;height:30cqw}
.palx{width:28cqw}
.hub{height:36cqw}
@media (max-width:620px){.mag,.cut,.dress{width:48cqw;height:52cqw}.hg{width:30cqw}}
.zw2.on .cd{animation:cdsel .9s steps(1,end) forwards!important}
.zw2.on .d0{animation-delay:.3s!important}.zw2.on .d1{animation-delay:1.2s!important}.zw2.on .d2{animation-delay:2.1s!important}
.zw2.on .d3{animation:cdlast .4s var(--ease) 3s forwards!important}
@keyframes cdsel{0%{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}100%{background:rgba(255,255,255,.08);color:inherit;border-color:rgba(255,255,255,.2)}}
@keyframes cdlast{to{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}}

/* v10: nowe logo (A1 v3) */
.logo{height:26px}
@media (max-width:420px){.logo{height:21px}}
.ig-hub .logo{height:26px}

/* ===== v11: prostota, miejsce, uwaga prowadzona do kontaktu ===== */
/* więcej powietrza, mniej linii */
.block{border-top:0;padding-block:clamp(84px,10vw,150px)}
.block-head{margin-bottom:clamp(40px,5vw,72px)}
.block-head .lead{max-width:52ch}
.proof{border-block:0;background:transparent}
.proof-in{border-block:1px solid var(--line)}
.hero{padding-block:clamp(56px,8vw,120px) clamp(48px,6vw,90px)}
.hero h1{max-width:13ch}
.hero .lead{max-width:44ch}

/* pas z akcją po filmie */
.midcta{padding-block:0 clamp(40px,6vw,80px)}
.midcta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(22px,3vw,34px) clamp(22px,4vw,44px);border-radius:24px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.midcta-in p{font:600 clamp(19px,2.2vw,24px)/1.35 var(--display);letter-spacing:-.01em;max-width:46ch;color:var(--fg)}

/* przycisk: pulsujący pierścień raz, gdy wjedzie w widok */
.cta-pulse,.btn-big{position:relative}
.cta-pulse::after,.btn-big::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--accent);opacity:0;pointer-events:none}
.pulsed::after{animation:ctaring 1.6s var(--ease) 2}
@keyframes ctaring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.5)}}
.btn-big{min-height:56px;padding:0 28px;font-size:17px}
.magnet{transition:transform .25s var(--ease),box-shadow .25s}

/* kulminacja */
.final{position:relative;overflow:hidden;padding-block:clamp(90px,11vw,160px);background:#0E1311;color:#F2F6F4;isolation:isolate}
.final-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.final-bg i{position:absolute;width:52vmax;aspect-ratio:1;border-radius:50%;filter:blur(70px);opacity:.55}
.final-bg i:nth-child(1){left:-12%;top:-30%;background:color-mix(in srgb,var(--accent) 70%,transparent);animation:drift1 16s ease-in-out infinite alternate}
.final-bg i:nth-child(2){right:-18%;bottom:-40%;background:color-mix(in srgb,var(--accent) 40%,#23855F);animation:drift2 19s ease-in-out infinite alternate}
.final-bg i:nth-child(3){left:35%;top:30%;width:30vmax;background:color-mix(in srgb,var(--accent) 30%,#6D4AFF);opacity:.25;animation:drift1 22s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(8%,10%) scale(1.08)}}
@keyframes drift2{to{transform:translate(-10%,-6%) scale(.95)}}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.final-grid > *{min-width:0}
.final-copy{display:grid;gap:22px;align-content:start}
.final .eyebrow{color:color-mix(in srgb,var(--accent) 55%,#fff)}
.final h2{font-size:clamp(34px,4.6vw,56px);line-height:1.05;color:#fff}
.final .lead{color:rgba(242,246,244,.78)}
.fnext{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.fnext li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:12px 0;opacity:.45;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fnext li.on{opacity:1;transform:none}
.fn-n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.35);font-size:13px;transition:all .4s}
.fnext li.on .fn-n{background:color-mix(in srgb,var(--accent) 70%,#fff);border-color:transparent;color:#0E1311}
.fnext b{display:block;font-weight:600;font-size:17px;color:#fff}
.fnext p{font-size:15px;color:rgba(242,246,244,.7)}
.final .person span{color:rgba(242,246,244,.7)}
.final .person b{color:#fff}
.final .avatar{background:rgba(255,255,255,.1);color:#fff}
.altc{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px;color:rgba(242,246,244,.75)}
.altc b{color:#fff;font-weight:500;font-size:16px}
.copyb{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:500 13px/1 var(--body);cursor:pointer}
.copyb:hover{background:rgba(255,255,255,.1)}
.final-card{background:var(--surface);color:var(--fg);border:0;box-shadow:0 40px 90px -40px rgba(0,0,0,.7);padding:clamp(26px,3vw,38px)}
.final-card .trust{margin:6px 0 0;padding-top:18px;border-top:1px solid var(--line);gap:8px}
.final-card .trust li{font-size:14px;color:var(--muted)}
.final-card input:focus,.final-card textarea:focus{transform:translateY(-1px)}
@media (max-width:860px){.final-grid{grid-template-columns:1fr}}

/* potwierdzenie: rysowany ptaszek */
.done{display:grid;gap:12px;justify-items:start}
.tick{width:56px;height:56px}
.tick circle{stroke:var(--accent);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:tickc .6s var(--ease) forwards}
.tick path{stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:tickc .4s var(--ease) .5s forwards}
@keyframes tickc{to{stroke-dashoffset:0}}

/* sticky na telefonie: chowa się przy kulminacji (bez zmian w logice) */
@media (prefers-reduced-motion: reduce){.final-bg i,.pulsed::after{animation:none!important}.fnext li{opacity:1;transform:none}}
@media (max-width:860px){.final-grid{display:flex;flex-direction:column;align-items:stretch;gap:22px}.final-copy{display:contents}.final-copy > .eyebrow{order:1}.final-copy > h2{order:2}.final-copy > .lead{order:3}.final-card{order:4;margin-block:8px 18px}.fnext{order:5}.final-copy > .person{order:6}.altc{order:7}}

/* ===== v12: kalkulator zachęcający, formularz prowadzący, żywszy film ===== */
/* --- kalkulator --- */
.calc2{display:grid;grid-template-columns:1.05fr .95fr;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:var(--surface);box-shadow:0 40px 80px -50px rgba(20,40,30,.35)}
.calc2 > *{min-width:0}
.calc2 .calc-in{padding:clamp(24px,3.5vw,44px);display:grid;gap:26px;align-content:start;position:relative}
.cpres{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cpres-l{font-size:14px;color:var(--muted);width:100%}
.cpre{display:grid;gap:2px;justify-items:start;min-height:56px;padding:10px 16px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s}
.cpre b{font-size:16px;font-weight:500}
.cpre span{font-size:12px;color:var(--muted)}
.cpre:hover{transform:translateY(-2px);border-color:var(--accent)}
.cpre.on{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 10px 24px -16px var(--accent)}
.cpre.on b{color:var(--accent)}
.chint{position:absolute;right:clamp(24px,3.5vw,44px);top:calc(clamp(24px,3.5vw,44px) + 96px);display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:var(--accent);opacity:1;transition:opacity .4s;pointer-events:none}
.chint i{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:hintb 1.4s ease-in-out infinite}
@keyframes hintb{50%{transform:translateX(-10px);opacity:.4}}
.calc2.touched .chint{opacity:0}
.cf{display:grid;gap:10px}
.cf-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cf-top label{font-weight:500;font-size:15px}
.cf-val{display:inline-flex;align-items:center;gap:6px}
.cnum{width:96px;min-height:40px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:16px;text-align:right;-moz-appearance:textfield}
.cnum::-webkit-inner-spin-button{opacity:.4}
.cnum:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.cf-val .mono{font-size:13px;color:var(--muted)}
.calc2 input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;cursor:pointer;--p:50%}
.calc2 input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--accent) var(--p),var(--sand) var(--p))}
.calc2 input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:var(--sand)}
.calc2 input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:var(--accent)}
.calc2 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 4px 12px -4px rgba(0,0,0,.35);transition:transform .2s}
.calc2 input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.calc2 input[type=range]:hover::-webkit-slider-thumb,.calc2 input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.calc2:not(.touched) .cf:first-of-type input[type=range]::-webkit-slider-thumb{animation:thumbp 1.6s ease-out infinite}
@keyframes thumbp{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
.calc2 .calc-out{padding:clamp(24px,3.5vw,44px);background:var(--warn-soft);display:grid;gap:14px;align-content:center}
.cbig{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc2 .calc-big{font:650 clamp(44px,6vw,72px)/1 var(--display);letter-spacing:-.02em;color:var(--warn);transition:transform .25s var(--ease)}
.calc2 .calc-big.bump{transform:scale(1.04)}
.cper{font-size:15px;color:var(--muted)}
.cyear{font-size:16px}.cyear b{font-weight:600;color:var(--warn)}
.csave{font-size:17px}.csave b{font-weight:600;color:var(--accent)}
.calc2 .btn-big{justify-self:start;margin-top:6px}
.calc2 .btn-big b{font-weight:600}
@media (max-width:860px){.calc2{grid-template-columns:1fr}.chint{display:none}}

/* --- formularz prowadzący do „Dalej” --- */
.q{transition:opacity .35s,transform .35s var(--ease)}
.q.next legend::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--accent);vertical-align:middle;animation:pulse 1.1s infinite}
.q.answered legend{color:var(--muted)}
.q.answered legend::before{content:"✓ ";color:var(--accent);font-weight:700}
.chipopt span{transition:all .25s var(--ease)}
.chipopt:hover span{transform:translateY(-2px);border-color:var(--accent)}
.chipopt input:checked + span{animation:chipin .35s var(--ease)}
@keyframes chipin{50%{transform:scale(1.08)}}
[data-next]{transition:all .3s var(--ease);opacity:.55;filter:saturate(.6)}
[data-next].ready{opacity:1;filter:none;box-shadow:0 14px 30px -12px var(--accent);animation:readyb .6s var(--ease)}
@keyframes readyb{40%{transform:scale(1.07)}}
.fnote{font-size:13px;color:var(--accent);font-weight:600;min-height:18px;transition:opacity .3s}
.fprog-bar i{transition:width .45s var(--ease)!important}
.fstep label{position:relative}
.fstep label.ok::after{content:"✓";position:absolute;right:14px;bottom:14px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;animation:chipin .35s var(--ease)}
.fstep label.ok input{border-color:var(--accent)}
.fstep [type=submit]{transition:all .3s var(--ease);opacity:.6;filter:saturate(.6)}
.fstep [type=submit].ready{opacity:1;filter:none;box-shadow:0 16px 34px -12px var(--accent)}

/* --- film PrestaShop i pozostałe: żywsze sceny --- */
.fpart{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fpart i{position:absolute;bottom:-4%;width:.7cqw;height:.7cqw;min-width:3px;min-height:3px;border-radius:50%;background:color-mix(in srgb,var(--accent) 70%,#fff);opacity:0;animation:floatup 9s linear infinite}
.fpart i:nth-child(1){left:6%;animation-delay:0s}.fpart i:nth-child(2){left:14%;animation-delay:2.1s;animation-duration:11s}.fpart i:nth-child(3){left:22%;animation-delay:4.3s}.fpart i:nth-child(4){left:30%;animation-delay:1.2s;animation-duration:12s}
.fpart i:nth-child(5){left:38%;animation-delay:6s}.fpart i:nth-child(6){left:46%;animation-delay:3.3s;animation-duration:10s}.fpart i:nth-child(7){left:54%;animation-delay:7.4s}.fpart i:nth-child(8){left:62%;animation-delay:.6s;animation-duration:13s}
.fpart i:nth-child(9){left:70%;animation-delay:5.2s}.fpart i:nth-child(10){left:78%;animation-delay:2.8s;animation-duration:11s}.fpart i:nth-child(11){left:86%;animation-delay:8.1s}.fpart i:nth-child(12){left:94%;animation-delay:4.7s;animation-duration:12s}
.fpart i:nth-child(n+13){left:50%;animation-delay:9s}
@keyframes floatup{0%{opacity:0;transform:translateY(0)}10%{opacity:.7}80%{opacity:.4}100%{opacity:0;transform:translateY(-60cqw)}}
.sc{z-index:1}
.sc.on > *:not(.tag2){animation:kenburns 6.2s ease-out both}
@keyframes kenburns{from{transform:scale(.97)}to{transform:scale(1.03)}}
/* scena 0: kafelki przełączają się bez przeładowania */
.sc0.on .tile{animation:tilein .6s var(--ease) both,tileflip 2.4s ease-in-out 1s infinite}
.sc0.on .tile:nth-child(2){animation-delay:.1s,1.3s}.sc0.on .tile:nth-child(3){animation-delay:.2s,1.6s}.sc0.on .tile:nth-child(4){animation-delay:.3s,1.9s}
@keyframes tileflip{0%,100%{background:linear-gradient(160deg,#3a2a40,#2a1f2e)}50%{background:linear-gradient(160deg,#5a2a48,#3a1f3e)}}
.sc0.on .edge{animation:edgep 2s ease-in-out infinite}
@keyframes edgep{50%{box-shadow:0 0 0 1cqw rgba(243,128,32,.15)}}
/* scena 1: bloki składają się w pętli */
.sc1.on .blk{animation:fly1 .8s var(--ease) both,blkb 3s ease-in-out 1.2s infinite}
.sc1.on .b2{animation-delay:.25s,1.4s}.sc1.on .b3{animation-name:fly2,blkb;animation-delay:.5s,1.6s}.sc1.on .b4{animation-name:fly2,blkb;animation-delay:.7s,1.8s}
@keyframes blkb{50%{transform:translateY(-.6cqw);filter:brightness(1.15)}}
/* scena 2: instancje pracują, ruch faluje */
.sc2.on .pod{animation:podon .5s var(--ease) both,podw 1.8s ease-in-out 3s infinite}
.sc2.on .p1{animation-delay:.3s,3.2s}.sc2.on .p2{animation-delay:1.1s,3.4s}.sc2.on .p3{animation-delay:1.5s,3.6s}.sc2.on .p4{animation-delay:2.3s,3.8s}.sc2.on .p5{animation-delay:2.7s,4s}
@keyframes podw{50%{background:rgba(200,0,92,.28);transform:translateY(-.9cqw)}}
.sc2.on .meter i{animation:meter 3.2s var(--ease) both,meterw 2.2s ease-in-out 3.2s infinite alternate}
@keyframes meterw{from{width:92%}to{width:70%}}
/* scena 3: kolejne wyszukiwania */
.sc3.on .stype{animation:typeloop 3s steps(12) .2s infinite}
@keyframes typeloop{0%{width:0}40%,85%{width:12ch}100%{width:0}}
.sc3.on .sres{animation:resloop 3s var(--ease) infinite}
.sc3.on .r1{animation-delay:1.3s}.sc3.on .r2{animation-delay:1.42s}.sc3.on .r3{animation-delay:1.54s}
@keyframes resloop{0%{opacity:0;transform:translateY(1cqw)}15%,55%{opacity:1;transform:none}75%,100%{opacity:0}}
/* scena 4: baza świeci przy każdym zamówieniu */
.sc4.on .cyl i{animation:cylg 1.2s ease-in-out infinite}
.sc4.on .cyl i:nth-child(2){animation-delay:.2s}.sc4.on .cyl i:nth-child(3){animation-delay:.4s}
@keyframes cylg{50%{filter:brightness(1.35)}}
/* scena 5: kolejne wdrożenia w pętli */
.sc5.on .st{animation:stloop 3.2s var(--ease) infinite}
.sc5.on .s2{animation-delay:.5s}.sc5.on .s3{animation-delay:1s}.sc5.on .s4{animation-delay:1.5s}
@keyframes stloop{0%,10%{background:#251C28;border-color:rgba(255,255,255,.15);color:inherit}25%,80%{background:#0f3b2a;border-color:#00DC82;color:#7CFFC4}100%{background:#251C28}}
.sc5.on .sent{animation:edgep 2s ease-in-out infinite}
/* scena 6: plansza końcowa unosi się */
.sc6.on .endc .fl{animation:bob 3s ease-in-out infinite}
.sc6.on .badges span{animation:bob 3.4s ease-in-out infinite}
.sc6.on .badges span:nth-child(2){animation-delay:.6s}
@keyframes bob{50%{transform:translateY(-1cqw)}}
@media (prefers-reduced-motion: reduce){.fpart{display:none}.sc.on > *{animation:none!important}.chint i,[data-next].ready{animation:none!important}}
.calc2 .cnum{color:var(--fg);font-weight:600;background:var(--surface);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}

/* ===== v13: scena „Sklep jak aplikacja” (PWA) ===== */
.pwa{display:flex;align-items:center;gap:6cqw}
.ph{width:19cqw;aspect-ratio:9/18.5;border-radius:3.2cqw;border:.7cqw solid #2c2432;background:#0b080c;padding:.7cqw;box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.6)}
.ph-scr{position:relative;width:100%;height:100%;border-radius:2.4cqw;overflow:hidden;background:#F6F2F4}
.ph-shop{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;gap:1cqw;padding:1.4cqw;align-content:start}
.ph-bar{grid-column:1/-1;height:2.6cqw;border-radius:.8cqw;background:#E9DDE3}
.ph-tile{aspect-ratio:3/4;border-radius:1cqw;background:linear-gradient(160deg,#E7C9D6,#D9B6C6)}
.ph-sheet{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.6cqw;padding:2cqw 1.6cqw 2.2cqw;border-radius:2cqw 2cqw 0 0;background:#fff;color:#111;box-shadow:0 -1cqw 3cqw rgba(0,0,0,.18);transform:translateY(105%)}
.ph-sheet b{font:600 max(9px,1.5cqw)/1.2 var(--body)}
.ph-sheet span{font-size:max(8px,1.2cqw);color:#666}
.ph-sheet em{justify-self:start;font-style:normal;font:600 max(9px,1.4cqw)/1 var(--body);padding:1cqw 1.6cqw;border-radius:99px;background:#C8005C;color:#fff;margin-top:.4cqw}
.ph-tap{position:absolute;left:3.2cqw;bottom:2.2cqw;width:3.4cqw;height:3.4cqw;border-radius:50%;background:rgba(255,92,159,.45);border:.3cqw solid #fff;opacity:0}
.ph-home{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:3cqw 1.8cqw;align-content:start;background:linear-gradient(170deg,#3a1428,#140c18);opacity:0}
.hi{aspect-ratio:1;border-radius:1.4cqw;background:rgba(255,255,255,.14)}
.hi.new{background:#fff;display:grid;place-items:center;transform:scale(0)}
.hil{width:70%;height:70%}
.ph-push{position:absolute;left:1cqw;right:1cqw;top:1cqw;display:grid;gap:.3cqw;padding:1.2cqw 1.4cqw;border-radius:1.4cqw;background:rgba(255,255,255,.95);color:#111;transform:translateY(-140%);box-shadow:0 1cqw 2cqw rgba(0,0,0,.3)}
.ph-push b{font:600 max(8px,1.2cqw)/1.2 var(--body)}
.ph-push span{font-size:max(8px,1.15cqw);color:#444}
.pwa-tags{display:grid;gap:1.4cqw}
.pwa-tags span{font:500 max(10px,1.9cqw)/1 var(--mono);padding:1.2cqw 1.8cqw;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,179,210,.35);opacity:0}
/* oś czasu jednej pętli: arkusz, kliknięcie, ekran główny, nowa ikona, powiadomienie */
.sc.on .ph-sheet{animation:phsheet 6.2s var(--ease) infinite}
.sc.on .ph-tap{animation:phtap 6.2s ease-out infinite}
.sc.on .ph-home{animation:phhome 6.2s var(--ease) infinite}
.sc.on .hi.new{animation:phicon 6.2s cubic-bezier(.3,1.6,.5,1) infinite}
.sc.on .ph-push{animation:phpush 6.2s var(--ease) infinite}
.sc.on .pwa-tags span{animation:podon .5s var(--ease) both}
.sc.on .pwa-tags span:nth-child(1){animation-delay:.6s}.sc.on .pwa-tags span:nth-child(2){animation-delay:2.4s}.sc.on .pwa-tags span:nth-child(3){animation-delay:4.4s}
@keyframes phsheet{0%,10%{transform:translateY(105%)}18%,36%{transform:none}42%,100%{transform:translateY(105%)}}
@keyframes phtap{0%,27%{opacity:0;transform:scale(1.6)}31%{opacity:1;transform:scale(1)}36%,100%{opacity:0;transform:scale(.8)}}
@keyframes phhome{0%,38%{opacity:0}44%,96%{opacity:1}100%{opacity:0}}
@keyframes phicon{0%,46%{transform:scale(0)}54%,96%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes phpush{0%,64%{transform:translateY(-140%)}70%,92%{transform:none}98%,100%{transform:translateY(-140%)}}
/* plansza końcowa: style niezależne od numeru sceny */
.sc.on .endc b{animation:shimmer 3s linear infinite}
.sc.on .endc .fl{animation:bob 3s ease-in-out infinite}
.sc.on .badges span{animation:bob 3.4s ease-in-out infinite}
.sc.on .badges span:nth-child(2){animation-delay:.6s}

/* karta korzyści „Instalowalna aplikacja”: ikona wskakuje na ekran */
.bf-pwa i:nth-child(3){display:block;left:50%;top:38px;width:14px;height:14px;margin-left:-7px;border-radius:4px;background:var(--accent);animation:phicon 3.2s cubic-bezier(.3,1.6,.5,1) infinite}
@media (max-width:620px){.ph{width:30cqw}.pwa{gap:4cqw}}
@media (prefers-reduced-motion: reduce){.ph-home{opacity:1}.hi.new{transform:none}.ph-sheet{transform:none}}

/* v13: zdjęcia w osobnym storage (scena bazy) */
.db{width:62cqw}
.stor{position:absolute;right:0;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:1fr 1fr;gap:.8cqw;padding:1.6cqw;border-radius:1.4cqw;border:1px dashed rgba(255,179,210,.5);background:rgba(255,255,255,.05);width:15cqw}
.stor b{grid-column:1/-1;font:600 max(10px,1.7cqw)/1 var(--mono);color:#FFB3D2}
.stor em{grid-column:1/-1;font:500 max(9px,1.4cqw)/1 var(--mono);font-style:normal;color:#d9bfcc}
.sp{aspect-ratio:1;border-radius:.6cqw;background:linear-gradient(150deg,#E7C9D6,#B98AA0)}
.sc.on .sp{animation:spin2 2.4s ease-in-out infinite}
.sc.on .sp:nth-child(3){animation-delay:.3s}.sc.on .sp:nth-child(4){animation-delay:.6s}.sc.on .sp:nth-child(5){animation-delay:.9s}
@keyframes spin2{50%{filter:brightness(1.3);transform:translateY(-.4cqw)}}
.db .o2{right:18cqw}
.db .fl:nth-of-type(2){right:auto;left:15cqw}

/* ===== v14: blog ===== */
.menu-blog{font-weight:500}
/* ramka laptopa ze zrzutem sklepu */
.laptop{display:block;border-radius:14px;overflow:hidden;border:6px solid #1C2320;border-bottom-width:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);background:#1C2320;transition:transform .4s var(--ease)}
.laptop img{display:block;width:100%;height:auto}
.laptop:hover{transform:translateY(-4px) rotate(-.4deg)}
.pcase{gap:20px}
.pcase .laptop{margin-bottom:6px}

/* --- ilustracje bloga (animowane) --- */
.bh{position:relative;width:100%;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:var(--accent-soft);container-type:inline-size}
.bh *{position:absolute}
/* paczki w drodze */
.bh-parcel .road{left:0;right:0;bottom:22%;height:3px;background:repeating-linear-gradient(90deg,var(--accent) 0 14px,transparent 14px 26px);animation:roadm 1s linear infinite}
@keyframes roadm{to{background-position:26px 0}}
.bh-parcel .parc{top:auto;bottom:calc(22% + 3px);width:16cqw;height:12cqw;border-radius:4px;background:#C9A876;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
.bh-parcel .parc::before{content:"";position:absolute;left:44%;top:0;bottom:0;width:12%;background:rgba(255,255,255,.35)}
.bh-parcel .parc{left:-20%;animation:boxgo 6s linear infinite}.bh-parcel .b2{animation-delay:-2s;width:12cqw;height:9cqw}.bh-parcel .b3{animation-delay:-4s;width:19cqw;height:14cqw}
@keyframes boxgo{from{left:-20%}to{left:110%}}
.bh .ppin{white-space:nowrap;font:600 max(11px,4cqw)/1 var(--mono);padding:2cqw 3cqw;border-radius:99px;background:var(--surface);color:var(--fg);box-shadow:0 8px 20px -12px rgba(0,0,0,.35);animation:pinb 3s ease-in-out infinite}
.bh .p1{left:10%;top:16%}.bh .p2{left:40%;top:30%;animation-delay:.6s;background:var(--accent);color:var(--accent-ink)}.bh .p3{left:68%;top:12%;animation-delay:1.2s}
@keyframes pinb{50%{transform:translateY(-3cqw)}}
/* płatność */
.bh-pay .card{left:12%;top:24%;width:44cqw;height:28cqw;border-radius:3cqw;background:linear-gradient(135deg,#1C2320,#37423d);animation:cardt 4s ease-in-out infinite}
.bh-pay .card i:first-child{left:8%;top:18%;width:16%;height:18%;border-radius:4px;background:#d9c38b}
.bh-pay .card i:last-child{left:8%;bottom:16%;width:60%;height:8%;border-radius:4px;background:rgba(255,255,255,.4)}
@keyframes cardt{50%{transform:rotate(-4deg) translateY(-2cqw)}}
.bh-pay .blik{right:10%;top:20%;display:flex;gap:2cqw;padding:3cqw 4cqw;border-radius:2.4cqw;background:var(--surface);color:var(--fg);font-size:max(14px,6cqw);font-weight:600}
.bh-pay .blik b{position:static;animation:blk 2s steps(1) infinite}
.bh-pay .blik b:last-child{animation-delay:.5s}
@keyframes blk{50%{opacity:.25}}
.bh-pay .ok{right:24%;bottom:16%;width:14cqw;height:14cqw;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-size:7cqw;font-weight:700;animation:okp 2.4s var(--ease) infinite}
@keyframes okp{0%,30%{transform:scale(0)}45%,85%{transform:scale(1)}100%{transform:scale(0)}}
/* sklep */
.bh-store .win{left:12%;top:12%;right:12%;bottom:12%;border-radius:2.4cqw;background:var(--surface);box-shadow:0 20px 40px -24px rgba(0,0,0,.35);display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:7cqw 3cqw 3cqw}
.bh-store .win *{position:relative}
.bh-store .bar{position:absolute;left:3cqw;right:3cqw;top:2cqw;height:3cqw;border-radius:99px;background:var(--line)}
.bh-store .t{border-radius:1.4cqw;background:var(--accent-soft);animation:tpop 3.6s ease-in-out infinite}
.bh-store .t:nth-child(3){animation-delay:.2s}.bh-store .t:nth-child(4){animation-delay:.4s}.bh-store .t:nth-child(5){animation-delay:.6s}.bh-store .t:nth-child(6){animation-delay:.8s}.bh-store .t:nth-child(7){animation-delay:1s}
@keyframes tpop{0%,100%{opacity:.4;transform:scale(.9)}30%,70%{opacity:1;transform:none;background:color-mix(in srgb,var(--accent) 35%,var(--surface))}}
/* allegro */
.bh .bhl{left:8%;top:10%;width:26cqw;height:9cqw}
.bh .lst{left:8%;right:8%;height:14cqw;border-radius:2cqw;background:var(--surface);box-shadow:0 10px 24px -16px rgba(0,0,0,.35);animation:lstin 4s var(--ease) infinite}
.bh .lst i{left:3%;top:15%;width:14cqw;height:10cqw;border-radius:1.4cqw;background:var(--accent-soft)}
.bh .lst b{left:28%;top:30%;width:50%;height:2.4cqw;border-radius:99px;background:var(--line)}
.bh .l1{top:30%}.bh .l2{top:50%;animation-delay:.3s}.bh .l3{top:70%;animation-delay:.6s}
@keyframes lstin{0%{opacity:0;transform:translateX(-6cqw)}15%,85%{opacity:1;transform:none}100%{opacity:0}}
.bh .star{right:8%;top:12%;font-size:5cqw;color:#F2A341;letter-spacing:.2em;animation:blk 2.4s steps(1) infinite}
/* zamówienia */
.bh-oms .hubo{left:50%;top:50%;transform:translate(-50%,-50%);padding:5cqw 7cqw;border-radius:3cqw;background:var(--fg);color:var(--bg);font:700 max(14px,6cqw)/1 var(--display)}
.bh .or{white-space:nowrap;font:500 max(11px,3.6cqw)/1 var(--mono);padding:2cqw 3cqw;border-radius:2cqw;background:var(--surface);color:var(--fg);box-shadow:0 8px 20px -12px rgba(0,0,0,.35);animation:orin 3s var(--ease) infinite}
.bh .o1{left:6%;top:14%}.bh .o2{left:6%;top:44%;animation-delay:1s}.bh .o3{left:6%;top:74%;animation-delay:2s}
@keyframes orin{0%{opacity:0;transform:translateX(0)}20%{opacity:1}70%{opacity:1;transform:translateX(26cqw)}100%{opacity:0;transform:translateX(30cqw) scale(.6)}}
.bh .stt{right:6%;top:50%;transform:translateY(-50%);display:grid;gap:2cqw}
.bh .stt b{position:static;font-size:max(10px,3.4cqw);font-weight:500;padding:1.6cqw 2.6cqw;border-radius:99px;background:var(--surface);color:var(--muted);animation:sttl 3s steps(1) infinite}
.bh .stt b:nth-child(2){animation-delay:1s}.bh .stt b:nth-child(3){animation-delay:2s}
@keyframes sttl{0%,32%{background:var(--accent);color:var(--accent-ink)}33%,100%{background:var(--surface);color:var(--muted)}}
/* moda */
.bh-fash .hg{left:50%;top:50%;width:32cqw;transform:translate(-50%,-50%) rotate(-4deg);animation:bob 3s ease-in-out infinite}
.bh-fash .loop{left:50%;top:50%;width:62cqw;height:62cqw;margin:-31cqw 0 0 -31cqw;border-radius:50%;border:.8cqw dashed var(--accent);opacity:.5;animation:spinl 14s linear infinite}
@keyframes spinl{to{transform:rotate(360deg)}}
/* start sklepu */
.bh-start ul{left:14%;right:14%;top:12%;list-style:none;margin:0;padding:0;display:grid;gap:2.4cqw}
.bh-start li{position:relative;display:flex;align-items:center;gap:3cqw;padding:2.4cqw 3.4cqw;border-radius:2cqw;background:var(--surface);font:500 max(11px,4cqw)/1 var(--body);color:var(--fg);animation:lsti 5s var(--ease) infinite}
.bh-start li::before{content:"";position:relative;width:4cqw;height:4cqw;border-radius:50%;border:.5cqw solid var(--line);flex:none;animation:lstc 5s steps(1) infinite;animation-delay:inherit}
.bh-start li:nth-child(2){animation-delay:.5s}.bh-start li:nth-child(3){animation-delay:1s}.bh-start li:nth-child(4){animation-delay:1.5s}.bh-start li:nth-child(5){animation-delay:2s}
@keyframes lsti{0%{opacity:.35}10%,90%{opacity:1}100%{opacity:.35}}
@keyframes lstc{0%{background:transparent}10%,100%{background:var(--accent);border-color:var(--accent)}}
/* headless */
.bh-head .ly{left:14%;right:14%;padding:4cqw;border-radius:2.4cqw;border:.5cqw solid var(--accent);background:var(--surface);color:var(--fg);font:600 max(12px,4.4cqw)/1 var(--body)}
.bh-head .l1{top:10%}.bh-head .l2{top:38%;border-style:dashed}.bh-head .l3{top:66%}
.bh-head .pk{left:50%;top:10%;width:4cqw;height:4cqw;margin-left:-2cqw;border-radius:50%;background:var(--accent);box-shadow:0 0 3cqw var(--accent);animation:pkd 2.2s var(--ease) infinite}
@keyframes pkd{0%{top:12%}50%{top:72%}100%{top:12%}}

/* --- lista wpisów --- */
.blog-hero{padding-block:clamp(56px,7vw,100px) clamp(30px,4vw,50px)}
.blog-hero h1{max-width:16ch}
.bcard{display:grid;gap:16px;align-content:start;text-decoration:none;color:var(--fg);border-radius:22px;padding:14px;background:var(--surface);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.bcard:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 26px 50px -34px var(--accent)}
.bcard-vis .bh{aspect-ratio:16/10}
.bcard-body{display:grid;gap:8px;padding:2px 6px 8px}
.bcat{font:500 12px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.bcard h3{font-size:clamp(18px,1.6vw,21px);line-height:1.3}
.bcard p{color:var(--muted);font-size:16px}
.bmeta{font-size:12px;color:var(--muted)}
.bcard.big{grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(20px,4vw,48px);padding:clamp(16px,2vw,24px);margin-bottom:40px}
.bcard.big h3{font-size:clamp(26px,3vw,38px);line-height:1.12}
.bcard.big .bcard-vis .bh{aspect-ratio:4/3}
@media (max-width:820px){.bcard.big{grid-template-columns:1fr}}
.bchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.bchip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:500 14px/1 var(--body);cursor:pointer;transition:all .25s}
.bchip:hover{border-color:var(--fg);color:var(--fg)}
.bchip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bgrid .bcard{animation:rise .5s var(--ease) both}
.bgrid .bcard[hidden]{display:none}
@media (max-width:980px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.bgrid{grid-template-columns:1fr}}

/* --- wpis --- */
.post-hero{padding-block:clamp(40px,6vw,90px) clamp(30px,4vw,60px)}
.post-hero h1{font-size:clamp(32px,4.4vw,54px);max-width:20ch}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs a{color:var(--accent);text-decoration:none}
.pmeta{display:flex;align-items:center;gap:12px;font-size:14px}
.pmeta > span:last-child{display:grid;gap:2px}
.pmeta .mono{font-size:12px;color:var(--muted)}
.pmeta .avatar{width:44px;height:44px}
.post-vis{max-width:520px;width:100%;justify-self:end}
.post-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(30px,5vw,72px);padding-bottom:clamp(50px,6vw,90px);align-items:start}
.ptoc{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));display:grid;gap:14px;font-size:14px}
.ptoc > b{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ptoc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:2px solid var(--line)}
.ptoc ol a{display:block;padding:7px 12px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--muted);line-height:1.35;transition:all .25s}
.ptoc ol a:hover{color:var(--fg)}
.ptoc ol a.on{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.ptoc .btn{justify-self:start;min-height:44px;font-size:14px;padding:0 16px}
.pbody{max-width:740px;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;font-size:18px;line-height:1.75}
.pbody > p{color:color-mix(in srgb,var(--fg) 88%,var(--muted))}
.pbody h2{font-size:clamp(25px,2.6vw,32px);margin-top:26px;scroll-margin-top:100px}
.pbody h3{font-size:21px;margin-top:6px}
.pbody a:not(.btn){color:var(--accent)}
.pbody strong{color:var(--fg)}
.ptake{padding:22px 26px;border-radius:20px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.ptake b{font:650 18px/1 var(--display)}
.ptake ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.ptake li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:16px;line-height:1.5}
.ptake svg{width:20px;height:20px;color:var(--accent);margin-top:3px}
.bl-list{margin:0;padding-left:1.2em;display:grid;gap:8px}
.bl-list li::marker{color:var(--accent)}
.bl-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bl-steps li{display:grid;grid-template-columns:50px 1fr;gap:14px;padding:16px 18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);opacity:.5;transform:translateX(-8px);transition:all .5s var(--ease)}
.bl-steps li.on{opacity:1;transform:none;border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.bl-steps .n{font-size:14px;color:var(--accent);padding-top:3px}
.bl-steps b{display:block;font-size:17px;margin-bottom:2px}
.bl-steps p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.bl-table{margin:0}
.bl-table td,.bl-table th{font-size:15px;line-height:1.45}
.bl-note{font:400 13px/1.5 var(--mono);color:var(--muted);margin-top:8px}
.bl-bars{margin:0;padding:22px 24px;border-radius:20px;background:var(--surface);border:1px solid var(--line);display:grid;gap:12px}
.bl-bars figcaption{font:650 18px/1.3 var(--display)}
.blr{display:grid;grid-template-columns:minmax(90px,170px) 1fr auto;gap:12px;align-items:center;font-size:15px}
.blt{height:12px;border-radius:99px;background:var(--sand);overflow:hidden}
.blt i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width 1.1s var(--ease)}
.bl-bars.on .blt i{width:var(--w)}
.blr b{font-size:14px;font-weight:500;min-width:70px;text-align:right}
@media (max-width:560px){.blr{grid-template-columns:1fr auto}.blr .blt{grid-column:1/-1;grid-row:2}}
.bl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.bl-stats > div{padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--line);display:grid;gap:6px}
.bl-stats b{font:650 clamp(28px,3vw,38px)/1 var(--display);color:var(--accent)}
.bl-stats span{font-size:15px;line-height:1.45;color:var(--muted)}
.bl-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.bl-compare > div{padding:20px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.bl-compare .cmp-r{border-color:var(--accent);background:var(--accent-soft)}
.bl-compare b{font:650 18px/1.3 var(--display)}
.bl-compare ul{margin:10px 0 0;padding-left:1.1em;display:grid;gap:6px;font-size:16px;line-height:1.5}
.bl-compare .vs{align-self:center;font-size:13px;color:var(--muted)}
@media (max-width:620px){.bl-compare{grid-template-columns:1fr}.bl-compare .vs{justify-self:center}}
.bl-call{padding:18px 22px;border-radius:16px;border-left:4px solid var(--accent);background:var(--accent-soft)}
.bl-call.warn{border-left-color:var(--warn);background:var(--warn-soft)}
.bl-call b{display:block;font-size:16px;margin-bottom:4px}
.bl-call p{font-size:16px;line-height:1.6;margin:0}
.bl-quote{margin:6px 0;padding:6px 0 6px 26px;border-left:3px solid var(--accent)}
.bl-quote blockquote{margin:0;font:500 clamp(20px,2.2vw,24px)/1.45 var(--display);letter-spacing:-.01em}
.bl-quote figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
.bl-photo{margin:6px 0}
.bl-photo figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.phbox{display:grid;place-items:center;gap:10px;aspect-ratio:16/8;border-radius:20px;border:2px dashed color-mix(in srgb,var(--accent) 40%,var(--line));background:repeating-linear-gradient(135deg,var(--surface) 0 14px,var(--bg) 14px 28px);color:var(--muted);text-align:center;padding:20px;font-size:15px}
.phbox svg{width:36px;height:36px;color:var(--accent)}
.bl-photo.shot{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bl-photo.shot figcaption{grid-column:1/-1}
@media (max-width:620px){.bl-photo.shot{grid-template-columns:1fr}}
.bl-faq{margin-top:6px}
.bl-faq summary{font-size:17px}
.bl-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:24px 26px;border-radius:22px;background:var(--fg);color:var(--bg)}
.bl-cta p{font:600 clamp(18px,2vw,21px)/1.4 var(--display);margin:0;max-width:40ch;color:var(--bg)}
.psrc{font-size:12px;color:var(--muted)}
@media (max-width:900px){.post-grid{grid-template-columns:minmax(0,1fr)}.ptoc{position:static;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}.post-vis{justify-self:stretch;max-width:none}}
@media (prefers-reduced-motion: reduce){.bh *{animation:none!important}.bl-steps li{opacity:1;transform:none}.blt i{width:var(--w)!important}}

/* ===== v14: moduły PrestaShop ===== */
.mds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.md-g{display:grid;gap:10px;align-content:start}
.md-t{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.md{position:relative;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .4s,box-shadow .4s}
.md code{font:500 13px/1.3 var(--mono);color:var(--accent);word-break:break-all}
.md p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.md::after{content:"";position:absolute;right:14px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,box-shadow .3s}
.mds.on .md{opacity:1;transform:none}
.md.hot{border-color:var(--accent);box-shadow:0 16px 34px -24px var(--accent)}
.md.hot::after{background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.md-ext{margin-top:26px;display:grid;gap:12px}
@media (max-width:900px){.mds{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.md{opacity:1;transform:none}}

/* ===== v15: Jedna paleta, cała droga ===== */
.jr{position:relative;border-top:1px solid var(--line)}
.jr.live{height:640vh}
.jr-sticky{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(40px,5vw,72px)}
.jr.live .jr-sticky{position:sticky;top:0;height:100svh;box-sizing:border-box;padding-block:calc(80px + 2vh) 3vh}
.jr-text{display:grid;gap:20px;align-content:center;min-width:0}
.jr-head h2{font-size:clamp(28px,3.2vw,42px);line-height:1.1;margin-top:10px;max-width:16ch}
.jr-nav{position:relative;padding-left:22px}
.jr-bar{position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--line);overflow:hidden}
.jr-bar i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0));transition:background .5s}
.jr-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.jr-step{padding:7px 0;opacity:.38;transition:opacity .4s}
.jr-step h3{display:flex;gap:12px;align-items:baseline;font-size:clamp(17px,1.5vw,20px);line-height:1.3}
.jr-step h3 .mono{font-size:12px;color:var(--muted);transition:color .4s}
.jr-step p{max-height:0;overflow:hidden;opacity:0;margin:0;font-size:16px;line-height:1.55;color:var(--muted);transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.jr-step.past{opacity:.62}
.jr-step.on{opacity:1}
.jr-step.on h3 .mono{color:var(--accent)}
.jr-step.on p{max-height:140px;opacity:1;margin-top:6px}
.jr:not(.live) .jr-step{opacity:1}
.jr:not(.live) .jr-step p{max-height:none;opacity:1;margin-top:6px}
.jr-dots{display:none;gap:0}
.jr-dot{width:44px;height:44px;border:0;background:none;padding:0;display:grid;place-items:center;cursor:pointer}
.jr-dot i{width:10px;height:10px;border-radius:50%;background:var(--line);transition:all .3s}
.jr-dot.on i{width:26px;border-radius:99px;background:var(--accent)}
.jr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.jr[data-ph="5"] .jr-cta,.jr:not(.live) .jr-cta{opacity:1;transform:none;pointer-events:auto}
.jr-skip{position:absolute;left:16px;top:-60px;padding:10px 14px;border-radius:10px;background:var(--fg);color:var(--bg)}
.jr-skip:focus{top:90px;z-index:5}

/* scena */
.jr-stage{position:relative;width:min(100%,620px);aspect-ratio:1/1;justify-self:center;border-radius:28px;overflow:hidden;background:var(--accent-soft);transition:background .6s;container-type:inline-size;isolation:isolate}
.jr.live .jr-stage{width:min(100%,620px,calc(100svh - 150px))}
.jr-stage::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at calc(20% + var(--p,0)*60%) 30%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 55%);z-index:-1}
.jr-hint{position:absolute;left:50%;top:6%;transform:translateX(-50%);display:grid;justify-items:center;gap:6px;font-size:max(11px,2cqw);color:var(--muted);transition:opacity .4s}
.jr-hint i{width:18px;height:28px;border:2px solid currentColor;border-radius:10px;position:relative}
.jr-hint i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:jrwheel 1.4s ease-in-out infinite}
@keyframes jrwheel{60%{transform:translateY(8px);opacity:0}}
.jr:not([data-ph="0"]) .jr-hint,.jr:not(.live) .jr-hint{opacity:0}

/* paleta */
.jr-pal{position:absolute;left:17%;right:17%;top:24%;bottom:20%;transition:opacity .5s,transform .7s var(--ease);z-index:1}
.jr-boxes{position:absolute;left:0;right:0;top:0;bottom:15%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3%}
.jr-boxes span{position:relative;border-radius:4px;background:#C9A876;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08);display:grid;place-items:center;animation:jrbox 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s)}
.jr-boxes span::before{content:"";position:absolute;left:42%;width:16%;top:0;bottom:0;background:rgba(255,255,255,.28)}
.jr-boxes b{position:relative;padding:1cqw 1.6cqw;border-radius:1cqw;background:#F6EEDD;color:#4A3920;font:700 max(10px,2.6cqw)/1 var(--body);letter-spacing:.02em}
@keyframes jrbox{50%{transform:translateY(-3%)}}
.jr-wood{position:absolute;left:-4%;right:-4%;bottom:0;height:13%;border-radius:3px;background:repeating-linear-gradient(90deg,#9C7449 0 20%,#7E5B37 20% 25%);box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.jr:not([data-ph="0"]) .jr-pal{opacity:0;transform:translateY(14%) scale(.86);pointer-events:none}

/* rzeczy */
.jr-it{position:absolute;z-index:2;left:calc(3% + var(--x)*24.5%);top:calc(7% + var(--y)*27%);width:21%;aspect-ratio:5/6;border-radius:2cqw;overflow:hidden;background:var(--surface);box-shadow:0 1.6cqw 4cqw -2cqw rgba(0,0,0,.35);
  transition:left .8s var(--ease),top .8s var(--ease),width .8s var(--ease),opacity .5s,transform .7s var(--ease);transition-delay:calc(var(--i)*45ms)}
.jr-it svg{position:absolute;inset:0;width:100%;height:100%}
.jr-f{position:absolute;inset:0;background:#D8C8AC}
.jr-m{position:absolute;inset:0;background:#FBFAF7;clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);transition-delay:calc(var(--i)*110ms)}
.jr-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--c-ai);box-shadow:0 0 14px 2px var(--c-ai);opacity:0}
.jr[data-ph="2"] .jr-scan{animation:jrscan .7s var(--ease) both;animation-delay:calc(var(--i)*110ms)}
@keyframes jrscan{0%{top:0;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.jr-tags{position:absolute;left:5%;right:5%;bottom:5%;display:flex;flex-wrap:wrap;gap:4%}
.jr-tags span{font:600 max(8px,1.5cqw)/1 var(--body);padding:.8cqw 1.2cqw;border-radius:99px;background:#1F6FE0;color:#fff;opacity:0;transform:translateY(50%) scale(.7);transition:opacity .4s var(--ease),transform .4s var(--ease);transition-delay:calc(var(--i)*70ms)}
.jr-tags span+span{background:#fff;color:#1F6FE0;box-shadow:inset 0 0 0 1px #1F6FE0}
.jr-ok{position:absolute;right:5%;top:5%;width:max(14px,4.4cqw);height:max(14px,4.4cqw);border-radius:50%;background:#23855F;color:#fff;display:grid;place-items:center;opacity:0;transform:scale(0);transition:opacity .35s,transform .35s var(--ease);transition-delay:calc(var(--i)*70ms + .3s)}
.jr-ok svg{position:static;width:64%;height:64%;stroke-width:3}

.jr[data-ph="0"] .jr-it{left:39.5%;top:34%;opacity:0;transform:scale(.35) rotate(-8deg);transition-delay:0s}
.jr:is([data-ph="2"],[data-ph="3"],[data-ph="4"],[data-ph="5"]) .jr-m{clip-path:inset(0)}
.jr[data-ph="3"] .jr-tags span{opacity:1;transform:none}
.jr-gr{position:absolute;left:5%;top:5%;padding:.7cqw 1.2cqw;border-radius:99px;background:#fff;color:#7A4A10;font:700 max(8px,1.5cqw)/1 var(--mono);box-shadow:inset 0 0 0 1px #B05C08;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease);transition-delay:calc(var(--i)*60ms + .4s)}
.jr[data-ph="1"] .jr-gr{opacity:1;transform:none}
.jr[data-ph="1"] .jr-it::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:inherit;animation:jrchk .6s var(--ease) both;animation-delay:calc(var(--i)*60ms + .3s)}
@keyframes jrchk{40%{border-color:#B05C08}100%{border-color:transparent}}
.jr:is([data-ph="3"],[data-ph="4"],[data-ph="5"]) .jr-ok{opacity:1;transform:none}
.jr[data-ph="4"] .jr-it{left:calc(var(--tx) - 7.5% + var(--k)*1.2%);top:calc(50% - var(--k)*4.5%);width:15%;transform:rotate(calc((var(--k) - 1.5)*5deg))}
.jr[data-ph="5"] .jr-it{left:calc(8% + var(--x6)*14.4%);top:calc(17% + var(--y6)*24%);width:12.5%;transform:none}

/* kanały */
.jr-ch{position:absolute;left:4%;right:4%;bottom:5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3%;opacity:0;transform:translateY(30%);transition:opacity .5s,transform .6s var(--ease);z-index:3}
.jr-ch > div{display:grid;justify-items:center;gap:.8cqw;padding:2.4cqw 1cqw;border-radius:2.4cqw;background:var(--surface);color:var(--fg);text-align:center;font:650 max(11px,2.6cqw)/1.15 var(--display);box-shadow:0 1.6cqw 4cqw -2.4cqw rgba(0,0,0,.35)}
.jr-ch .eidot{width:max(16px,4cqw);height:max(16px,4cqw);border-radius:50%;background:#F79521;display:block}
.jr-ch .bl{width:max(16px,4cqw);height:max(16px,4cqw)}
.jr-ch small{font:400 max(9px,1.8cqw)/1.25 var(--mono);color:var(--muted)}
.jr[data-ph="4"] .jr-ch{opacity:1;transform:none}
.jr[data-ph="4"] .jr-ch > div{animation:jrch 1.2s var(--ease) .9s both}
@keyframes jrch{40%{box-shadow:0 0 0 1cqw color-mix(in srgb,var(--accent) 30%,transparent)}}
.jr-cnt{position:absolute;left:5%;top:5%;padding:1.4cqw 2.2cqw;border-radius:99px;background:var(--surface);font-size:max(11px,2.2cqw);color:var(--muted);opacity:0;transform:translateY(-30%);transition:.4s var(--ease);z-index:3}
.jr-cnt b{color:var(--accent);font-size:1.3em}
.jr:is([data-ph="4"],[data-ph="5"]) .jr-cnt{opacity:1;transform:none}
.jr[data-ph="5"] .jr-cnt{opacity:0}

/* sklep */
.jr-shop{position:absolute;inset:4%;z-index:1;border-radius:2.4cqw;background:var(--surface);box-shadow:0 3cqw 7cqw -4cqw rgba(0,0,0,.4);opacity:0;transform:scale(.92);transition:opacity .5s,transform .7s var(--ease)}
.jr-sbar{display:flex;align-items:center;gap:1.2cqw;height:9%;padding:0 2.4cqw;border-bottom:1px solid var(--line)}
.jr-sbar i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--line)}
.jr-sbar span{margin-left:1.4cqw;padding:.8cqw 2cqw;border-radius:99px;background:var(--bg);font-size:max(9px,1.8cqw);color:var(--muted)}
.jr-sbar b{margin-left:auto;font:600 max(9px,1.8cqw)/1 var(--body);color:var(--accent)}
.jr-scale{position:absolute;left:4%;right:4%;bottom:5%;display:grid;gap:1.6cqw}
.jr-scale span{font-size:max(9px,1.8cqw);color:var(--muted)}
.jr-ins{display:grid;grid-template-columns:repeat(6,1fr);gap:1.4cqw;max-width:66%}
.jr-ins i{height:5cqw;border-radius:1.2cqw;background:var(--line);transition:background .3s}
.jr[data-ph="5"] .jr-shop{opacity:1;transform:none}
.jr[data-ph="5"] .jr-ins i{animation:jrins 4s steps(1) infinite;animation-delay:calc(var(--i)*.35s)}
.jr[data-ph="5"] .jr-ins i:nth-child(-n+2){animation:none;background:var(--accent)}
@keyframes jrins{0%,100%{background:var(--line)}30%,80%{background:var(--accent)}}

@media (max-width:900px){
  .jr-sticky{grid-template-columns:minmax(0,1fr);gap:16px}
  .jr.live .jr-sticky{align-content:start;align-items:start;padding-block:84px 12px}
  .jr.live .jr-stage{order:-1;width:min(100%,calc(100svh - 330px))}
  .jr.live:not([data-ph="5"]) .jr-cta{display:none}
  .jr.live[data-ph="5"] .jr-dots{display:none}
  .jr.live .jr-head h2{display:none}
  .jr.live .jr-head{display:none}
  .jr.live .jr-step{display:none}
  .jr.live .jr-step.on{display:block}
  .jr.live .jr-step p{max-height:none}
  .jr-nav{padding-left:0}.jr-bar{display:none}
  .jr.live .jr-dots{display:flex;margin:-12px 0 -8px -10px}
  .jr.live .jr-text{gap:12px;align-content:start}
}
@media (prefers-reduced-motion: reduce){.jr *{transition:none!important;animation:none!important}}

/* ===== v16: przejścia między stronami ===== */
@view-transition{navigation:auto}
header{view-transition-name:ctz-header}
::view-transition-old(root){animation:ctzOut .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:ctzIn .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes ctzOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes ctzIn{from{opacity:0;transform:translateY(16px)}}
@media (prefers-reduced-motion: reduce){@view-transition{navigation:none}}

/* ===== v17: równe sekcje na wszystkich stronach ===== */
.hero-grid{align-items:start}
.hero-grid > :last-child{align-self:center}
.hero-copy{padding-top:clamp(0px,2vw,24px)}
.midcta{padding-block:0}
.midcta + .block{padding-top:clamp(72px,9vw,128px)}
/* ilustracja: moduły */
.bh-mods b{left:8%;top:8%;font-size:max(11px,3.6cqw);color:var(--muted)}
.bh-mods .mg{left:8%;right:8%;top:22%;bottom:10%;display:grid;grid-template-columns:repeat(4,1fr);gap:3cqw}
.bh-mods .mg i{position:relative;border-radius:2cqw;background:var(--surface);box-shadow:0 1cqw 3cqw -2cqw rgba(0,0,0,.35);animation:mgl 3.6s steps(1) infinite;animation-delay:calc(var(--i)*.3s)}
.bh-mods .mg i::before{content:"";position:absolute;left:14%;top:22%;width:55%;height:12%;border-radius:99px;background:var(--line)}
.bh-mods .mg i::after{content:"";position:absolute;right:12%;top:18%;width:16%;aspect-ratio:1;border-radius:50%;background:var(--line)}
@keyframes mgl{0%,100%{outline:0}8%,30%{outline:2px solid var(--accent);outline-offset:-2px}}
.bh-mods .mg i:nth-child(n){animation-name:mgl}

/* ===== v18: mniejsze przerwy ===== */
.hero{padding-block:clamp(28px,4vw,60px) clamp(40px,5vw,72px)}
.hero-copy{padding-top:0}
.block{padding-block:clamp(56px,6.5vw,96px)}
.midcta + .block{padding-top:clamp(56px,6.5vw,96px)}
.final{padding-block:clamp(64px,8vw,112px)}
.blog-hero{padding-block:clamp(28px,4vw,60px) clamp(24px,3vw,40px)}
.post-hero{padding-block:clamp(24px,3.5vw,56px) clamp(24px,3vw,44px)}
.post-grid{padding-bottom:clamp(40px,5vw,72px)}
.jr.live .jr-sticky{padding-block:calc(76px + 1vh) 2vh}

/* ===== v18: proces zdjęć AI (Orbitvu) ===== */
.pp{position:relative;margin-top:8px}
.pp-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;position:relative}
.pp-track::before{content:"";position:absolute;left:12%;right:12%;top:34px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.pp-st{position:relative;display:grid;justify-items:center;text-align:center;gap:8px;padding:0 6px}
.pp-ic{position:relative;z-index:1;width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--muted);transition:all .3s;animation:ppon 8s infinite;animation-delay:calc(var(--i)*2s)}
.pp-ic svg{width:30px;height:30px}
.pp-st b{font:650 17px/1.3 var(--display)}
.pp-st p{font-size:15px;line-height:1.5;color:var(--muted);margin:0;max-width:30ch}
@keyframes ppon{0%,22%{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 28px -16px var(--accent)}25%,100%{background:var(--surface);color:var(--muted);border-color:var(--line);transform:none;box-shadow:none}}
.pp-tok{position:absolute;top:22px;left:calc(12.5% - 13px);width:26px;height:26px;z-index:2;pointer-events:none;animation:pptok 8s cubic-bezier(.6,0,.3,1) infinite}
.pp-tok i{display:block;width:100%;height:100%;border-radius:7px;background:#2F4A6B;box-shadow:0 0 0 4px var(--bg);transform:translate(0,-36px) scale(.8);animation:pptokc 8s steps(1) infinite}
@keyframes pptok{0%,20%{left:calc(12.5% - 13px)}25%,45%{left:calc(37.5% - 13px)}50%,70%{left:calc(62.5% - 13px)}75%,95%{left:calc(87.5% - 13px)}100%{left:calc(12.5% - 13px)}}
@keyframes pptokc{0%{background:#2F4A6B;border-radius:7px}50%{background:var(--c-ai);border-radius:50%}75%{background:#23855F;border-radius:50%}}
.pp-note{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-radius:18px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.pp-note p{margin:0;font-size:16px;line-height:1.55;max-width:70ch}
.pp-badge{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
@media (max-width:760px){
  .pp-track{grid-template-columns:minmax(0,1fr);gap:16px}
  .pp-track::before{left:33px;right:auto;top:34px;bottom:34px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line) 0 8px,transparent 8px 14px)}
  .pp-st{grid-template-columns:68px 1fr;justify-items:start;text-align:left;column-gap:14px;row-gap:2px}
  .pp-ic{grid-row:span 2}
  .pp-tok{display:none}
}
@media (prefers-reduced-motion: reduce){.pp-ic,.pp-tok,.pp-tok i{animation:none}}

/* ===== v19: AI na prawdziwych zdjęciach ===== */
.vt .tabs{margin-bottom:14px}
.vt-cmp{aspect-ratio:480/709;background:#F1F0EC}
.vt-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.vt-cmp .before{z-index:0}
.vt-cmp .after{z-index:1}
.vt-cmp .tag,.vt-cmp .handle{z-index:2}
.vt-cmp.bg{aspect-ratio:3/2;background-color:#fff;background-image:linear-gradient(45deg,#E9E9E9 25%,transparent 25%,transparent 75%,#E9E9E9 75%),linear-gradient(45deg,#E9E9E9 25%,transparent 25%,transparent 75%,#E9E9E9 75%);background-size:22px 22px;background-position:0 0,11px 11px}
.vt-cmp.bg .before{z-index:1}
.vt-cmp.bg .after{z-index:0;clip-path:none}
.vt-cmp.bg .before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.vt-cmp.bg.anim .before{transition:clip-path .9s var(--ease)}
.vt-cmp.swap img{animation:vtfade .45s var(--ease)}
@keyframes vtfade{from{opacity:.2}}
.vt-picks{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.vt-pick{flex:none;display:grid;justify-items:center;gap:4px;width:72px;padding:6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:500 11px/1.2 var(--body);color:var(--muted);transition:all .25s}
.vt-pick img{width:56px;height:56px;object-fit:cover;border-radius:9px;background:#F1F0EC}
.vt-pick span{text-align:center}
.vt-pick:hover{border-color:var(--fg)}
.vt-pick[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent);color:var(--fg)}
.vt-note{margin-top:8px;font-size:13px;color:var(--muted)}
.am-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* galeria przed i po */
.gl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.gl-c{margin:0;display:grid;gap:8px}
.gl-ph{position:relative;aspect-ratio:480/709;border-radius:18px;overflow:hidden;background:#E9E9E6;box-shadow:0 18px 40px -30px rgba(0,0,0,.5)}
.gl-ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.gl-pr{opacity:0}
.gl-c:hover .gl-pr,.gl-c:focus-within .gl-pr{opacity:1}
.gl-c:hover .gl-po{transform:scale(1.03)}
.gl-in{position:absolute;left:8px;top:8px;width:30%;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.45);border:2px solid #fff;transition:transform .4s var(--ease)}
.gl-in img{width:100%;height:100%;object-fit:cover}
.gl-c:hover .gl-in{transform:scale(1.08) rotate(-3deg)}
.gl-c figcaption{font-size:14px;color:var(--muted)}
@media (max-width:900px){.gl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* modelki */
.mk{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:center}
.mk-txt h2{margin-top:10px;font-size:clamp(28px,3vw,40px);line-height:1.12}
.mk-txt .lead{margin-top:14px}
.mk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.mk-grid li{aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--sand);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line);animation:mkw 6s ease-in-out infinite;animation-delay:calc(var(--i)*.18s)}
.mk-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.mk-grid li:hover img{transform:scale(1.12)}
@keyframes mkw{0%,80%,100%{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line)}88%{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}}
@media (max-width:900px){.mk{grid-template-columns:minmax(0,1fr)}.mk-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:420px){.mk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.mk-grid li{animation:none}}

/* ===== v20: film danych w 7 scenach ===== */
/* 0: lista */
.dl{width:46cqw;border-radius:1.8cqw;background:#fff;color:#111;overflow:hidden;box-shadow:0 3cqw 6cqw -3cqw rgba(0,0,0,.6)}
.dl-h{display:flex;justify-content:space-between;align-items:center;padding:1.6cqw 2cqw;border-bottom:1px solid #E6E8EC;font-size:max(10px,1.6cqw)}
.dl-h span{color:#1F6FE0}
.dl-win{height:24cqw;overflow:hidden;position:relative}
.dl-win::after{content:"";position:absolute;inset:auto 0 0;height:6cqw;background:linear-gradient(transparent,#fff)}
.dl-ul{list-style:none;margin:0;padding:0}
.dl-ul li{display:grid;grid-template-columns:7cqw 1fr 2cqw;align-items:center;gap:1.2cqw;padding:1cqw 2cqw;border-bottom:1px solid #F1F3F6;font-size:max(10px,1.7cqw)}
.dl-ul .ty{font:600 max(8px,1.2cqw)/1 var(--mono);padding:.6cqw .8cqw;border-radius:.6cqw;background:#E6F0FD;color:#1F6FE0;text-align:center}
.dl-ul .st{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#D9DDE3}
.da0.on .dl-ul{animation:dlroll 6s linear both}
@keyframes dlroll{from{transform:translateY(0)}to{transform:translateY(-40cqw)}}
.da0.on .dl-ul .st{animation:dlst .3s both}
.da0.on .dl-ul li:nth-child(1) .st{animation-delay:.3s}.da0.on .dl-ul li:nth-child(2) .st{animation-delay:.6s}.da0.on .dl-ul li:nth-child(3) .st{animation-delay:.9s}.da0.on .dl-ul li:nth-child(4) .st{animation-delay:1.2s}.da0.on .dl-ul li:nth-child(5) .st{animation-delay:1.5s}.da0.on .dl-ul li:nth-child(6) .st{animation-delay:1.8s}.da0.on .dl-ul li:nth-child(7) .st{animation-delay:2.1s}.da0.on .dl-ul li:nth-child(8) .st{animation-delay:2.4s}.da0.on .dl-ul li:nth-child(9) .st{animation-delay:2.7s}.da0.on .dl-ul li:nth-child(10) .st{animation-delay:3s}.da0.on .dl-ul li:nth-child(11) .st{animation-delay:3.3s}.da0.on .dl-ul li:nth-child(12) .st{animation-delay:3.6s}.da0.on .dl-ul li:nth-child(13) .st{animation-delay:3.9s}.da0.on .dl-ul li:nth-child(14) .st{animation-delay:4.2s}.da0.on .dl-ul li:nth-child(15) .st{animation-delay:4.5s}.da0.on .dl-ul li:nth-child(16) .st{animation-delay:4.8s}
@keyframes dlst{to{background:#23855F}}
.dl-bar{height:.8cqw;background:#E6E8EC}
.dl-bar i{display:block;height:100%;width:0;background:#1F6FE0}
.da0.on .dl-bar i{animation:dlbar 5.4s linear both}
@keyframes dlbar{to{width:100%}}

/* 1: internet */
.wsx{position:relative;width:70cqw;height:42cqw;display:grid;justify-items:center;align-content:start;gap:2cqw}
.wsb{display:flex;align-items:center;gap:1.2cqw;width:40cqw;padding:1.4cqw 2cqw;border-radius:99px;background:#fff;color:#111;z-index:2;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.6)}
.wsb svg{width:2.6cqw;height:2.6cqw;color:#1F6FE0;flex:none}
.wsq{font-size:max(11px,2cqw);overflow:hidden;white-space:nowrap;width:0}
.da1.on .wsq{animation:wstype 1.2s steps(13) .3s both}
@keyframes wstype{to{width:13ch}}
.caret{width:2px;height:2.6cqw;background:#1F6FE0;animation:wsblink .8s steps(1) infinite}
@keyframes wsblink{50%{opacity:0}}
.wsg{position:relative;width:70cqw;height:32cqw}
.ring{position:absolute;left:50%;top:46%;width:10cqw;height:10cqw;margin:-5cqw;border-radius:50%;border:1px solid rgba(106,165,255,.6);opacity:0}
.da1.on .ring{animation:wsring 2.4s ease-out 1.4s infinite}.da1.on .r2{animation-delay:2.2s}.da1.on .r3{animation-delay:3s}
@keyframes wsring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(5);opacity:0}}
.ws{position:absolute;display:flex;align-items:center;gap:1cqw;padding:1.1cqw 1.6cqw;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font:500 max(10px,1.6cqw)/1 var(--body);white-space:nowrap;opacity:0;transform:scale(.6)}
.ws svg,.ws .bl{width:2.4cqw;height:2.4cqw;color:#6AA5FF}
.wsg .w0{right:auto;bottom:auto;left:0;top:2%}.wsg .w1{right:auto;bottom:auto;left:50%;top:2%;margin-left:-9cqw}.wsg .w3{left:auto;bottom:auto;right:0;top:2%}.wsg .w4{right:auto;bottom:auto;left:0;top:44%}.wsg .w7{left:auto;bottom:auto;right:0;top:44%}.wsg .w5{right:auto;bottom:auto;left:4%;top:84%}.wsg .w2{right:auto;bottom:auto;left:50%;top:84%;margin-left:-7cqw}.wsg .w6{left:auto;bottom:auto;right:4%;top:84%}
.da1.on .ws{animation:wspop .5s var(--ease) both;animation-delay:calc(1.6s + var(--i)*.38s)}
@keyframes wspop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08);background:rgba(106,165,255,.35)}100%{opacity:1;transform:none}}
.wsc{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);padding:1.4cqw 2.2cqw;border-radius:1.4cqw;background:#1F6FE0;color:#fff;font-size:max(10px,1.6cqw);white-space:nowrap;opacity:0}
.wsc b{font-size:1.4em}
.da1.on .wsc{animation:wsin .5s var(--ease) 4.8s both}
@keyframes wsin{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}

/* 2: roboty */
.cr{display:grid;grid-template-columns:1fr 26cqw;gap:4cqw;align-items:center;width:76cqw}
.cr-w{position:relative;height:30cqw}
.bw{position:absolute;width:34cqw;border-radius:1.2cqw;background:#fff;color:#111;overflow:hidden;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.7);left:calc(var(--i)*6cqw);top:calc(var(--i)*7cqw);opacity:0}
.da2.on .bw{animation:mxin .5s var(--ease) both;animation-delay:calc(var(--i)*.4s)}
.bw-bar{display:flex;align-items:center;gap:.6cqw;padding:.9cqw 1.2cqw;background:#F1F3F6;font-size:max(8px,1.2cqw);color:#555}
.bw-bar i{width:.9cqw;height:.9cqw;border-radius:50%;background:#D0D4DA}
.bw-bar span{margin-left:1cqw;padding:.3cqw 1cqw;border-radius:99px;background:#fff}
.bw-body{display:grid;gap:.9cqw;padding:1.4cqw}
.bw-body i{height:1.2cqw;border-radius:99px;background:#E6E8EC}
.bw-body i:nth-child(2){width:80%}.bw-body i:nth-child(3){width:60%}
.bw-body .sh{height:6cqw;border-radius:.8cqw;background:#EDEFF3}
.bw .scan{position:absolute;left:0;right:0;top:0;height:2px;background:#1F6FE0;box-shadow:0 0 1.2cqw #1F6FE0;opacity:0}
.da2.on .bw .scan{animation:crscan 1.4s linear infinite;animation-delay:calc(.6s + var(--i)*.3s)}
@keyframes crscan{0%{top:0;opacity:1}100%{top:100%;opacity:1}}
.cr-card{border-radius:1.6cqw;background:#fff;color:#111;padding:1.6cqw;box-shadow:0 3cqw 6cqw -3cqw rgba(0,0,0,.7)}
.cr-ph{display:grid;grid-template-columns:repeat(6,1fr);gap:.8cqw;margin-bottom:1.4cqw}
.cr-ph i{aspect-ratio:1;border-radius:.8cqw;background:#E6F0FD;opacity:.25}
.da2.on .cr-ph i{animation:crph .3s both;animation-delay:calc(1.6s + var(--i)*.22s)}
@keyframes crph{to{opacity:1;background:#6AA5FF}}
.cr-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.7cqw}
.cr-card li{display:flex;justify-content:space-between;align-items:center;font-size:max(9px,1.5cqw);padding:.6cqw .8cqw;border-radius:.6cqw;background:#F6F7F9;opacity:.35}
.cr-card li i{width:2cqw;height:2cqw;color:#23855F;opacity:0}
.cr-card li svg{width:100%;height:100%;stroke-width:3}
.da2.on .cr-card li{animation:crli .35s both;animation-delay:calc(2.6s + var(--i)*.42s)}
.da2.on .cr-card li i{animation:crok .35s both;animation-delay:calc(2.8s + var(--i)*.42s)}
@keyframes crli{to{opacity:1}}@keyframes crok{to{opacity:1}}

/* 3: łączenie */
.mx{width:72cqw;display:grid;gap:1.2cqw}
.mx-h,.mx-r{display:grid;grid-template-columns:12cqw repeat(3,1fr) 1.2fr;gap:1.2cqw;align-items:center}
.mx-h span{font-size:max(9px,1.3cqw);color:rgba(255,255,255,.6);text-align:center}
.mx-h .ok{color:#6AA5FF}
.mx-r b{font:500 max(10px,1.6cqw)/1 var(--mono);color:rgba(255,255,255,.75)}
.mx-r .v{text-align:center;padding:1.3cqw .6cqw;border-radius:1cqw;background:rgba(255,255,255,.1);font:500 max(10px,1.7cqw)/1 var(--mono);opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-r .fin{background:#1F6FE0;color:#fff;font-weight:600}
.da3.on .mx-r .v:not(.fin){animation:mxin .4s var(--ease) both,mxfade .5s ease both;animation-delay:calc(.3s + var(--r)*.35s),calc(2.6s + var(--r)*.3s)}
.da3.on .mx-r .v:nth-of-type(2){animation-delay:calc(.45s + var(--r)*.35s),calc(2.6s + var(--r)*.3s)}
.da3.on .mx-r .v:nth-of-type(3){animation-delay:calc(.6s + var(--r)*.35s),calc(2.6s + var(--r)*.3s)}
@keyframes mxin{from{opacity:0;transform:translateY(1cqw)}to{opacity:1;transform:none}}
@keyframes mxfade{from{opacity:1}to{opacity:.3;text-decoration:line-through}}
.da3.on .mx-r .fin{animation:mxfin .5s var(--ease) both;animation-delay:calc(3s + var(--r)*.4s)}
@keyframes mxfin{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:none}}

/* 4: Allegro */
.al{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"lg path n" "lg l n";gap:1.6cqw 2.4cqw;align-items:center;width:70cqw}
.al > .fl{grid-area:lg;width:12cqw;height:auto}
.al-path{grid-area:path;display:flex;flex-wrap:wrap;gap:.8cqw;font-size:max(10px,1.6cqw)}
.al-path > span{padding:.8cqw 1.4cqw;border-radius:99px;background:rgba(255,255,255,.12);opacity:0}
.da4.on .al-path > span{animation:mxin .4s var(--ease) both}.da4.on .al-path > span:nth-child(2){animation-delay:.4s}.da4.on .al-path > span:nth-child(3){animation-delay:.8s;background:#FF5A00;color:#fff}
.al-l{grid-area:l;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.9cqw}
.al-l li{display:flex;align-items:center;gap:1cqw;font-size:max(10px,1.6cqw);padding:.9cqw 1.2cqw;border-radius:.8cqw;background:rgba(255,255,255,.08)}
.al-l li i{width:1.8cqw;height:1.8cqw;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
.da4.on .al-l li{animation:alli .35s both;animation-delay:calc(1.3s + var(--i)*.4s)}
.da4.on .al-l li i{animation:alok .35s both;animation-delay:calc(1.3s + var(--i)*.4s)}
@keyframes alli{to{background:rgba(106,165,255,.18)}}@keyframes alok{to{background:#23855F;border-color:#23855F}}
.al-n{grid-area:n;display:flex;align-items:baseline;font-size:max(14px,4cqw);font-weight:600}
.al-strip{display:inline-block;height:1.15em;overflow:hidden;line-height:1.15}
.al-strip i{display:block;font-style:normal}
.da4.on .al-strip i{animation:alnum 4.2s steps(14) 1.3s both}
@keyframes alnum{to{transform:translateY(-1400%)}}

/* 5: oddajemy */
.dx{position:relative;width:70cqw;height:40cqw}
.dx-c{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:1.2cqw;padding:2cqw 2.6cqw;border-radius:1.6cqw;background:#fff;color:#111;font:600 max(11px,2cqw)/1 var(--body);white-space:nowrap;z-index:2}
.da5.on .dx-c{animation:dxc 1.4s ease-out infinite}
@keyframes dxc{0%{box-shadow:0 0 0 0 rgba(106,165,255,.6)}100%{box-shadow:0 0 0 3cqw rgba(106,165,255,0)}}
.dx-sync{width:2.6cqw;height:2.6cqw;color:#1F6FE0;display:block}
.dx-sync svg{width:100%;height:100%}
.da5.on .dx-sync{animation:dxspin 2s linear infinite}
@keyframes dxspin{to{transform:rotate(360deg)}}
.dx-d{position:absolute;padding:1.4cqw 2cqw;border-radius:1.2cqw;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);font:600 max(10px,1.7cqw)/1 var(--body);opacity:0}
.dx-d.d1{left:0;top:4%}.dx-d.d2{right:0;top:4%}.dx-d.d3{left:0;bottom:16%}.dx-d.d4{right:0;bottom:16%}
.da5.on .dx-d{animation:mxin .4s var(--ease) both}.da5.on .dx-d.d2{animation-delay:.3s}.da5.on .dx-d.d3{animation-delay:.6s}.da5.on .dx-d.d4{animation-delay:.9s}
.dx-p{position:absolute;left:50%;top:46%;width:1.6cqw;height:1.6cqw;margin:-.8cqw;border-radius:50%;background:#6AA5FF;box-shadow:0 0 1.4cqw #6AA5FF;opacity:0}
.da5.on .dx-p.d1{animation:dxp1 1.2s var(--ease) 1.2s infinite}.da5.on .dx-p.d2{animation:dxp2 1.2s var(--ease) 1.5s infinite}.da5.on .dx-p.d3{animation:dxp3 1.2s var(--ease) 1.8s infinite}.da5.on .dx-p.d4{animation:dxp4 1.2s var(--ease) 2.1s infinite}
@keyframes dxp1{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-26cqw,-14cqw)}}
@keyframes dxp2{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(26cqw,-14cqw)}}
@keyframes dxp3{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(-26cqw,12cqw)}}
@keyframes dxp4{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(26cqw,12cqw)}}
.dx-note{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:max(9px,1.4cqw);color:rgba(255,255,255,.7);white-space:nowrap}

@media (max-width:620px){
  .dl{width:76cqw}.dl-win{height:44cqw}
  .wsx{width:92cqw;height:56cqw;gap:1.4cqw}.wsb{width:62cqw;padding:1cqw 2cqw}.wsg{width:92cqw;height:42cqw}.ws{font-size:max(9px,2.4cqw)}
  .cr{grid-template-columns:minmax(0,1fr);width:86cqw;gap:2cqw}.cr-w{display:none}.cr-card{width:60cqw;justify-self:center}
  .mx{width:92cqw}.mx-h,.mx-r{grid-template-columns:14cqw repeat(3,1fr) 1.3fr;gap:.8cqw}
  .al{width:88cqw;grid-template-areas:"lg n" "path path" "l l";grid-template-columns:auto 1fr}.al-n{justify-self:end}
  .dx{width:88cqw;height:60cqw}.dx-note{white-space:normal;text-align:center;width:80cqw}
}

/* ===== v21: film zwrotów od nowa ===== */
@keyframes zin{from{opacity:0;transform:translateY(1.4cqw)}to{opacity:1;transform:none}}
/* 0 paleta */
.zf0{display:flex;align-items:center;gap:6cqw}
.zf-pal{display:grid;justify-items:center;gap:1.4cqw}
.zf-pal .palx{width:24cqw}
.zf-qs{display:grid;grid-template-columns:repeat(2,11cqw);gap:1.6cqw;justify-items:center}
.zf-qs b{grid-column:1/-1;font-size:max(10px,1.5cqw);color:#F2A341}
.zf-q{position:relative;width:11cqw;aspect-ratio:3/4;border-radius:1cqw;overflow:hidden;background:#333;opacity:0}
.zf-q img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.7)}
.zf-q em{position:absolute;right:.6cqw;top:.6cqw;width:3cqw;height:3cqw;border-radius:50%;display:grid;place-items:center;background:#F2A341;color:#1F1404;font:700 max(11px,1.8cqw)/1 var(--body);font-style:normal}
.zw0.on .zf-q{animation:zin .45s var(--ease) both;animation-delay:calc(1.2s + var(--i)*.35s)}
.zf-qs b{opacity:0}.zw0.on .zf-qs b{animation:zin .4s var(--ease) 2.8s both}
/* 1 skan */
.zf1{display:flex;align-items:center;gap:5cqw}
.zf-found{display:grid;gap:1cqw;width:30cqw;padding:2cqw;border-radius:1.6cqw;background:#fff;color:#111;opacity:0}
.zw1.on .zf-found{animation:zin .4s var(--ease) 1.4s both}
.zf-found b{font-size:max(11px,1.7cqw);margin-bottom:.4cqw}
.zf-found > span{display:flex;justify-content:space-between;align-items:center;font-size:max(10px,1.6cqw);padding:.7cqw 1cqw;border-radius:.7cqw;background:#F6F1EA;opacity:.3}
.zf-found span i{width:2cqw;height:2cqw;color:#23855F;opacity:0}
.zf-found span svg{width:100%;height:100%;stroke-width:3}
.zw1.on .zf-found > span{animation:zop .3s both;animation-delay:calc(1.9s + var(--i)*.4s)}
.zw1.on .zf-found span i{animation:zop .3s both;animation-delay:calc(2s + var(--i)*.4s)}
@keyframes zop{to{opacity:1}}
.zf-found em{font-size:max(9px,1.3cqw);color:#7A4A10;font-style:normal;margin-top:.4cqw;opacity:0}
.zw1.on .zf-found em{animation:zop .4s 3.9s both}
/* 2 stan */
.zf2{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:2cqw 4cqw;align-items:center}
.zf-it{grid-row:1/3;width:18cqw;aspect-ratio:480/709;object-fit:cover;border-radius:1.4cqw}
.zf-cd{display:grid;grid-template-columns:repeat(2,auto);gap:1.2cqw}
.zf-cd > span{box-shadow:none;padding:1.3cqw 2cqw;border-radius:1.2cqw;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:max(10px,1.7cqw);text-align:center}
.zw2.on .zf-cd .zc1{animation:zhl 4.4s steps(1) .4s both}
.zw2.on .zf-cd .zc2{animation:zhl2 4.4s steps(1) .4s both}
.zw2.on .zf-cd .zc3{animation:zhl3 4.4s steps(1) .4s both}
.zw2.on .zf-cd .zc0{animation:zpick 4.4s steps(1) .4s both}
@keyframes zhl{0%,18%{background:#B05C08;border-color:#F2A341}19%,100%{background:rgba(255,255,255,.08)}}
@keyframes zhl2{0%,18%{}19%,37%{background:#B05C08;border-color:#F2A341}38%,100%{background:rgba(255,255,255,.08)}}
@keyframes zhl3{0%,37%{}38%,56%{background:#B05C08;border-color:#F2A341}57%,100%{background:rgba(255,255,255,.08)}}
@keyframes zpick{0%,56%{}57%,100%{background:#23855F;border-color:#5FD39B;color:#fff}}
.zf-res{font-size:max(10px,1.5cqw);color:rgba(255,255,255,.7);opacity:0}
.zf-res b{color:#fff}
.zw2.on .zf-res{animation:zin .4s var(--ease) 3.3s both}
/* 3 zdjęcie */
.zf-ba{position:relative;width:26cqw;aspect-ratio:480/709;border-radius:1.6cqw;overflow:hidden;background:#ddd}
.zf-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zf-ba .a{clip-path:inset(0 100% 0 0)}
.zf-ba .ln{position:absolute;top:0;bottom:0;left:0;width:3px;background:#fff;box-shadow:0 0 1.6cqw #fff;opacity:0}
.zw3.on .zf-ba .a{animation:zwipe 2.4s var(--ease) .8s both}
.zw3.on .zf-ba .ln{animation:zline 2.4s var(--ease) .8s both}
@keyframes zwipe{to{clip-path:inset(0 0 0 0)}}
@keyframes zline{0%{left:0;opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
.zf-ba .lb{position:absolute;bottom:1.2cqw;padding:.7cqw 1.2cqw;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:max(9px,1.3cqw);white-space:nowrap}
.zf-ba .l{left:1.2cqw}.zf-ba .r{right:1.2cqw;opacity:0}
.zw3.on .zf-ba .l{animation:zfade .4s 2.6s both}.zw3.on .zf-ba .r{animation:zop .4s 2.8s both}
@keyframes zfade{to{opacity:0}}
/* 4 oferta */
.zf4{display:grid;justify-items:center;gap:1.8cqw}
.zf4 > .fl{width:12cqw;height:auto}
.zf-of{display:flex;gap:2cqw;width:52cqw;padding:1.8cqw;border-radius:1.6cqw;background:#fff;color:#111}
.zf-of img{width:12cqw;aspect-ratio:480/709;object-fit:cover;border-radius:1cqw}
.zf-fl{display:grid;gap:.9cqw;align-content:center;flex:1}
.zf-fl > span{display:grid;grid-template-columns:11cqw 1fr;font-size:max(10px,1.6cqw);opacity:0}
.zf-fl em{font-style:normal;color:#888;font-size:.85em}
.zw4.on .zf-fl > span{animation:zin .35s var(--ease) both;animation-delay:calc(.5s + var(--i)*.4s)}
.zf-btn{position:relative;display:grid;min-width:22cqw}
.zf-btn > span{grid-area:1/1;margin:0;width:auto;height:auto;padding:1.4cqw 2.6cqw;border-radius:99px;text-align:center;font:600 max(11px,1.8cqw)/1 var(--body)}
.zf-btn .zb-go{background:#FF5A00;color:#fff}
.zf-btn .zb-done{background:#23855F;color:#fff;opacity:0}
.zf-btn .cur{position:absolute;right:2cqw;bottom:-2.6cqw;width:3cqw;height:3cqw;background:#fff;clip-path:polygon(0 0,0 80%,25% 60%,45% 100%,58% 94%,40% 56%,75% 56%);opacity:0}
.zw4.on .zf-btn .cur{animation:zcur 1.2s var(--ease) 2.4s both}
@keyframes zcur{0%{opacity:0;transform:translate(6cqw,4cqw)}60%{opacity:1;transform:none}80%{transform:scale(.8)}100%{opacity:1;transform:none}}
.zw4.on .zf-btn .zb-go{animation:zfade .2s 3.4s both}
.zw4.on .zf-btn .zb-done{animation:zop .25s 3.4s both}
.zf-who{font-size:max(9px,1.4cqw);color:rgba(255,255,255,.75);opacity:0}
.zw4.on .zf-who{animation:zop .4s 3.8s both}
/* 5 kanały */
.zf5{position:relative;width:70cqw;height:40cqw}
.zf-ei{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.6cqw;padding:2cqw 3cqw;border-radius:1.6cqw;background:#fff;color:#111;font:700 max(12px,2.2cqw)/1 var(--body);z-index:2}
.zf-ei small{font-size:max(9px,1.3cqw);font-weight:500;color:#B05C08}
.zf-ch{position:absolute;display:flex;align-items:center;gap:1cqw;padding:1.3cqw 2cqw;border-radius:1.2cqw;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);font:600 max(10px,1.7cqw)/1 var(--body);opacity:0}
.zf-ch .bl{width:2.4cqw;height:2.4cqw}
.zf-ch em{position:absolute;left:50%;top:-2.4cqw;transform:translateX(-50%);padding:.4cqw 1cqw;border-radius:99px;font-style:normal;font-size:max(8px,1.2cqw);white-space:nowrap;background:#555;color:#fff;opacity:0}
.zf-ch.eb em{background:#23855F}
.zf-ch.sk{left:2%;top:4%}.zf-ch.am{right:2%;top:4%}.zf-ch.eb{left:2%;bottom:18%}.zf-ch.er{right:2%;bottom:18%}
.zw5.on .zf-ch{animation:zin .4s var(--ease) both}.zw5.on .zf-ch.am{animation-delay:.25s}.zw5.on .zf-ch.eb{animation-delay:.5s}.zw5.on .zf-ch.er{animation-delay:.75s}
.zw5.on .zf-ch.eb em{animation:zop .3s 2.6s both}
.zw5.on .zf-ch.eb{animation:zin .4s var(--ease) .5s both,zsold .4s 2.6s both}
@keyframes zsold{to{background:rgba(35,133,95,.35);border-color:#5FD39B}}
.zw5.on .zf-ch:not(.eb) em{animation:zop .3s 3.4s both}
.zw5.on .zf-ch:not(.eb){animation:zin .4s var(--ease) both,zgone .4s 3.4s both}
.zw5.on .zf-ch.am{animation-delay:.25s,3.5s}.zw5.on .zf-ch.er{animation-delay:.75s,3.6s}
@keyframes zgone{to{opacity:.45;text-decoration:line-through}}
.zf-pk{position:absolute;left:50%;top:44%;width:1.6cqw;height:1.6cqw;margin:-.8cqw;border-radius:50%;background:#F2A341;box-shadow:0 0 1.4cqw #F2A341;opacity:0}
.zw5.on .zf-pk.sk{animation:dxp1 1s var(--ease) 1s 2}.zw5.on .zf-pk.am{animation:dxp2 1s var(--ease) 1.2s 2}.zw5.on .zf-pk.eb{animation:dxp3 1s var(--ease) 1.4s 2}.zw5.on .zf-pk.er{animation:dxp4 1s var(--ease) 1.6s 2}
.zf-note{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:max(9px,1.4cqw);color:rgba(255,255,255,.8);white-space:nowrap;opacity:0}
.zw5.on .zf-note{animation:zop .4s 3.9s both}

/* ===== v21: film PrestaShop, pasek „dlaczego” ===== */
.zf-pal .tag2{position:static;transform:none}
.zf4{gap:1.2cqw;margin-top:-3cqw}
.zf-of img{width:10cqw}
.f-sc .sc{padding-top:8cqw;box-sizing:border-box}

.sc .why{position:absolute;left:50%;top:3.2cqw;transform:translate(-50%,-1cqw);display:flex;align-items:center;gap:1cqw;max-width:86%;padding:1.1cqw 2cqw;border-radius:99px;background:rgba(255,92,159,.16);border:1px solid rgba(255,92,159,.45);color:#fff;font:600 max(11px,1.65cqw)/1.3 var(--body);text-align:left;opacity:0;z-index:5}
.sc .why svg{width:2.2cqw;height:2.2cqw;flex:none;color:#FF5C9F}
.sc.on .why{animation:whyin .5s var(--ease) .5s both}
@keyframes whyin{to{opacity:1;transform:translate(-50%,0)}}
.srch2{display:grid;justify-items:center;gap:1.6cqw;width:52cqw;margin-top:6cqw}
.srch2 > .fl{width:5cqw;height:auto}
.ss-box{display:flex;align-items:center;gap:1.2cqw;width:100%;padding:1.4cqw 2cqw;border-radius:1.2cqw;background:#fff;color:#111;font-size:max(11px,1.9cqw)}
.ss-box svg{width:2.4cqw;height:2.4cqw;color:#C8005C}
.ss-q{overflow:hidden;white-space:nowrap;width:0}
.sc3.on .ss-q{animation:ssq 1s steps(12) .9s both}
@keyframes ssq{to{width:12ch}}
.ss-res{display:grid;gap:.8cqw;width:100%}
.ss-res > span{display:flex;align-items:center;gap:1.2cqw;padding:1.1cqw 1.6cqw;border-radius:1cqw;background:rgba(255,255,255,.1);font-size:max(10px,1.6cqw);opacity:0}
.ss-res i{width:4cqw;height:4cqw;border-radius:.6cqw;background:linear-gradient(135deg,#2F4A6B,#C8005C)}
.sc3.on .ss-res > span{animation:zin .3s var(--ease) both;animation-delay:calc(2s + var(--i)*.12s)}
.ss-n{font-size:max(9px,1.4cqw);color:rgba(255,255,255,.75);opacity:0}
.sc3.on .ss-n{animation:zop .4s 2.6s both}

@media (max-width:620px){
  .zf0{gap:3cqw}.zf-pal .palx{width:30cqw}.zf-qs{grid-template-columns:repeat(2,15cqw)}.zf-q{width:15cqw}
  .zf1{flex-direction:column;gap:2cqw}.zf-found{width:64cqw}
  .zf-it{width:24cqw}
  .zf-ba{width:36cqw}
  .zf-of{width:84cqw}.zf-of img{width:16cqw}.zf-fl > span{grid-template-columns:16cqw 1fr}
  .zf5{width:90cqw;height:56cqw}.zf-note{white-space:normal;text-align:center;width:84cqw}
  .sc .why{top:2cqw;max-width:92%;font-size:max(10px,2.6cqw)}.srch2{width:80cqw;margin-top:12cqw}
}

.vt-cmp.bg{aspect-ratio:576/842}

.srch2{margin-top:3cqw;gap:1.1cqw;width:48cqw}
.srch2 > .fl{width:4cqw}
.ss-box{padding:1.1cqw 1.8cqw}
.ss-res{gap:.6cqw}
.ss-res > span{padding:.8cqw 1.4cqw}
.ss-res i{width:3cqw;height:3cqw}
.jr-skip{position:absolute;left:16px;top:8px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jr-skip:focus{width:auto;height:auto;clip:auto;top:90px;z-index:5}
.vt-picks{overflow:visible}.vt-pick{flex:1 1 0;min-width:0;max-width:76px;width:auto}.vt-pick img{width:100%;height:auto;aspect-ratio:1}

/* ===== v22: casting modelek ===== */
.ck{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.ck-stage{display:grid;gap:12px;position:sticky;top:96px}
.ck-big{position:relative;aspect-ratio:832/1216;border-radius:24px;overflow:hidden;background:#C9CDCB;box-shadow:0 30px 60px -40px rgba(0,0,0,.5)}
.ck-big img{width:100%;height:100%;object-fit:cover;display:block}
.ck-big img.sw{animation:ckin .45s var(--ease)}
@keyframes ckin{from{opacity:.25;transform:scale(1.02)}}
.ck-tag,.ck-cnt{position:absolute;left:14px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.88);color:#111;font-size:12px}
.ck-tag{top:14px;font-weight:600}
.ck-cnt{bottom:14px}
.ck-poses{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.ck-p{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#C9CDCB;cursor:pointer;aspect-ratio:3/4;transition:border-color .2s,transform .2s}
.ck-p img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.ck-p:hover{transform:translateY(-2px)}
.ck-p[aria-pressed="true"]{border-color:var(--accent)}
.ck-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:22px}
.ck-grid li{animation:none;box-shadow:none;background:none;border-radius:50%;overflow:visible}
.ck-f{display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer;background:var(--sand);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line);transition:box-shadow .25s,transform .25s}
.ck-f img{width:100%;height:100%;object-fit:cover}
.ck-f:hover{transform:scale(1.06)}
.ck-f[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);transform:scale(1.08)}
.ck .mk-txt{align-self:center}
@media (max-width:900px){.ck{grid-template-columns:minmax(0,1fr)}.ck-stage{position:static;max-width:420px;width:100%;justify-self:center}.ck-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:420px){.ck-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}}
@media (max-width:900px){.ck .mk-txt{order:1}.ck-stage{order:2;max-width:320px}}

/* ===== v23: nie tylko moda ===== */
.nf{padding-block:clamp(28px,4vw,48px) 0}
.nf-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(20px,3vw,32px);border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.nf-t b{display:block;font:650 clamp(22px,2.4vw,30px)/1.15 var(--display);letter-spacing:-.01em}
.nf-t p{margin:10px 0 0;color:var(--muted);font-size:16px;line-height:1.6}
.nf-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.nf-c{position:relative;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:15px}
.nf-c svg{width:18px;height:18px;color:var(--accent);flex:none}
.nf-main{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.nf-main svg{color:var(--accent-ink)}
.nf-main em{font-style:normal;font-size:11px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.22)}
.nf-c{animation:none}.nf.on .nf-c{animation:nfin .45s var(--ease) both;animation-delay:calc(var(--i)*90ms)}
@keyframes nfin{from{opacity:0;transform:translateY(8px)}}
@media (max-width:900px){.nf-in{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.nf-c{opacity:1;transform:none}}

/* ===== v23: sklepy na komputerze i telefonie ===== */
.dvs{grid-template-columns:repeat(2,minmax(0,1fr))}
.dvc{display:grid;gap:16px;align-content:start}
.dv-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:99px;background:var(--surface);border:1px solid var(--line);justify-self:start}
.dv-tabs button{min-height:40px;padding:0 14px;border:0;border-radius:99px;background:none;color:var(--muted);font:500 14px/1 var(--body);cursor:pointer;transition:all .25s}
.dv-tabs button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.dvx{position:relative;padding:0 10% 8% 0}
.dvx .laptop{display:block;aspect-ratio:16/9}
.dvx .laptop img{width:100%;height:100%;object-fit:cover;object-position:top}
.dvphone{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:420/908;border-radius:18px;overflow:hidden;border:5px solid #1C2320;background:#1C2320;box-shadow:0 24px 40px -18px rgba(0,0,0,.55);transition:transform .4s var(--ease)}
.dvphone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dvx:hover .dvphone{transform:translateY(-6px) rotate(2deg)}
.dvx img.sw{animation:dvin .45s var(--ease)}
@keyframes dvin{from{opacity:.2}}
.dv-seen{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);max-height:0;opacity:0;overflow:hidden;padding-block:0;transition:max-height .5s var(--ease),opacity .4s,padding .4s}
.dvc.v-prod .dv-seen[data-for="prod"],.dvc.v-list .dv-seen[data-for="list"]{max-height:320px;opacity:1;padding-block:14px}
.dv-seen b{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.dv-seen ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dv-seen li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:14px;line-height:1.45}
.dv-seen svg{width:16px;height:16px;color:var(--accent);margin-top:2px}
.dvc.v-prod .dv-seen[data-for="prod"] li,.dvc.v-list .dv-seen[data-for="list"] li{animation:dvli .35s var(--ease) both;animation-delay:calc(.15s + var(--i)*.1s)}
@keyframes dvli{from{opacity:0;transform:translateX(-6px)}}
@media (max-width:900px){.dvs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.dvphone{width:34%;border-width:4px;border-radius:14px}.dvx{padding:0 14% 10% 0}}

/* ===== v25: prawdziwe zdjęcia na stronie głównej ===== */
.thumb.tph{overflow:hidden;background:#E9E8E4}
.thumb.tph img{width:100%;height:100%;object-fit:cover;object-position:top}
.jr-it{aspect-ratio:480/709;top:calc(8% + var(--y)*40%)}
.jr-f img,.jr-m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.jr-f{background:#EEECE8}
.jr-m{background:#E4E6E5}
.jr[data-ph="5"] .jr-it{left:calc(10% + var(--x6)*21%);top:calc(14% + var(--y6)*33%);width:15.5%}
.jr[data-ph="4"] .jr-it{top:calc(46% - var(--k)*5%)}

/* ===== v25: zdjęcie ze słabego na dobre (karta danych) ===== */
.pfx{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center;padding:12px 0 14px;border-bottom:1px dashed var(--line)}
.pfx-ba{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#ddd}
.pfx-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfx-ba .pfx-a{clip-path:inset(0 100% 0 0);animation:pfxw 5s var(--ease) infinite}
.pfx-ba .pfx-ln{padding:0;margin:0;border-radius:0;font-size:0;position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pfxl 5s var(--ease) infinite}
@keyframes pfxw{0%,15%{clip-path:inset(0 100% 0 0)}50%,85%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes pfxl{0%,15%{left:0;opacity:1}50%{left:100%;opacity:1}51%,100%{opacity:0;left:100%}}
.pfx-ba .pfx-lb{position:absolute;bottom:6px;padding:3px 7px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;white-space:nowrap}
.pfx-ba .pfx-l1{left:6px;animation:pfxa 5s infinite}.pfx-ba .pfx-r1{right:6px;animation:pfxb 5s infinite}
@keyframes pfxa{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes pfxb{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.pfx-l{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pfx-l li{display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center;font-size:14px}
.pfx-l svg{width:16px;height:16px;color:var(--accent)}
@media (prefers-reduced-motion: reduce){.pfx-ba .pfx-a{animation:none;clip-path:none}.pfx-ba .pfx-ln,.pfx-ba .pfx-l1{display:none}.pfx-ba .pfx-r1{animation:none;opacity:1}}

/* ===== v25: zdjęcia w hero zwrotów ===== */
.o-ph{overflow:hidden}.o-ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.fly img{width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}


/* ===== v26: film AI na prawdziwych zdjęciach ===== */
@keyframes afin{from{opacity:0;transform:translateY(1.4cqw)}to{opacity:1;transform:none}}
@keyframes afop{to{opacity:1}}
.af0,.af1,.af2,.af3,.af4{position:relative}
.af0 img,.af1 img,.af2 img,.af3 img,.af4 img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* 0 */
.af0{display:flex;align-items:center;gap:4cqw}
.af-ph{position:relative;width:24cqw;aspect-ratio:4/5;border-radius:1.6cqw;overflow:hidden;box-shadow:0 3cqw 6cqw -3cqw rgba(0,0,0,.7);transform:rotate(-3deg)}
.af-tag{position:absolute;left:1cqw;bottom:1cqw;padding:.7cqw 1.2cqw;border-radius:99px;background:rgba(0,0,0,.65);color:#fff;font-size:max(9px,1.3cqw)}
.af-notes{display:grid;gap:1.2cqw}
.af-notes > span{padding:1.2cqw 2cqw;border-radius:99px;background:rgba(242,163,65,.15);border:1px solid rgba(242,163,65,.5);color:#F2C48A;font-size:max(10px,1.7cqw);opacity:0}
.ai0.on .af-notes > span{animation:afin .4s var(--ease) both;animation-delay:calc(1s + var(--i)*.5s)}
/* 1 */
.af-ba{position:relative;width:26cqw;aspect-ratio:4/5;border-radius:1.6cqw;overflow:hidden;background:#ddd;box-shadow:0 3cqw 6cqw -3cqw rgba(0,0,0,.7)}
.af-ba img{position:absolute;inset:0}
.af-ba .a{clip-path:inset(0 100% 0 0)}
.ai1.on .af-ba .a{animation:afwipe 2.2s var(--ease) .8s both}
@keyframes afwipe{to{clip-path:inset(0 0 0 0)}}
.af-ln{position:absolute;top:0;bottom:0;left:0;width:3px;background:#A08CFF;box-shadow:0 0 1.4cqw #A08CFF;opacity:0}
.ai1.on .af-ln{animation:afline 2.2s var(--ease) .8s both}
@keyframes afline{0%{left:0;opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
.af-tag2{position:absolute;right:-6cqw;top:2cqw;padding:1cqw 1.8cqw;border-radius:99px;background:#6D4AFF;color:#fff;font-size:max(10px,1.6cqw);opacity:0}
.ai1.on .af-tag2{animation:afin .4s var(--ease) 3.1s both}
/* 2 */
.af2{display:grid;justify-items:center;gap:2.4cqw}
.af-faces{display:flex;gap:1.6cqw}
.af-face{width:9cqw;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 .3cqw rgba(255,255,255,.2);opacity:.55;transition:all .3s}
.ai2.on .af-face{animation:afhl 3.6s steps(1) .4s both}
.ai2.on .af-face.afn0{animation-name:afh0}.ai2.on .af-face.afn1{animation-name:afh1}.ai2.on .af-face.afn2{animation-name:afh2}.ai2.on .af-face.afn3{animation-name:afh3}.ai2.on .af-face.afn4{animation-name:afh4}.ai2.on .af-face.afn5{animation-name:afh5}
@keyframes afh0{0%,14%{opacity:1;box-shadow:0 0 0 .5cqw #A08CFF}15%,100%{opacity:.55}}
@keyframes afh1{0%,14%{}15%,29%{opacity:1;box-shadow:0 0 0 .5cqw #A08CFF}30%,100%{opacity:.55}}
@keyframes afh2{0%,29%{}30%,44%{opacity:1;box-shadow:0 0 0 .5cqw #A08CFF}45%,100%{opacity:.55}}
@keyframes afh3{0%,44%{}45%,59%{opacity:1;box-shadow:0 0 0 .5cqw #A08CFF}60%,100%{opacity:.55}}
@keyframes afh4{0%,59%{}60%,74%{opacity:1;box-shadow:0 0 0 .5cqw #A08CFF}75%,100%{opacity:.55}}
@keyframes afh5{0%,74%{}75%,100%{opacity:1;box-shadow:0 0 0 .6cqw #6D4AFF;transform:scale(1.15)}}
.af-pick{padding:1cqw 2cqw;border-radius:99px;background:#6D4AFF;color:#fff;font-size:max(10px,1.6cqw);opacity:0}
.ai2.on .af-pick{animation:afin .4s var(--ease) 3.4s both}
/* 3 */
.af3{display:flex;align-items:center;gap:3cqw}
.af-in{display:flex;align-items:center;gap:1.6cqw}
.af-in img{width:13cqw;height:auto;aspect-ratio:4/5;border-radius:1.2cqw;background:#fff}
.af-in img + b + img{aspect-ratio:832/1216;width:12cqw}
.af-in b{font-size:max(16px,3cqw);color:#A08CFF}
.af-arr{width:6cqw;height:2px;background:#A08CFF;position:relative;opacity:0}
.af-arr::after{content:"";position:absolute;right:-.2cqw;top:-.8cqw;border:.9cqw solid transparent;border-left-color:#A08CFF;border-right:0}
.ai3.on .af-arr{animation:afop .3s 1s both}
.af-out{width:20cqw;aspect-ratio:480/709;border-radius:1.6cqw;overflow:hidden;opacity:0;transform:scale(.9);box-shadow:0 3cqw 6cqw -3cqw rgba(0,0,0,.7)}
.ai3.on .af-out{animation:afout .7s var(--ease) 1.4s both}
@keyframes afout{to{opacity:1;transform:none}}
/* 4 */
.af4{display:flex;gap:1.8cqw}
.af-col{width:15cqw;aspect-ratio:480/709;border-radius:1.4cqw;overflow:hidden;opacity:0;box-shadow:0 2cqw 5cqw -3cqw rgba(0,0,0,.7)}
.ai4.on .af-col{animation:afin .5s var(--ease) both;animation-delay:calc(.3s + var(--i)*.35s)}
@media (max-width:620px){
  .af-ph{width:36cqw}.af-ba{width:38cqw}.af-face{width:12cqw}.af-faces{flex-wrap:wrap;justify-content:center;max-width:60cqw}
  .af-in img{width:17cqw}.af-in img + b + img{width:15cqw}.af-out{width:26cqw}.af-col{width:20cqw}.af-tag2{right:-4cqw}
}

/* ===== v27: wybór modelki w formularzu ===== */
.fmk{display:grid;gap:10px;margin:4px 0 18px}
.fmk-t{font-size:15px;font-weight:600}
.fmk-t em{font-style:normal;font-weight:400;color:var(--muted)}
.fmk-t b{display:inline-block;margin-left:6px;padding:3px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500}
.fmk-g{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px}
.fmk-o{position:relative;cursor:pointer}
.fmk-o input{position:absolute;opacity:0;pointer-events:none}
.fmk-o img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--line);transition:box-shadow .2s,transform .2s}
.fmk-o:hover img{transform:scale(1.08)}
.fmk-o input:checked + img{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent);transform:scale(1.1)}
.fmk-o input:focus-visible + img{outline:2px solid var(--accent);outline-offset:3px}
.final .fmk-t{color:inherit}
@media (max-width:560px){.fmk-g{grid-template-columns:repeat(8,minmax(0,1fr))}}
/* ===== v27: przed/po w karcie danych ===== */
.pfx2{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.pfx2 figure{margin:0;position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.pfx2 img{width:100%;height:100%;object-fit:cover;display:block}
.pfx2 figcaption{position:absolute;left:6px;top:6px;padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:10px}
.pfx2 .po figcaption{background:var(--accent);color:var(--accent-ink)}
.pfx2 .po{box-shadow:0 0 0 2px var(--accent)}
.pfx2-arr{color:var(--accent);display:grid;place-items:center}
.pfx2-arr svg{width:22px;height:22px;animation:pfx2a 1.6s ease-in-out infinite}
@keyframes pfx2a{50%{transform:translateX(4px)}}
.pfx2-l{grid-column:1/-1;list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pfx2-l li{padding:5px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500}
.pfx3{grid-template-columns:1fr 1fr}.pfx3 figure:last-of-type{aspect-ratio:4/5}.pfx3 figure:last-of-type img{object-position:top}

/* ===== mobile: tabele jako karty, kalkulator, miejsce na dolny pasek (16.10.2026) ===== */
@media (max-width:620px){
  .cyear{overflow-wrap:anywhere}
  [data-calc] *,[data-calc]{min-width:0}
  .pg{padding-bottom:84px}
  .table-wrap.tcard{overflow:visible;border:0;background:none;box-shadow:none}
  .table-wrap.tcard table,.table-wrap.tcard tbody,.table-wrap.tcard tr,.table-wrap.tcard td,.table-wrap.tcard th{display:block;width:auto}
  .table-wrap.tcard thead{display:none}
  .table-wrap.tcard caption{display:block;text-align:left;margin-bottom:8px}
  .table-wrap.tcard tr{margin:0 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
  .table-wrap.tcard td,.table-wrap.tcard tbody th{border:0;padding:4px 0;text-align:left;display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:10px;align-items:start;font-size:15px}
  .table-wrap.tcard td:first-child,.table-wrap.tcard tbody th:first-child{display:block;font-weight:650;font-size:16px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px dashed var(--line)}
  .table-wrap.tcard td[data-l2]::before{content:attr(data-l2);font:500 12px/1.4 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
  .table-wrap.tcard td.us{color:var(--accent);font-weight:600}
}
@media (max-width:620px){.table-wrap.tcard table{min-width:0!important;width:100%!important}.table-wrap.tcard td{overflow-wrap:anywhere}}

/* ===== mobile: porównania (tabele .cmp) jako „typowy vs u nas” obok siebie ===== */
@media (max-width:620px){
  .table-wrap.cmp.tcard tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:14px}
  .table-wrap.cmp.tcard td:first-child{grid-column:1/-1;border-bottom:0;margin:0;padding:0 0 2px;font-size:16px}
  .table-wrap.cmp.tcard td:not(:first-child){display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:14px;line-height:1.4;color:var(--muted)}
  .table-wrap.cmp.tcard td[data-l2]::before{font-size:10px;letter-spacing:.05em}
  .table-wrap.cmp.tcard td.us{background:var(--accent-soft);color:var(--fg);font-weight:600;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
  .table-wrap.cmp.tcard td.us[data-l2]::before{color:var(--accent)}
  .table-wrap.cmp.tcard td.us::after{content:"";position:absolute}
  .table-wrap.cmp.tcard td .yes,.table-wrap.cmp.tcard td .no{align-self:flex-start}
}

/* ===== WordPress: zwykłe strony (regulamin, polityka) i wysyłka ===== */
.legal{padding-top:clamp(32px,4vw,56px)}
.legal .pbody{margin-inline:auto}
.legal-h{font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-bottom:8px}
.legal .pbody h2{font-size:clamp(22px,2.2vw,28px);margin-top:18px}
.legal .pbody h3{font-size:19px;margin-top:8px}
.legal .pbody ul,.legal .pbody ol{padding-left:1.2em}
button.sending{opacity:.6;pointer-events:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.ckb{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;justify-content:center}
.ckb[hidden]{display:none}
.ckb-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:880px;padding:16px 20px;border-radius:18px;background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:0 24px 50px -24px rgba(0,0,0,.45)}
.ckb-in p{margin:0;flex:1 1 320px;font-size:14px;line-height:1.55;color:var(--muted)}
.ckb-in p b{color:var(--fg)}
.ckb-in a{color:var(--accent)}
.ckb-b{display:flex;gap:8px;flex-wrap:wrap}
.ckb-b .btn{min-height:44px;padding:0 16px;font-size:14px}
html{overflow-x:clip}.grecaptcha-badge{visibility:hidden}