:root{
  --ground:#F4F6F2;
  --surface:#FFFFFF;
  --sunk:#E8ECE6;
  --ink:#141D2B;
  --ink-2:#4B5566;
  --line:#D2D8D0;
  --stock:#2446D8;  --stock-soft:#E3E9FD;
  --order:#D98410;  --order-soft:#FBEBD2;
  --mint:#138A66;   --mint-soft:#D6F0E6;
  --coral:#D9442E;  --coral-soft:#FBE1DB;
  --ok:#138A66; --warn:#C0730C;
  --hero:#0E1A4A; --hero-2:#16266A; --hero-ink:#F2F5FF; --hero-dim:#AEB9E6;
  --hero-s:#93AAFF; --hero-o:#FFB547;
  --term:#0B1230; --term-ink:#D5DCF2; --term-dim:#7482B0;
  --display:"Familjen Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1318;--surface:#161C24;--sunk:#1C2330;--ink:#E6EAF2;--ink-2:#A6AFBF;--line:#2B3342;
    --stock:#8FA6FF;--stock-soft:#1A2448;--order:#F0A640;--order-soft:#3A2A12;
    --mint:#4FD1A5;--mint-soft:#113328;--coral:#FF7A63;--coral-soft:#3D1D17;--ok:#4FD1A5;--warn:#F0A640;
    --hero:#0A1236;--hero-2:#121E52;--term:#070C22;
  }
}
:root[data-theme="dark"]{
  --ground:#0F1318;--surface:#161C24;--sunk:#1C2330;--ink:#E6EAF2;--ink-2:#A6AFBF;--line:#2B3342;
  --stock:#8FA6FF;--stock-soft:#1A2448;--order:#F0A640;--order-soft:#3A2A12;
  --mint:#4FD1A5;--mint-soft:#113328;--coral:#FF7A63;--coral-soft:#3D1D17;--ok:#4FD1A5;--warn:#F0A640;
  --hero:#0A1236;--hero-2:#121E52;--term:#070C22;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
a{color:inherit}
:focus-visible{outline:2px solid var(--order);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(30px,4.2vw,46px);font-weight:700}
h3{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.lede{font-size:18px;color:var(--ink-2);max-width:62ch}
code,.mono{font-family:var(--mono);font-size:.9em}
.num{font-variant-numeric:tabular-nums}
svg{max-width:100%}

.mock{background:var(--order);color:#1A1204;font:600 12px/1.4 var(--mono);text-align:center;padding:7px 16px;letter-spacing:.04em}

/* ---------- HERO BAND ---------- */
.band-hero{position:relative;overflow:hidden;color:var(--hero-ink);
  background:
    radial-gradient(60% 80% at 92% 10%, rgba(255,181,71,.22), transparent 60%),
    radial-gradient(55% 70% at 8% 100%, rgba(80,120,255,.35), transparent 60%),
    linear-gradient(160deg,var(--hero-2),var(--hero));}
.band-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  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:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
.band-hero > .wrap{position:relative}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .glyph{width:36px;height:36px;flex:none}
.brand .glyph .bg{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.22);stroke-width:1}
.brand .wm{font:700 25px/1 var(--display);letter-spacing:-.035em;color:#fff}
.brand .wm span{color:var(--hero-s)}
.foot .brand .glyph{width:28px;height:28px}
.foot .brand .wm{font-size:20px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);text-decoration:none;padding:13px 18px;border-radius:6px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:var(--ground)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--ink)}
.btn.amber{background:#FFB547;color:#1A1204}
.btn.amber:hover{background:#FFC56E}
.btn.light{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.04)}
.btn.light:hover{border-color:#fff}

.hero{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(40px,7vw,80px) clamp(48px,7vw,88px)}
@media (max-width:940px){.hero{grid-template-columns:1fr}}
.hero .eyebrow{color:var(--hero-dim)}
.hero h1{font-size:clamp(40px,6.2vw,74px);font-weight:700;letter-spacing:-.035em;line-height:.98}
.hero h1 .s{color:var(--hero-s)}
.hero h1 .o{color:var(--hero-o)}
.hero h1 .strike{position:relative;white-space:nowrap}
.hero h1 .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.09em;background:#FF7A63;transform:rotate(-3deg);border-radius:2px}
.hero .copy{display:grid;gap:24px}
.hero .lede{color:var(--hero-dim)}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 13px/1 var(--body);padding:8px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:var(--hero-ink)}
.chip b{color:var(--hero-o);font-weight:600}

/* app window */
.win{background:var(--surface);color:var(--ink);border:1px solid rgba(255,255,255,.15);border-radius:12px;box-shadow:0 30px 80px -30px rgba(0,0,0,.6);overflow:hidden;min-width:0}
.win .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font:500 13px/1 var(--body);color:var(--ink-2)}
.win .bar b{color:var(--ink);font-weight:600}
.win .bar .dots{display:flex;gap:6px}
.win .bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.win .bar .dots i:nth-child(1){background:var(--stock)}
.win .bar .dots i:nth-child(2){background:var(--order)}
.win .menu{display:flex;gap:16px;padding:7px 14px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line);background:var(--sunk)}
.win .panes{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
@media (max-width:480px){.win .panes{grid-template-columns:1fr}}
.pane{border-radius:8px;padding:12px;display:grid;gap:8px;align-content:start}
.pane.s{background:var(--stock-soft)} .pane.o{background:var(--order-soft)}
.pane .t{font:600 14px/1.2 var(--body)}
.pane .row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--body);padding:5px 8px;border-radius:99px;white-space:nowrap;color:var(--ok);background:var(--surface)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pane .k{font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.pane.s .k{color:var(--stock)} .pane.o .k{color:var(--order)}
.pane .big{font:700 22px/1 var(--display);letter-spacing:-.01em}
.log{background:var(--term);color:var(--term-ink);font:400 12px/1.65 var(--mono);padding:12px 14px;height:204px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log .tm{color:var(--term-dim)} .log .inf{color:#6FE0AE} .log .wrn{color:#FFC061}
.log .ds{color:#9FB2FF} .log .do{color:#FFC061}
.log div.new{animation:slide .45s ease-out}
@keyframes slide{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- FLOW BANNER ---------- */
.flowband{background:var(--surface);border-bottom:1px solid var(--line)}
.flow{padding-block:clamp(28px,4vw,44px)}
.flow svg{display:block;width:100%;height:auto}
.flow .lbl{font:700 22px var(--display);fill:var(--ink)}
.flow .sub{font:500 13px var(--mono);fill:var(--ink-2)}
.flow .tx{font:600 12px var(--mono)}
.f-db{fill:var(--stock-soft);stroke:var(--stock);stroke-width:2.5}
.f-shop{fill:var(--order-soft);stroke:var(--order);stroke-width:2.5}
.f-aw1{fill:var(--order)} .f-aw2{fill:var(--surface);stroke:var(--order);stroke-width:2.5}
.f-lane-s{stroke:var(--stock);stroke-width:2;stroke-dasharray:6 8;fill:none;opacity:.55}
.f-lane-o{stroke:var(--order);stroke-width:2;stroke-dasharray:6 8;fill:none;opacity:.7}
.f-box{fill:var(--stock)} .f-box-t{fill:#fff}
.f-rc{fill:var(--surface);stroke:var(--order);stroke-width:2} .f-rc-l{stroke:var(--order);stroke-width:2}
.f-rc-t{fill:var(--order)}
.f-ink{fill:var(--ink)} .f-line{stroke:var(--stock);stroke-width:2.5;fill:none}
.f-win{fill:var(--surface);stroke:var(--order);stroke-width:2}
.pk{animation-duration:7s;animation-timing-function:linear;animation-iteration-count:infinite}
.pk.r{animation-name:mvR} .pk.l{animation-name:mvL}
@keyframes mvR{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(470px);opacity:0}}
@keyframes mvL{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(-470px);opacity:0}}
@media (prefers-reduced-motion: reduce){.pk{animation-play-state:paused} .log div.new{animation:none}}

/* ---------- SECTIONS ---------- */
section{padding-block:clamp(56px,8vw,96px)}
section.t-plain{border-top:1px solid var(--line)}
section.t-order{background:color-mix(in srgb,var(--order-soft) 55%,var(--ground))}
section.t-stock{background:color-mix(in srgb,var(--stock-soft) 55%,var(--ground))}
section.t-mint{background:color-mix(in srgb,var(--mint-soft) 50%,var(--ground))}
.head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px);max-width:760px}
.eyebrow.c-s{color:var(--stock)} .eyebrow.c-o{color:var(--order)} .eyebrow.c-m{color:var(--mint)} .eyebrow.c-c{color:var(--coral)}

/* two directions */
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:820px){.dirs{grid-template-columns:1fr}}
.dir{padding:clamp(22px,3vw,34px);display:grid;gap:18px;align-content:start;border-radius:14px;position:relative;overflow:hidden}
.dir.s{background:var(--stock-soft)} .dir.o{background:var(--order-soft)}
.dir .ic{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;color:#fff}
.dir.s .ic{background:var(--stock)} .dir.o .ic{background:var(--order)}
.dir .ic svg{width:28px;height:28px}
.route{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--display)}
.route .arrow{flex:1;height:2px;position:relative;background:currentColor;min-width:40px}
.route .arrow::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:9px solid currentColor;border-right:0}
.dir.s .route{color:var(--stock)} .dir.o .route{color:var(--order)}
.route .end{color:var(--ink)}
.dir ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dir li{display:grid;grid-template-columns:18px 1fr;gap:10px;font-size:15px;color:var(--ink-2)}
.dir li::before{content:"";width:9px;height:9px;margin-top:8px;border-radius:50%}
.dir.s li::before{background:var(--stock)} .dir.o li::before{background:var(--order)}
.dir li b{color:var(--ink);font-weight:600}
.tag{justify-self:start;font:600 12px/1 var(--mono);padding:7px 10px;border-radius:99px;color:#fff}
.dir.s .tag{background:var(--stock)} .dir.o .tag{background:var(--order)}

/* ZK anatomy */
.anat{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:940px){.anat{grid-template-columns:minmax(0,1fr)}}
.doc{background:var(--surface);border-radius:6px;padding:clamp(18px,3vw,30px);font-size:13.5px;box-shadow:0 20px 50px -28px rgba(120,70,0,.45);border-top:6px solid var(--order);transform:rotate(-.6deg)}
@media (max-width:940px){.doc{transform:none}}
.doc .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.doc .dh .ttl{font:700 22px/1.1 var(--display);letter-spacing:-.01em}
.doc .dh .nr{font:600 14px/1 var(--mono);background:var(--order);color:#1A1204;padding:8px 10px;border-radius:4px}
.doc .meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;padding-block:16px;border-bottom:1px solid var(--line)}
@media (max-width:520px){.doc .meta{grid-template-columns:1fr}}
.doc dl{margin:0;display:grid;gap:3px}
.doc dt{font:500 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.doc dd{margin:0}
.tbl{overflow-x:auto;margin-top:12px}
.doc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:480px}
.doc th{font:500 10.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
.doc td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.doc td.r,.doc th.r{text-align:right}
.doc .svc{font:500 10.5px/1 var(--mono);color:var(--coral);background:var(--coral-soft);padding:3px 5px;border-radius:3px;margin-left:6px;white-space:nowrap}
.doc .tot{display:flex;justify-content:flex-end;gap:28px;flex-wrap:wrap;padding-top:14px;font-variant-numeric:tabular-nums}
.doc .tot b{font:700 18px/1 var(--display)}
.mk{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--coral);color:#fff;font:600 10.5px/1 var(--mono);vertical-align:1px;margin-right:4px;flex:none}
.notes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.notes li{display:grid;grid-template-columns:30px 1fr;gap:10px;background:var(--surface);border-radius:10px;padding:14px 16px}
.notes .mk{width:26px;height:26px;font-size:12px;margin-top:0}
.notes h3{font-size:17px;margin-bottom:4px}
.notes p{color:var(--ink-2);font-size:15px}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:s}
@media (max-width:940px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;padding:20px;border-radius:12px;background:var(--surface);display:grid;gap:10px;align-content:start;border-top:5px solid var(--c)}
.steps li:nth-child(1){--c:var(--stock)} .steps li:nth-child(2){--c:var(--mint)} .steps li:nth-child(3){--c:var(--order)} .steps li:nth-child(4){--c:var(--coral)} .steps li:nth-child(5){--c:var(--stock)}
.steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);color:#fff;font:700 18px/1 var(--display)}
.steps .n::before{content:counter(s)}
.steps h3{font-size:18px}
.steps p{font-size:14.5px;color:var(--ink-2)}

/* safety */
.safe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.safe{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.safe{grid-template-columns:1fr}}
.safe > div{display:grid;gap:10px;align-content:start;background:var(--surface);border-radius:12px;padding:22px}
.safe .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--fg)}
.safe .ic svg{width:24px;height:24px}
.safe > div:nth-child(3n+1) .ic{--bg:var(--stock-soft);--fg:var(--stock)}
.safe > div:nth-child(3n+2) .ic{--bg:var(--mint-soft);--fg:var(--mint)}
.safe > div:nth-child(3n) .ic{--bg:var(--coral-soft);--fg:var(--coral)}
.safe h3{font-size:18px}
.safe p{font-size:15px;color:var(--ink-2)}

/* compare */
.cmp{overflow-x:auto;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.cmp table{width:100%;border-collapse:collapse;min-width:680px;font-size:15px}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp thead th{font:600 15px/1.25 var(--display);vertical-align:bottom}
.cmp thead th small{display:block;font:400 12px/1.4 var(--body);color:var(--ink-2);margin-top:4px}
.cmp thead th.us{background:var(--stock);color:#fff}
.cmp thead th.us small{color:rgba(255,255,255,.8)}
.cmp td.us{background:color-mix(in srgb,var(--stock) 8%,transparent);font-weight:500}
.cmp tbody th{font-weight:500;color:var(--ink-2);width:26%}
.st{display:inline-flex;align-items:center;gap:6px;font-size:14px;padding:3px 9px;border-radius:99px}
.st.y{color:var(--mint);background:var(--mint-soft)} .st.w{color:var(--warn);background:var(--order-soft)} .st.n{color:var(--ink-2);background:var(--sunk)}
.fine{font-size:13px;color:var(--ink-2);margin-top:14px;max-width:80ch}

/* req + pricing */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.req{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.req li{display:grid;grid-template-columns:40px minmax(0,130px) 1fr;gap:14px;align-items:center;padding:12px 14px;border-radius:10px;background:var(--surface);font-size:15px}
.req .ic{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:var(--mint-soft);color:var(--mint)}
.req .ic svg{width:22px;height:22px}
.req li span.k{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
@media (max-width:480px){.req li{grid-template-columns:40px 1fr}.req li span.v{grid-column:2}}
.price{position:relative;overflow:hidden;border-radius:16px;padding:clamp(24px,3.5vw,36px);display:grid;gap:18px;align-content:start;color:#fff;
  background:radial-gradient(70% 90% at 100% 0%, rgba(255,181,71,.35), transparent 60%),linear-gradient(150deg,#2F55F0,#1B2F9E)}
.price .eyebrow{color:rgba(255,255,255,.8)}
.price .amt{font:700 64px/1 var(--display);letter-spacing:-.04em}
.price .amt small{font:500 16px/1 var(--body);color:rgba(255,255,255,.8);letter-spacing:0;margin-left:8px}
.price ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.price li{display:flex;gap:10px}
.price li::before{content:"✓";color:#FFB547;font-weight:700}
.price .btn.ghostw{border-color:rgba(255,255,255,.4);color:#fff}
.price .btn.ghostw:hover{border-color:#fff}
.price .coin{position:absolute;right:-30px;bottom:-30px;width:170px;opacity:.18;pointer-events:none}

/* faq */
.faq{max-width:820px;display:grid;gap:10px}
.faq details{background:var(--surface);border-radius:10px;padding:0 20px;border-left:4px solid var(--line)}
.faq details[open]{border-left-color:var(--order)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font:600 18px/1.3 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:500 22px/1 var(--mono);color:var(--order);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:68ch}

/* final banner */
.finalband{padding-block:clamp(40px,6vw,72px)}
.final{position:relative;overflow:hidden;border-radius:20px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;color:#1A1204;
  background:linear-gradient(120deg,#FFB547,#FF8A4C 60%,#F2654B)}
@media (max-width:760px){.final{grid-template-columns:1fr}}
.final h2{max-width:16ch;color:#1A1204}
.final p{font-size:17px;max-width:44ch;margin-top:12px;color:#3A2410}
.final .cta{margin-top:24px}
.final .btn.dark{background:#141D2B;color:#fff}
.final .btn.outl{border-color:rgba(26,18,4,.4);color:#1A1204}
.final svg{width:100%;max-width:320px;justify-self:center}
.final .pattern{position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:radial-gradient(#1A1204 1.5px,transparent 1.5px);background-size:18px 18px;mask-image:linear-gradient(90deg,transparent 40%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000)}
.final > *{position:relative}

footer.foot{background:var(--hero);color:var(--hero-dim);font-size:13px}
footer.foot .wrap{padding-block:28px 36px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
footer.foot b{color:var(--hero-ink)}

/* ---------- WSPÓLNE: okruszki, stopka ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:14px 0 0;font:500 13px/1.4 var(--mono);color:var(--hero-dim)}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{color:var(--hero-dim);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:var(--hero-ink)}
.foot-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;width:100%;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-links b{color:var(--hero-ink)}
.foot-links a{color:var(--hero-dim);text-decoration:none}
.foot-links a:hover{color:#fff}
.foot-links em{font-style:normal;font:500 11px/1 var(--mono);color:var(--hero-o);margin-left:4px;text-transform:uppercase;letter-spacing:.06em}

/* ---------- STRONA GŁÓWNA ---------- */
.hub-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(40px,7vw,80px) clamp(48px,7vw,88px)}
@media (max-width:940px){.hub-hero{grid-template-columns:1fr}}
.hub-hero .copy{display:grid;gap:24px}
.hub-hero .eyebrow{color:var(--hero-dim)}
.hub-hero h1{font-size:clamp(38px,5.6vw,66px);font-weight:700;letter-spacing:-.035em;line-height:1}
.hub-hero h1 em{font-style:normal;color:var(--hero-o)}
.hub-hero .lede{color:var(--hero-dim)}
.hubmap{width:100%;height:auto;display:block}
.hubmap .t{font:700 17px var(--display);fill:#fff}
.hubmap .s{font:500 11.5px var(--mono);fill:var(--hero-dim)}
.hubmap .pill-t{font:600 10.5px var(--mono)}

.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.products{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.products{grid-template-columns:1fr}}
.prod{background:var(--surface);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line)}
.prod .top{padding:22px 24px;display:grid;gap:14px;background:var(--tint)}
.prod.sky{--tint:var(--stock-soft);--acc:var(--stock)}
.prod.presta{--tint:var(--coral-soft);--acc:var(--coral)}
.prod.ask{--tint:var(--sunk);--acc:var(--ink-2);border-style:dashed;background:transparent}
.prod .pair{display:flex;align-items:center;gap:10px;font:700 22px/1.1 var(--display);letter-spacing:-.02em}
.prod .pair i{font-style:normal;color:var(--acc);font-weight:600}
.status{justify-self:start;display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--body);padding:6px 10px;border-radius:99px;background:var(--surface)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.on{color:var(--mint)} .status.soon{color:var(--coral)}
.prod .body{padding:22px 24px 24px;display:grid;gap:16px;align-content:start}
.prod .body p{color:var(--ink-2);font-size:15px}
.prod ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:15px}
.prod li{display:grid;grid-template-columns:16px 1fr;gap:8px}
.prod li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc);margin-top:8px}
.prod .foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--line)}
.prod .price-s{font:700 22px/1 var(--display);letter-spacing:-.02em}
.prod .price-s small{font:400 13px var(--body);color:var(--ink-2);margin-left:4px;letter-spacing:0}
.prod .btn{padding:11px 15px;font-size:14px}
.btn.acc{background:var(--acc);color:#fff}
.btn.acc:hover{filter:brightness(1.08)}

.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why{grid-template-columns:1fr}}
.why > div{background:var(--surface);border-radius:12px;padding:22px;display:grid;gap:10px;align-content:start}
.why .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--fg)}
.why .ic svg{width:24px;height:24px}
.why > div:nth-child(1) .ic{--bg:var(--stock-soft);--fg:var(--stock)}
.why > div:nth-child(2) .ic{--bg:var(--mint-soft);--fg:var(--mint)}
.why > div:nth-child(3) .ic{--bg:var(--order-soft);--fg:var(--order)}
.why > div:nth-child(4) .ic{--bg:var(--coral-soft);--fg:var(--coral)}
.why h3{font-size:18px}
.why p{font-size:15px;color:var(--ink-2)}

/* ---------- ZAPOWIEDŹ PRESTASHOP ---------- */
.band-hero.presta{background:
    radial-gradient(60% 80% at 92% 10%, rgba(255,122,99,.28), transparent 60%),
    radial-gradient(55% 70% at 8% 100%, rgba(80,120,255,.3), transparent 60%),
    linear-gradient(160deg,var(--hero-2),var(--hero))}
.soon-badge{display:inline-flex;align-items:center;gap:8px;justify-self:start;font:600 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#1A1204;background:#FF9A85;padding:8px 12px;border-radius:6px}
.hub-hero h1 .c{color:#FF9A85}
.btn.coral{background:#FF9A85;color:#1A1204}
.btn.coral:hover{background:#FFB3A3}
.dir.p{background:var(--coral-soft)}
.dir.p .ic{background:var(--coral)}
.dir.p .route{color:var(--coral)}
.dir.p li::before{background:var(--coral)}
.dir.p .tag{background:var(--coral)}
.note{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border-radius:12px;padding:18px 20px;border-left:4px solid var(--stock);max-width:820px}
.note p{color:var(--ink-2)}
.note b{color:var(--ink)}

/* ---------- MENU GÓRNE (wspólne dla wszystkich stron) ---------- */
.sitebar{position:sticky;top:0;z-index:50;color:var(--hero-ink);background:rgba(14,26,74,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
.sitebar .wrap{position:relative;display:flex;align-items:center;gap:16px;padding-block:12px}
.navlinks{display:flex;align-items:center;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.navlinks a{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:6px;color:var(--hero-dim);text-decoration:none;font-size:15px;white-space:nowrap}
.navlinks a:hover{color:#fff;background:rgba(255,255,255,.07)}
.navlinks a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 -2px 0 var(--hero-o)}
.navlinks em{font-style:normal;font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#FF9A85;border:1px solid rgba(255,154,133,.5);padding:3px 5px;border-radius:4px}
.navlinks .only-mobile{display:none}
.sitebar .btn.cta-top{padding:10px 14px;font-size:14px}
.navtoggle{display:none;align-items:center;gap:8px;margin-left:auto;font:600 14px/1 var(--body);color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:9px 12px;cursor:pointer}
.navtoggle .bars,.navtoggle .bars::before,.navtoggle .bars::after{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s}
.navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0}
.navtoggle .bars::before{top:-5px} .navtoggle .bars::after{top:5px}
.sitebar.open .navtoggle .bars{background:transparent}
.sitebar.open .navtoggle .bars::before{transform:translateY(5px) rotate(45deg)}
.sitebar.open .navtoggle .bars::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:920px){
  .navtoggle{display:inline-flex}
  .sitebar .btn.cta-top{display:none}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:8px clamp(16px,4vw,40px) 16px;background:var(--hero);border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
  .sitebar.open .navlinks{display:flex}
  .navlinks a{padding:13px 12px;font-size:16px}
  .navlinks .only-mobile{display:block;margin-top:8px}
  .navlinks .only-mobile a{justify-content:center;background:#FFB547;color:#1A1204;font-weight:600}
}

/* nawigacja po sekcjach bieżącej strony */
.pagenav{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:14px 0 0;list-style:none}
.pagenav li:first-child{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hero-dim);margin-right:4px}
.pagenav a{display:block;font-size:14px;color:var(--hero-ink);text-decoration:none;padding:7px 11px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.pagenav a:hover{border-color:#fff}

/* ---------- CENY (trzeci kierunek) + makieta okna zgodna z aplikacją ---------- */
.hero{grid-template-columns:.9fr 1.1fr}
@media (max-width:940px){.hero{grid-template-columns:1fr}}
.hero h1 .c{color:#5FE0B5}
.win .bar .appicon{display:grid;place-items:center;width:20px;height:20px;border-radius:5px;background:linear-gradient(135deg,#6F8BFF,#FFB547);color:#fff;font:700 12px/1 var(--body)}
.win .bar .ctl{margin-left:auto;display:flex;gap:18px;font:400 14px/1 var(--body);color:var(--ink-2)}
.win .menu{align-items:center;flex-wrap:wrap}
.win .menu .conn{margin-left:auto;display:flex;align-items:center;gap:6px}
.win .menu .conn em{font-style:normal;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-right:2px}
.win .menu .cbtn{display:inline-flex;align-items:center;gap:5px;font:500 11.5px/1 var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:5px 8px}
.win .menu .cbtn i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
@media (max-width:520px){.win .menu .conn{display:none}}
.win .panes.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:10px}
@media (max-width:560px){.win .panes.three{grid-template-columns:1fr}}
.panes.three .pane{padding:11px;gap:7px}
.panes.three .pane .t{font-size:13.5px}
.panes.three .pane .row{flex-wrap:wrap;font-size:11.5px}
.panes.three .pane .big{font-size:20px}
.pane.c{background:var(--mint-soft)}
.pane.c .k{color:var(--mint)}
.pane .stat{display:grid;gap:3px;font-size:11.5px;color:var(--ink-2);line-height:1.35}
.pane .stat .drop{color:var(--warn);font-weight:600}
.pane .pbtn{justify-self:start;margin-top:2px;font:600 11.5px/1 var(--body);padding:7px 9px;border-radius:5px;color:#fff;background:#2446D8;white-space:nowrap}
.pane.c .pbtn{background:#138A66}
.pane.o .pbtn{background:#FFB547;color:#1A1204}
.win .single{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 10px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px}
.win .single em{font-style:normal;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.win .single .inp{flex:1;min-width:70px;font:400 12px/1 var(--mono);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:7px 8px}
.win .single .chk{display:inline-flex;align-items:center;gap:5px}
.win .single .chk::before{content:"✓";display:grid;place-items:center;width:14px;height:14px;border-radius:3px;background:#2446D8;color:#fff;font-size:10px;font-weight:700}
.win .single .sbtn{font-weight:600;border:1px solid var(--line);border-radius:5px;padding:6px 10px}
.log .dc{color:#4FD1A5}

.dirs.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.dirs.three{grid-template-columns:1fr}}
.dir.m{background:var(--mint-soft)}
.dir.m .ic{background:var(--mint)}
.dir.m .route{color:var(--mint)}
.dir.m li::before{background:var(--mint)}
.dir.m .tag{background:var(--mint)}

.f-lane-c{stroke:var(--mint);stroke-width:2;stroke-dasharray:6 8;fill:none;opacity:.7}
.f-tag{fill:var(--mint)}
.pk.slow{animation-duration:10s}

/* cennik okresów w karcie ceny */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.price .plans{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
.price .plans th,.price .plans td{padding:9px 10px;text-align:right;border-bottom:1px solid rgba(255,255,255,.18)}
.price .plans th:first-child{text-align:left}
.price .plans thead th{font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.price .plans tbody th{font-weight:500}
.price .plans tbody tr:last-child th,.price .plans tbody tr:last-child td{border-bottom:0}
.price .plans tr.best{background:rgba(255,255,255,.12)}
.price .plans tr.best td,.price .plans tr.best th{font-weight:700}
.price .plans em{display:inline-block;margin-left:8px;font:600 10.5px/1 var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;padding:4px 7px;border-radius:99px;background:#FFB547;color:#1A1204;vertical-align:2px}
@media (max-width:420px){.price .plans em{display:block;margin:6px 0 0;width:max-content}}

/* strony z tekstem prawnym */
.legal{max-width:760px;padding-block:clamp(32px,5vw,56px) clamp(48px,7vw,80px)}
.legal h1{font:700 clamp(32px,5vw,44px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 10px}
.legal .meta{color:var(--ink-2);font-size:14px;margin:0 0 28px}
.legal h2{font:600 22px/1.25 var(--display);margin:36px 0 10px}
.legal p,.legal li{color:var(--ink-2)}
.legal ol,.legal ul{padding-left:22px;display:grid;gap:6px}
.legal b{color:var(--ink)}
.legal .fill{background:var(--order-soft);color:var(--ink);border-radius:4px;padding:1px 6px;font-family:var(--mono);font-size:.9em}
.legal table{width:100%;min-width:560px;border-collapse:collapse;margin:8px 0;font-variant-numeric:tabular-nums}
.legal th,.legal td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}

/* regulamin: spis treści, formularz, wydruk */
.legal .toc{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:0 0 8px}
.legal .toc ol{margin:0;columns:2;column-gap:28px;display:block}
.legal .toc li{margin:0 0 4px;break-inside:avoid}
@media (max-width:640px){.legal .toc ol{columns:1}}
.legal h2[id]{scroll-margin-top:90px}
.legal .formbox{background:var(--surface);border:1px dashed var(--line);border-radius:10px;padding:18px 22px;display:grid;gap:8px}
.legal .formbox .small{font-size:13px}
@media print{
  .mock,.sitebar,.foot,.legal .toc{display:none!important}
  body{background:#fff;color:#000}
  .legal{max-width:none;padding:0}
  .legal p,.legal li{color:#000}
  .legal .fill{background:none;border:1px solid #999}
}