/* Montserrat (OFL) z własnego serwera — bez połączeń z Google przy podstronach */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url(/wspolne/fonts/montserrat-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;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url(/wspolne/fonts/montserrat-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;}
/* gx-wspolne.css — topbar, hamburger, menu, pasek filarow: wyciete 1:1 z zywego gek-x.nl (deploy 6a724a43…, 30.10.2026). Jedno zrodlo dla wszystkich podstron. Kodzior T80. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --font:'Montserrat',-apple-system,sans-serif;
  --saas:#0A84FF;--print:#FF2A2A;--site:#00D26A;--optima:#6B7280;--lab:#E6B800;--mugmag:#8B5CF6;
  --topbar-h:52px;
  --text-w:rgba(255,255,255,0.92);
  --text-w-sec:rgba(255,255,255,0.5);
  --text-w-faint:rgba(255,255,255,0.2);
  --card-dark:rgba(255,255,255,0.04);
  --border-dark:rgba(255,255,255,0.08);
}
html{overflow-x:hidden;overscroll-behavior-x:none;}
body{font-family:var(--font);background:#000;color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-x:none;position:relative;width:100%;}
.topbar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--topbar-h);padding-top:env(safe-area-inset-top);background:rgba(0,0,0,0.95);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:none;display:flex;align-items:center;justify-content:space-between;padding:0 20px;transition:all 0.3s;}
.topbar::before{display:none;}
.topbar::after{display:none;}
.topbar.scrolled{box-shadow:0 2px 16px rgba(0,0,0,0.3);}
.topbar-left{display:flex;align-items:center;gap:14px;}
.hamburger{background:none;border:none;cursor:pointer;padding:6px;display:flex;flex-direction:column;gap:4px;}
.hamburger span{display:block;width:18px;height:1.8px;background:#fff;border-radius:2px;transition:all 0.3s;}
.hamburger:hover span{background:var(--print);}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.hamburger.active span:nth-child(2){opacity:0;transform:scaleX(0);}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
.topbar-brand{display:flex;flex-direction:column;cursor:pointer;line-height:1;}
.topbar-brand-top{font-weight:900;font-size:1.65rem;letter-spacing:-0.02em;display:flex;align-items:center;}
.topbar-brand-top .gek{color:#fff;}
.topbar-brand-top .sep{display:inline-block;width:9px;height:3.5px;background:rgba(255,255,255,0.2);margin:0 3px;border-radius:1px;align-self:center;margin-bottom:3px;}
.topbar-brand-top .x{color:var(--print);}
.topbar-brand-top .tm{font-size:0.55em;color:rgba(255,255,255,0.3);font-weight:600;align-self:flex-start;margin-top:1px;margin-left:2px;line-height:1;}
.topbar-sub{font-size:0.48rem;font-weight:600;color:rgba(255,255,255,0.3);letter-spacing:0.05em;text-transform:uppercase;transition:all 0.4s;overflow:hidden;max-height:14px;}
.topbar-sub.hide{max-height:0;opacity:0;}
.topbar-center{display:flex;align-items:center;gap:3px;position:absolute;left:50%;transform:translateX(-50%);}
.topbar-center a{font-size:0.6rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;padding:4px 10px;border-radius:100px;color:rgba(255,255,255,0.6);transition:opacity 0.8s cubic-bezier(0.25,1,0.5,1),transform 0.8s cubic-bezier(0.25,1,0.5,1);white-space:nowrap;opacity:0;transform:translateY(-4px);pointer-events:none;text-decoration:none;}
.topbar-center a.show{opacity:1;transform:none;pointer-events:auto;}
.topbar-center a:hover{background:rgba(255,255,255,0.06);}
.mobile-subs{display:none;}
.topbar-right{display:flex;align-items:center;gap:6px;}
.topbar-dots{display:none!important;}
.topbar-dot{width:7px;height:7px;border-radius:50%;transition:all 0.4s;opacity:0.25;transform:scale(0.85);}
.topbar-dot.active{opacity:1;transform:scale(1.4);box-shadow:0 0 6px currentColor;}
.topbar-badge{font-size:1.05rem;font-weight:900;letter-spacing:-0.02em;padding:0;border-radius:100px;transition:opacity 0.5s ease,max-width 0.8s ease;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;}
.topbar-badge.on{max-width:180px;opacity:1;padding:0;}
.topbar-badge.badge-out{opacity:0;}
.tb-icon{background:none;border:none;cursor:pointer;padding:6px;color:rgba(255,255,255,0.9);transition:all 0.2s;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.tb-icon:hover{color:#fff;}
.tb-icon svg{width:18px;height:18px;}
.tb-reviews{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:none;border:none;color:#E6B800;font-size:0.85rem;text-decoration:none;transition:all 0.2s;flex-shrink:0;}
.tb-reviews:hover{color:#FFD700;transform:scale(1.1);}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}}
@media(max-width:768px){.topbar-center{display:none;}.mobile-subs{display:flex;align-items:center;justify-content:center;gap:1px;position:fixed;top:calc(var(--topbar-h) + 8px);left:0;right:0;z-index:198;padding:5px 12px;background:rgba(0,0,0,0.85);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,0.06);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;white-space:nowrap;opacity:0;transition:opacity 1.2s cubic-bezier(0.65,0,0.35,1),transform 1.2s cubic-bezier(0.65,0,0.35,1);pointer-events:none;transform:translateY(-6px);}.mobile-subs.show{opacity:1;pointer-events:auto;transform:translateY(0);}.mobile-subs::-webkit-scrollbar{display:none;}.mobile-subs span{font-size:0.58rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:rgba(255,255,255,0.7);padding:3px 5px;border-radius:100px;flex-shrink:0;}.mobile-subs span.active{color:#fff;background:rgba(255,255,255,0.1);}.mobile-subs .msub-dot{font-size:0.3rem;color:rgba(255,255,255,0.15);padding:0 1px;}.topbar{padding:0 14px;}.topbar-dots .topbar-dot{width:5px;height:5px;}.topbar-dots{padding:0 4px;}}
.pillar-bar{position:fixed;top:calc(var(--topbar-h) - 2px);left:0;right:0;z-index:199;display:flex;gap:5px;padding:2px 16px 6px;background:linear-gradient(180deg,rgba(5,5,5,0.95),rgba(0,0,0,0.85));border-bottom:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.pp{flex:1;height:4px;border-radius:100px;transition:all 1.2s cubic-bezier(0.65,0,0.35,1);cursor:pointer;}
.pp[data-p="saas"]{background:var(--saas);}
.pp[data-p="print"]{background:var(--print);}
.pp[data-p="site"]{background:var(--site);}
.pp[data-p="optima"]{background:var(--optima);}
.pp[data-p="lab"]{background:var(--lab);}
.pp.active{height:6px;}
.tb-bag{display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:rgba(255,255,255,0.9);text-decoration:none;transition:all 0.3s;flex-shrink:0;position:relative;}
.tb-bag-count{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--print);color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;display:none;}
.tb-bag-count.show{display:block;}
.tb-bag:hover{color:#fff;transform:scale(1.15);}
.tb-bag svg{width:26px;height:26px;}
.tb-sparkle{animation:bagSparkle 2.5s ease-in-out infinite;}
.topbar-social{display:flex;align-items:center;gap:20px;}
.topbar-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;transition:opacity 2s ease,transform 0.2s ease;opacity:0;text-decoration:none;background:none;border:none;border-radius:0;}
.topbar-social a.show{opacity:1;}
.topbar-social a:hover{transform:scale(1.3)!important;filter:brightness(1.2);background:none!important;}
.topbar-social svg{width:28px!important;height:28px!important;}
@media(max-width:768px){.topbar-social svg{width:22px!important;height:22px!important;}.topbar-social a{width:36px;height:36px;}.topbar-social{gap:12px;}}
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:299;opacity:0;visibility:hidden;transition:all 0.3s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.menu-overlay.open{opacity:1;visibility:visible;}
.menu-panel{position:fixed;top:0;left:0;bottom:0;width:280px;background:linear-gradient(180deg,rgba(15,15,18,0.98),rgba(5,5,8,0.99));z-index:300;transform:translateX(-100%);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);padding:calc(var(--topbar-h) + 20px) 24px 24px;display:flex;flex-direction:column;gap:6px;border-right:1px solid rgba(255,255,255,0.06);overflow-y:auto;}
.menu-panel.open{transform:translateX(0);}
.menu-section{padding:8px 0;}
.menu-label{font-size:0.55rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:rgba(255,255,255,0.2);margin-bottom:10px;padding:0 12px;}
.menu-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;color:rgba(255,255,255,0.7);text-decoration:none;transition:all 0.2s;cursor:pointer;font-size:0.85rem;font-weight:600;font-family:'Montserrat',sans-serif;}
.menu-item:hover{background:rgba(255,255,255,0.06);color:#fff;}
.menu-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.menu-item svg{width:18px;height:18px;flex-shrink:0;opacity:0.6;}
.menu-cta{display:block;text-align:center;padding:12px 20px;margin:4px 12px;border-radius:100px;background:rgba(255,255,255,0.08);color:#fff;font-size:0.78rem;font-weight:700;font-family:'Montserrat',sans-serif;text-decoration:none;transition:all 0.2s;letter-spacing:0.02em;border:1px solid rgba(255,255,255,0.1);}
.menu-cta:hover{background:rgba(255,255,255,0.14);transform:translateY(-1px);}
.menu-item-row{display:flex;align-items:center;}
.menu-item-row .menu-item{flex:1;}
.menu-expand{background:none;border:none;color:rgba(255,255,255,0.3);font-size:1.4rem;padding:8px 14px;cursor:pointer;transition:all 0.3s;font-family:'Montserrat',sans-serif;line-height:1;}
.menu-expand:hover{color:rgba(255,255,255,0.7);}
.menu-expand.open{transform:rotate(90deg);color:rgba(255,255,255,0.6);}
.menu-products{max-height:0;overflow:hidden;transition:max-height 0.35s cubic-bezier(0.16,1,0.3,1);}
.menu-products.open{max-height:400px;}
.menu-product{padding-left:32px;}
.menu-product-links{display:flex;gap:8px;padding:2px 0 6px 0;}
.menu-product-links a{font-size:0.58rem;font-weight:600;color:rgba(255,255,255,0.25);text-decoration:none;padding:3px 10px;border-radius:100px;border:1px solid rgba(255,255,255,0.08);transition:all 0.2s;font-family:'Montserrat',sans-serif;letter-spacing:0.03em;}
.menu-product-links a:hover{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.15);background:rgba(255,255,255,0.04);}
.product-name{padding-left:0!important;}
.menu-sub{display:block;padding:6px 12px 6px 32px;font-size:0.7rem;font-weight:600;color:rgba(255,255,255,0.6);text-decoration:none;transition:all 0.2s;font-family:'Montserrat',sans-serif;}
.menu-item .pillar-name{display:inline;letter-spacing:0;gap:0;}
.menu-item .pillar-name span{margin:0;padding:0;}
.menu-sub:hover{color:rgba(255,255,255,0.9);}
.menu-socials{display:flex;gap:14px;padding:4px 12px;}
.menu-socials a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:none;transition:all 0.2s;}
.menu-socials a:hover{background:none!important;transform:scale(1.3);filter:brightness(1.2);}
.menu-socials svg{width:18px;height:18px;}
.menu-divider{height:1px;background:rgba(255,255,255,0.06);margin:8px 12px;}
.notranslate{white-space:nowrap!important;}

/* 03.11 T88: wiersze stopki .ft-row 0.45 → 0.48 (4,41 → 4,92:1, próg AA; tak samo w sklepach T90 — przez T87) */
/* --- dopisek generatora: stopka .ft-* 1:1 z żywego index (L621–633) + drobiazgi wspólne dla podstron --- */
@keyframes bagSparkle{0%,100%{opacity:0.5;}50%{opacity:1;}}
.ft-wrap{border-top:1px solid var(--border-dark);padding:22px 24px calc(max(16px,env(safe-area-inset-bottom)) + 12px);display:flex;flex-direction:column;align-items:center;gap:9px;width:100%;flex-shrink:0;margin-top:48px;}
.ft-map{display:grid;grid-template-columns:repeat(5,auto);justify-content:center;gap:18px 44px;margin-bottom:18px;text-align:left;}
.ft-col{display:flex;flex-direction:column;gap:7px;}
.ft-col>a.ft-h{font-size:0.72rem;font-weight:800;letter-spacing:0.08em;text-decoration:none;margin-bottom:3px;}
.ft-col>a.ft-h .g{color:#fff;}
.ft-col>a.ft-l{font-size:0.66rem;font-weight:600;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.2s;}
.ft-col>a.ft-l:hover{color:#fff;}
@media(max-width:640px){.ft-map{grid-template-columns:repeat(3,auto);gap:20px 30px;}}
@media(max-width:380px){.ft-map{grid-template-columns:repeat(2,auto);}}
.ft-row{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 10px;font-size:0.68rem;color:rgba(255,255,255,0.48);}
.ft-row a{color:rgba(255,255,255,0.48);text-decoration:none;transition:color 0.2s;}
.ft-row a:hover{color:#fff;}
.ft-row .d{color:rgba(255,255,255,0.07);}
/* 02.11 Dawid: „w footerze dwa ostatnie filary są z boku, wyśrodkuj je” — telefon: pierwszy rząd OPTIMA · SAAS · SITE jak był, drugi (PRINT · LAB) na środku */
@media(max-width:640px){.ft-map{display:flex;flex-wrap:wrap;justify-content:center;gap:0 30px;margin-bottom:0;}.ft-map::after{content:"";flex-basis:100%;order:1;}.ft-col{margin-bottom:20px;}.ft-col:nth-child(n+4){order:2;}}
.topbar-badge.on{padding:0 .15em 0 0;margin-right:-.15em;}
a.topbar-brand{text-decoration:none;color:inherit;}
a.pp{display:block;}
.mobile-subs a{font-size:0.58rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:rgba(255,255,255,0.7);padding:3px 5px;border-radius:100px;flex-shrink:0;text-decoration:none;}
.mobile-subs a.active{color:#fff;background:rgba(255,255,255,0.1);}
.topbar-center a.active{color:#fff;}
.menu-item[aria-current="page"]{background:rgba(255,255,255,0.06);color:#fff;}
.menu-langs{display:flex;gap:8px;padding:2px 12px;}
.menu-langs a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;padding:0 12px;border-radius:100px;border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-size:0.7rem;font-weight:800;letter-spacing:0.08em;text-decoration:none;transition:color .2s,border-color .2s;}
.menu-langs a[aria-current]{color:#000;background:#fff;border-color:#fff;}
.gx-skip{position:fixed;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:100px;background:#fff;color:#000;font-weight:800;font-size:14px;text-decoration:none;transition:top .2s;}
.gx-skip:focus{top:12px;}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px;}
/* gx-filar.css v2.1 — „5 żywiołów” · Kodzior T80 · OP55-a17d · 2026-10-30 (31.10: PRINT od nowa — znak i rzeczy)
   Wspólne (styl GEK-X): czerń, Montserrat, skala typografii, karty #1D1D1F r16, biała pigułka CTA, odstępy, kreska filaru.
   Każdy filar: własne wejście, rytm i moduł-podpis. Kolor filaru = żywioł, symbolicznie (słowo, kreska, pasek, jeden detal). */

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 40px);}
@media(max-width:768px){html{scroll-padding-top:calc(var(--topbar-h) + 72px);}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body.gxf{min-height:100vh;}
.gxf-wrap{position:relative;display:block;max-width:1180px;margin:0 auto;padding:calc(var(--topbar-h) + 48px) clamp(16px,5vw,40px) 0;outline:none;}
@media(max-width:768px){.gxf-wrap{padding-top:calc(var(--topbar-h) + 64px);}}
.gxf-flow{display:flex;flex-direction:column;gap:clamp(80px,12vh,128px);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- wspólne: wejście ---------- */
.gxf-hero{position:relative;min-width:0;}
.gxf-wm{position:absolute;right:0;top:0;z-index:0;pointer-events:none;font-weight:900;font-size:clamp(110px,22vw,320px);line-height:.8;letter-spacing:.02em;color:rgba(255,255,255,.035);white-space:nowrap;}
.gxf-hero>*:not(.gxf-wm){position:relative;z-index:1;}
.gxf-crumb{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.44);}
.gxf-crumb a{color:inherit;text-decoration:none;transition:color .2s;display:inline-flex;align-items:center;min-height:32px;}
.gxf-crumb a:hover{color:#fff;}
.gxf-crumb [aria-current]{color:rgba(255,255,255,.8);}
.gxf-h1{margin-top:12px;font-weight:900;}
.gxf-h1 .w{display:block;font-size:clamp(46px,9vw,96px);line-height:.94;letter-spacing:.005em;white-space:nowrap;}
.gxf-h1 .w .g{color:#fff;}
.gxf-h1 .w b{font-weight:900;color:var(--acc);}
.gxf-h1 .d{display:block;margin-top:16px;font-size:clamp(16px,1.9vw,21px);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:rgba(255,255,255,.72);max-width:44ch;text-wrap:balance;}
.gxf-hak{margin-top:clamp(32px,5vh,56px);font-size:clamp(28px,4.6vw,58px);font-weight:800;line-height:1.06;letter-spacing:-.03em;max-width:18ch;text-wrap:balance;color:#fff;}
.gxf-lead{margin-top:24px;font-size:clamp(16px,1.7vw,19px);font-weight:500;line-height:1.6;color:rgba(255,255,255,.64);max-width:60ch;text-wrap:pretty;}
.gxf-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
.gxf-ctap{margin-top:12px;font-size:13px;font-weight:600;line-height:1.5;color:rgba(255,255,255,.5);max-width:52ch;}
.gx-cta{display:inline-flex;align-items:center;gap:8px;min-height:48px;background:#fff;color:#000;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-0.01em;padding:15px 30px;border-radius:100px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s;white-space:nowrap;cursor:pointer;border:none;font-family:inherit;}
@media(hover:hover){.gx-cta:hover{transform:translateY(-2px);box-shadow:0 0 0 3px var(--acc);}}
@media(max-width:480px){.gx-cta{white-space:normal;text-align:left;line-height:1.3;}}
/* pierwszy ekran widoczny od 1. klatki; ruch tylko od pozycji (bez znikania) */
@keyframes gxfOd{from{transform:translateY(14px);}to{transform:none;}}
.js .gxf-hero>*:not(.gxf-wm){animation:gxfOd .9s cubic-bezier(.16,1,.3,1) both;}
.js .gxf-hero>*:nth-child(3){animation-delay:.06s;}
.js .gxf-hero>*:nth-child(4){animation-delay:.12s;}
.js .gxf-hero>*:nth-child(5){animation-delay:.18s;}

/* ---------- wspólne: klocki ---------- */
.gxf-sec{position:relative;min-width:0;}
.gxf-k{display:flex;align-items:center;gap:12px;min-height:12px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.gxf-k i{display:block;width:34px;height:2px;border-radius:2px;background:var(--acc);flex:none;transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1) .25s;}
.js .rv:not(.in) .gxf-k i{transform:scaleX(0);}
.gxf-h2{margin-top:16px;font-size:clamp(28px,3.6vw,48px);font-weight:900;line-height:1.06;letter-spacing:-.03em;color:#fff;text-wrap:balance;}
.gxf-h3{font-size:clamp(18px,1.6vw,22px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#fff;text-wrap:balance;}
.gxf-p{font-size:16px;font-weight:500;line-height:1.65;color:rgba(255,255,255,.64);text-wrap:pretty;}
.gxf-big{font-size:clamp(17px,1.8vw,21px);color:rgba(255,255,255,.82);}
.gxf-card{position:relative;background:#1D1D1F;border-radius:16px;padding:clamp(24px,3vw,32px);}
.gxf-more{display:inline-flex;align-items:center;gap:6px;margin-top:4px;min-height:44px;font-size:14px;font-weight:800;color:#fff;text-decoration:none;align-self:flex-start;}
.gxf-more:hover{text-decoration:underline;text-underline-offset:4px;}
.gxf-badge{position:absolute;top:-14px;left:24px;z-index:2;display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:100px;background:#fff;color:#000;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
mark.gx-todo{background:#E6B800;color:#000;font-weight:800;padding:1px 6px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.gxf-wynik{font-size:14px;font-weight:600;line-height:1.55;color:rgba(255,255,255,.82);padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
.gxf-wynik b{display:block;margin-bottom:4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.gxf-ph{width:100%;height:100%;min-height:180px;display:flex;align-items:center;justify-content:center;background:#141416;}
.gxf-ph span{font-size:clamp(64px,9vw,120px);font-weight:900;letter-spacing:-.04em;color:rgba(255,255,255,.16);}

/* odpowiedź · inaczej · skąd */
.gxf-ans-q{font-size:clamp(22px,2.4vw,30px);}
.gxf-ans-t{margin-top:16px;font-size:clamp(16px,1.6vw,18px);font-weight:500;line-height:1.7;color:rgba(255,255,255,.8);max-width:68ch;}
.gxf-quote{margin-top:16px;font-size:clamp(21px,2.4vw,30px);font-weight:700;line-height:1.35;letter-spacing:-.02em;color:rgba(255,255,255,.88);max-width:36ch;text-wrap:pretty;}
.gxf-story{margin-top:24px;font-size:clamp(17px,1.7vw,20px);line-height:1.75;color:rgba(255,255,255,.74);max-width:62ch;}

/* produkt wyróżniony (SAAS: Mr. GEK) */
.gxf-feat-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;}
.gxf-feat-img img{display:block;width:100%;height:auto;border-radius:12px;}
.gxf-feat-haslo{margin-top:12px;font-size:clamp(18px,2vw,24px);font-weight:700;line-height:1.3;color:#fff;}
.gxf-feat-txt .gxf-p{margin-top:12px;}
.gxf-ticks{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px;}
.gxf-ticks li{position:relative;padding-left:20px;font-size:15px;font-weight:600;line-height:1.5;color:rgba(255,255,255,.8);}
.gxf-ticks li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--acc);}
@media(max-width:860px){.gxf-feat-in{grid-template-columns:minmax(0,1fr);}}

/* co robię — kafle w trzech rozmiarach */
.gxf-items{margin-top:32px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
.gxf-item{display:flex;flex-direction:column;gap:12px;overflow:hidden;}
.gxf-num{font-size:48px;font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.16);}
.gxf-item.sz-l{grid-column:span 4;grid-row:span 2;justify-content:flex-end;min-height:360px;}
.gxf-item.sz-l .gxf-num{position:absolute;top:16px;right:24px;font-size:clamp(120px,14vw,190px);line-height:.85;color:rgba(255,255,255,.08);}
.gxf-item.sz-l .gxf-h3{font-size:clamp(24px,2.6vw,34px);}
.gxf-item.sz-l .gxf-p{font-size:17px;max-width:44ch;}
.gxf-item.sz-s,.gxf-item.sz-m2{grid-column:span 2;}
.gxf-item.sz-m{grid-column:span 3;}
.gxf-item.sz-w,.gxf-item.sz-xl{grid-column:span 6;}
@media(max-width:860px){
  .gxf-items{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gxf-item.sz-l,.gxf-item.sz-w,.gxf-item.sz-xl{grid-column:span 2;grid-row:auto;min-height:260px;}
  .gxf-item.sz-s,.gxf-item.sz-m,.gxf-item.sz-m2{grid-column:span 1;}
}
@media(max-width:560px){
  .gxf-items{grid-template-columns:minmax(0,1fr);}
  .gxf-item[class*=sz-]{grid-column:auto;min-height:0;}
  .gxf-item.sz-l{min-height:0;padding-top:104px;}
  .gxf-item.sz-l .gxf-num{font-size:96px;top:20px;right:20px;}
}

/* jak to idzie — domyślnie karty z cyframi wystającymi z karty */
.gxf-steps{list-style:none;margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:56px 16px;}
.gxf-step{position:relative;background:#1D1D1F;border-radius:16px;padding:48px clamp(20px,2.4vw,28px) 24px;}
.gxf-step-n{position:absolute;top:-34px;left:20px;font-size:72px;font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.35);}
.gxf-step .gxf-p{margin-top:8px;}

/* zrobione — karty produktów (SAAS) */
.gxf-cases{margin-top:32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
.gxf-case{background:#1D1D1F;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-width:0;}
.gxf-case-img{display:block;aspect-ratio:16/10;background:#141416;overflow:hidden;}
.gxf-case-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.16,1,.3,1);}
@media(hover:hover){a.gxf-case-img:hover img{transform:scale(1.02);}}
.gxf-case-txt{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;flex:1;}
.gxf-case.sz-xl{grid-column:span 12;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.gxf-case.sz-xl .gxf-case-img{aspect-ratio:auto;height:100%;min-height:340px;}
.gxf-case.sz-xl .gxf-case-img img{object-position:left top;}
.gxf-case.sz-xl .gxf-h3{font-size:clamp(22px,2.4vw,30px);}
.gxf-case.sz-m{grid-column:span 6;}
.gxf-case.sz-s{grid-column:span 4;}
@media(max-width:860px){.gxf-case.sz-xl{grid-template-columns:minmax(0,1fr);}.gxf-case.sz-xl .gxf-case-img{aspect-ratio:16/10;height:auto;min-height:0;}.gxf-case.sz-m,.gxf-case.sz-s{grid-column:span 6;}}
@media(max-width:560px){.gxf-cases{grid-template-columns:minmax(0,1fr);}.gxf-case[class*=sz-]{grid-column:auto;}}

/* RURK · teraz w robocie */
.gxf-rurk-in,.gxf-teraz-in{overflow:hidden;min-height:240px;display:flex;flex-direction:column;gap:16px;}
.gxf-rurk-wm,.gxf-teraz-wm{position:absolute;right:16px;bottom:12px;font-weight:900;line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.07);pointer-events:none;white-space:nowrap;}
.gxf-rurk-wm{font-size:clamp(96px,16vw,220px);}
.gxf-teraz-wm{font-size:clamp(72px,9vw,136px);}
.gxf-rurk-in>*:not(.gxf-rurk-wm),.gxf-teraz-in>*:not(.gxf-teraz-wm){position:relative;}
.gxf-rurk-in .gxf-big{max-width:52ch;}
.gxf-teraz-in .gxf-big{max-width:60ch;font-size:17px;line-height:1.65;}
.gxf-pill-s{align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:100px;border:1px solid rgba(255,255,255,.24);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.gxf-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.gxf-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.05em;color:#F5F5F7;}
.gxf-tag i{display:block;width:10px;height:10px;border-radius:2px;}
.gxf-date{font-size:12px;font-weight:800;letter-spacing:.05em;color:rgba(255,255,255,.6);}

/* cennik */
.gxf-tiers{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px;align-items:stretch;}
.gxf-tiers.n4,.gxf-tiers.n2{grid-template-columns:repeat(2,minmax(0,1fr));}
.gxf-tier{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.1);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;min-width:0;}
.gxf-tier.is-top{background:#1D1D1F;border-color:rgba(255,255,255,.24);}
.gxf-price{font-size:clamp(26px,2.8vw,38px);font-weight:900;line-height:1.05;letter-spacing:-.03em;color:#fff;overflow-wrap:anywhere;}
.gxf-tier.is-top .gxf-price{font-size:clamp(30px,3.4vw,46px);}
@media(max-width:860px){.gxf-tiers,.gxf-tiers.n4,.gxf-tiers.n2{grid-template-columns:minmax(0,1fr);}}

/* pytania — odsłanianie na klik */
.gxf-qs{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:start;}
.gxf-q{background:#1D1D1F;border-radius:16px;min-width:0;}
.gxf-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 24px;font-size:16px;font-weight:700;line-height:1.35;color:#fff;border-radius:16px;}
.gxf-q summary::-webkit-details-marker{display:none;}
.gxf-q summary i{position:relative;flex:none;width:16px;height:16px;}
.gxf-q summary i::before,.gxf-q summary i::after{content:'';position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:2px;background:#fff;transition:transform .2s;}
.gxf-q summary i::after{transform:rotate(90deg);}
.gxf-q[open] summary i::after{transform:rotate(0);}
.gxf-q .gxf-p{padding:0 24px 24px;}
@media(max-width:860px){.gxf-qs{grid-template-columns:minmax(0,1fr);}}

/* most + pozostałe filary z czasownikami */
.gxf-most-t{font-size:clamp(24px,3vw,40px);max-width:28ch;}
.gxf-k2{margin-top:32px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.gxf-pills{margin-top:12px;display:flex;flex-wrap:wrap;gap:12px;}
.gxf-pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;border-radius:100px;border:1px solid rgba(255,255,255,.16);font-size:14px;font-weight:800;letter-spacing:.04em;color:#fff;text-decoration:none;transition:border-color .2s,background .2s;}
.gxf-pill i{display:block;width:8px;height:8px;border-radius:50%;}
.gxf-pill em{font-style:normal;font-weight:600;letter-spacing:0;color:rgba(255,255,255,.55);}
@media(hover:hover){.gxf-pill:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04);}}

/* koniec */
.gxf-end{padding-top:clamp(48px,8vh,80px);border-top:1px solid rgba(255,255,255,.08);}
.gxf-end-t{font-size:clamp(24px,2.8vw,36px);max-width:30ch;}
.gxf-mail{margin-top:16px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);}
.gxf-mail a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.gxf-ft{margin-top:clamp(48px,8vh,80px);}

/* =====================================================================
   G|OPTIMA — odkrywa · cisza, jedno pytanie, puzzle odwracane na klik
   ===================================================================== */
.op-cisza{min-height:calc(100svh - var(--topbar-h) - 96px);display:flex;flex-direction:column;justify-content:center;}
@media(max-width:768px){.op-cisza{min-height:calc(100svh - var(--topbar-h) - 120px);}}
/* 31.10 Dawid: „w kazdym filarze jest inny wymiar nazwy filaru i to zle wyglada” → nazwa filaru wszędzie jak .gxf-h1 .w (46–96 px); bez osobnych rozmiarów w .h1-cichy / .h1-maly / .h1-duzy */
.h1-cichy .d{margin-top:8px;font-size:clamp(12px,1.1vw,14px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);max-width:52ch;}
.hak-cisza{margin-top:clamp(40px,7vh,72px);font-size:clamp(36px,6.4vw,84px);max-width:15ch;}
.op-rule{display:block;margin-top:32px;width:clamp(56px,8vw,96px);height:3px;border-radius:2px;background:var(--acc-t);transform-origin:left;}
.js .op-rule{animation:opRule 1.4s cubic-bezier(.16,1,.3,1) .5s both;}
@keyframes opRule{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.op-linie{position:relative;margin-top:24px;padding-left:28px;}
.op-rail{position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;background:rgba(255,255,255,.08);}
.op-rail i{position:absolute;left:0;top:0;width:2px;height:0;border-radius:2px;background:var(--acc-t);transition:top .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1);}
.op-ls{display:flex;flex-direction:column;gap:14px;font-size:clamp(22px,3vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.02em;}
.op-l{display:block;color:rgba(255,255,255,.3);transition:color .5s;cursor:pointer;}
.op-l .hl{font-weight:800;}
.op-l.on{color:rgba(255,255,255,.9);}
.op-l.on .hl{color:#fff;}
html:not(.js) .op-l{color:rgba(255,255,255,.85);}
.op-dalej{margin-top:56px;}
.gxf-optima .gxf-quote{font-size:clamp(24px,3.2vw,42px);max-width:24ch;color:rgba(255,255,255,.92);}
/* puzzle */
.puz-hint{margin-top:12px;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);}
html:not(.js) .puz-hint{display:none;}
.puz{margin-top:32px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;}
.puz-p{grid-column:span 2;position:relative;perspective:1400px;min-height:280px;}
.puz.n5 .puz-p:nth-child(n+4),.puz.n4 .puz-p:nth-child(n+3){grid-column:span 3;}
.puz-in{position:relative;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.16,1,.3,1);}
.puz-p.on .puz-in{transform:rotateY(180deg);}
.puz-front,.puz-back{position:absolute;inset:0;border-radius:16px;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.puz-front{display:flex;flex-direction:column;justify-content:space-between;width:100%;padding:24px;border:0;background:#2B2D31;color:rgba(255,255,255,.75);text-align:left;font:inherit;cursor:pointer;}
.puz-front::before{content:'';position:absolute;right:-11px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#2B2D31;}
.puz-front::after{content:'';position:absolute;left:-11px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#000;}
.puz-n{font-size:56px;font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.14);}
.puz-t{font-size:clamp(18px,1.6vw,22px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:rgba(255,255,255,.82);}
@media(hover:hover){.puz-front:hover .puz-t{color:#fff;}}
.puz-back{display:flex;flex-direction:column;gap:12px;padding:24px 24px 20px;background:#1D1D1F;transform:rotateY(180deg);overflow:auto;outline:none;}
.puz-back .gxf-h3{padding-right:44px;}
.puz-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:none;color:#fff;font-size:16px;cursor:pointer;}
html:not(.js) .puz-p{perspective:none;min-height:0;}
html:not(.js) .puz-in{transform:none;}
html:not(.js) .puz-front,html:not(.js) .puz-back{position:relative;transform:none;backface-visibility:visible;}
html:not(.js) .puz-x{display:none;}
html:not(.js) .puz-front{border-radius:16px 16px 0 0;}
html:not(.js) .puz-back{border-radius:0 0 16px 16px;}
@media(max-width:860px){.puz{grid-template-columns:repeat(2,minmax(0,1fr));}.puz-p,.puz.n5 .puz-p:nth-child(n+4),.puz.n4 .puz-p:nth-child(n+3){grid-column:span 1;}.puz.n5 .puz-p:last-child{grid-column:span 2;}}
@media(max-width:560px){.puz{grid-template-columns:minmax(0,1fr);gap:16px;}.puz-p,.puz.n5 .puz-p:last-child{grid-column:auto;min-height:220px;}}
/* ścieżka (jak to idzie) */
.jak-sciezka .gxf-steps{display:flex;flex-direction:column;gap:0;margin:40px 0 0 20px;border-left:1px solid rgba(255,255,255,.14);}
.jak-sciezka .gxf-step{background:none;border-radius:0;padding:0 0 40px 48px;}
.jak-sciezka .gxf-step:last-child{padding-bottom:0;}
.jak-sciezka .gxf-step-n{left:-20px;top:-6px;width:40px;height:40px;border-radius:50%;background:#000;border:1px solid rgba(255,255,255,.24);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;}
.jak-sciezka .gxf-step:last-child .gxf-step-n{background:var(--acc-t);border-color:var(--acc-t);color:#000;}
.jak-sciezka .gxf-step .gxf-p{max-width:62ch;}
/* drugie otwarcie: puzzle najpierw */
html[data-otwarcie="2"] .gxf-optima #co-robie{order:-1;}
html[data-otwarcie="2"] .gxf-optima .op-cisza{min-height:0;}

/* =====================================================================
   G|SITE — prowadzi · praca mówi pierwsza: żywe strony w ramkach
   ===================================================================== */
.hero-site{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"glowa" "scena" "txt";gap:40px;}
.st-glowa{grid-area:glowa;}
.st{grid-area:scena;min-width:0;}
.st-txt{grid-area:txt;}
.st-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;}
.st-top .gxf-k{flex:1 0 100%;}
.st-h{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;}
.st-h span{color:rgba(255,255,255,.5);}
.st-tabs{display:flex;gap:8px;flex-wrap:wrap;}
.st-tab{min-height:40px;padding:0 16px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:none;color:rgba(255,255,255,.7);font:700 13px/1 Montserrat,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.st-tab[aria-selected="true"]{background:#fff;color:#000;border-color:#fff;}
@media(hover:hover){.st-tab:hover{border-color:rgba(255,255,255,.4);color:#fff;}.st-tab[aria-selected="true"]:hover{color:#000;}}
.st-p{margin-top:24px;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(24px,3vw,40px);align-items:end;}
.js .st-p{display:none;}
.js .st-p.on{display:grid;}
.st-dev{position:relative;padding-right:clamp(48px,8vw,104px);padding-bottom:clamp(28px,4vw,52px);}
.st-br{border-radius:12px;overflow:hidden;background:#1D1D1F;border:1px solid rgba(255,255,255,.1);}
.st-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.st-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);}
.st-bar span{margin-left:10px;padding:3px 10px;border-radius:100px;background:rgba(255,255,255,.06);font-size:11px;font-weight:600;color:rgba(255,255,255,.6);}
.st-br img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.st-tel{position:absolute;right:0;bottom:0;width:clamp(92px,15vw,196px);aspect-ratio:520/1126;border-radius:clamp(14px,2vw,26px);overflow:hidden;border:clamp(3px,.5vw,6px) solid #2C2C2E;background:#000;}
.st-tel img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.st-info{display:flex;flex-direction:column;gap:12px;padding-bottom:clamp(28px,4vw,52px);}
.st-info .gxf-h3{font-size:clamp(22px,2.2vw,28px);}
@media(max-width:860px){.st-p,.js .st-p.on{grid-template-columns:minmax(0,1fr);}.st-info{padding-bottom:0;}}
.st-txt .gxf-hak{margin-top:0;}
/* drugie otwarcie: najpierw rozmowa (tekst), obok strony */
html[data-otwarcie="2"] .hero-site{grid-template-areas:"glowa" "txt" "scena";}
@media(min-width:861px){
  html[data-otwarcie="2"] .hero-site{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"glowa glowa" "txt scena";align-items:start;}
  html[data-otwarcie="2"] .hero-site .st-p{grid-template-columns:minmax(0,1fr);}
  html[data-otwarcie="2"] .hero-site .gxf-hak{font-size:clamp(28px,3.4vw,46px);}
}

/* =====================================================================
   G|SAAS — automatyzuje · maszyna w ruchu: robota przechodzi na system
   ===================================================================== */
.hero-saas{padding-top:8px;}
.ts{margin:40px 0 0;padding:24px 24px 16px;border-radius:16px;background:#1D1D1F;}
.ts-head{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.ts-head span:last-child{color:var(--acc-t);text-align:right;}
.ts-rows{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:16px;}
.ts-r{position:relative;display:flex;align-items:center;height:44px;}
.ts-tor{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(255,255,255,.06);}
.ts-tor i{position:absolute;inset:0;border-radius:2px;background:var(--acc);transform-origin:left;}
.ts-chip{position:relative;display:inline-flex;align-items:center;gap:8px;height:36px;margin-left:auto;padding:0 16px;border-radius:100px;background:#000;border:1px solid rgba(255,255,255,.16);font-size:14px;font-weight:700;color:#fff;white-space:nowrap;}
.ts-chip i{display:block;width:8px;height:8px;border-radius:50%;background:var(--acc);transition:background .4s;}
.js .ts .ts-chip{margin-left:0;transform:translateX(var(--dx,0px));transition:transform 1.1s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * .32s);}
.js .ts .ts-tor i{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * .32s);}
.js .ts.start .ts-chip{transform:translateX(0);transition:none;}
.js .ts.start .ts-chip i{background:rgba(255,255,255,.3);}
.js .ts.start .ts-tor i{transform:scaleX(0);transition:none;}
.ts-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:13px;font-weight:700;color:rgba(255,255,255,.7);}
.ts-znow{min-height:40px;padding:0 16px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:none;color:#fff;font:700 13px Montserrat,system-ui,sans-serif;cursor:pointer;}
html:not(.js) .ts-znow{display:none;}
@media(max-width:560px){.ts{padding:16px 16px 12px;}.ts-chip{font-size:13px;padding:0 12px;}}
html[data-otwarcie="2"] .gxf-saas #mr-gek{order:-1;}

/* =====================================================================
   G|PRINT — materializuje · najpierw znak (logo), potem rzeczy, na których żyje
   (31.10: Dawid — „print robi loga, koszulki, grafiki, wizerunek”; bez GEKVISION i bez płótna)
   ===================================================================== */
.hero-print{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"glowa zn" "txt zn";column-gap:clamp(32px,5vw,80px);align-items:start;padding-top:8px;}
.pr-glowa{grid-area:glowa;}
.pr-txt{grid-area:txt;}
.hak-forma{font-size:clamp(28px,4vw,52px);}
/* otwarcie 1: znak rysuje się na czerni i ląduje kolejno na rzeczach */
.zn{grid-area:zn;align-self:center;margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;}
.zn-scena{position:relative;width:100%;max-width:480px;aspect-ratio:1/1;}
.zn-o{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1);}
.zn-o.on{opacity:1;}
.zo-f{fill:#141416;stroke:rgba(255,255,255,.5);stroke-width:3;stroke-linejoin:round;}
.zo-l{fill:none;stroke:rgba(255,255,255,.5);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.zo-s{stroke:rgba(255,255,255,.22);}
.zo-r{stroke-width:7;}
.zo-w{stroke:rgba(255,255,255,.4);stroke-width:5;}
.zo-g{stroke:rgba(255,255,255,.12);stroke-width:8;}
.zo-h{fill:rgba(255,255,255,.32);}
.zo-c{fill:#1D1D1F;stroke:rgba(255,255,255,.62);stroke-width:2.5;}
.zo-o{fill:#000;stroke:rgba(255,255,255,.5);stroke-width:3;}
.zo-st{fill:#000;stroke:#F5F5F7;stroke-width:5;}
.zn-znak{position:absolute;left:30%;top:30%;width:40%;height:40%;transform-origin:50% 50%;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.zn-m{display:block;width:100%;height:100%;overflow:visible;}
.zn-ring{fill:none;stroke:#F5F5F7;stroke-width:18;}
.zn-dot{fill:var(--acc);transform-box:fill-box;transform-origin:center;}
@keyframes znRys{from{stroke-dashoffset:100;}to{stroke-dashoffset:0;}}
@keyframes znKropka{from{transform:scale(0);}to{transform:none;}}
/* znak rysuje się, gdy scena jest na ekranie (JS dodaje .rys); bez JS — gotowy od razu */
.js .zn .zn-ring{stroke-dasharray:100;stroke-dashoffset:100;}
.js .zn .zn-dot{transform:scale(0);}
.js .zn.rys .zn-ring{stroke-dashoffset:0;animation:znRys 1.1s cubic-bezier(.65,0,.35,1) .1s both;}
.js .zn.rys .zn-dot{transform:none;animation:znKropka .5s cubic-bezier(.16,1,.3,1) 1.05s both;}
.zn-cap{min-height:3.2em;max-width:44ch;text-align:center;font-size:15px;font-weight:600;line-height:1.5;color:rgba(255,255,255,.72);text-wrap:balance;}
.zn-cap b{display:block;margin-bottom:4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.zn-ster{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.zn-b{min-height:40px;padding:0 14px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:none;color:#fff;font:700 13px Montserrat,system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s;}
.zn-b[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff;}
html:not(.js) .zn-ster{display:none;}
/* otwarcie 2: „Co zostaje po rozmowie…” — słowa gasną, zostają rzeczy z logo */
.pq{grid-area:pq;display:none;}
.pq-q{margin-top:clamp(40px,6vh,64px);font-size:clamp(34px,6vw,80px);font-weight:900;line-height:1.02;letter-spacing:-.035em;color:#fff;max-width:15ch;text-wrap:balance;}
.pq-s1{margin-top:32px;font-size:clamp(18px,2vw,24px);font-weight:700;line-height:1.4;letter-spacing:-.01em;color:#fff;max-width:40ch;}
.pq-w{transition:color .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * .12s + .3s);}
.pq.gas .pq-w{color:rgba(255,255,255,.5);}
.pq-rz{list-style:none;margin-top:32px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:16px;}
.pq-r{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:16px 16px 20px;border-radius:16px;background:#1D1D1F;}
.pq-r.sz-l{grid-row:span 2;}
.pq-r.sz-w{grid-column:span 2;}
.pq-o{display:block;width:100%;max-width:260px;height:auto;margin:0 auto;}
.pq-r.sz-l .pq-o{max-width:420px;margin:0 auto;}
.pq-r.sz-w .pq-o{max-width:220px;}
.pq-r .zo-f{fill:#141416;}
.pq-tag{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.zo-m{transform-box:fill-box;transform-origin:center;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * .15s + 1.1s);}
.js .pq:not(.gas) .zo-m{opacity:0;transform:scale(1.3);}
.pq-s2{margin-top:32px;font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.45;letter-spacing:-.01em;color:rgba(255,255,255,.64);max-width:40ch;}
.pq-s2 b{font-weight:800;color:#fff;}
.pq-znow{margin-top:16px;min-height:40px;padding:0 16px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:none;color:#fff;font:700 13px Montserrat,system-ui,sans-serif;cursor:pointer;}
html:not(.js) .pq-znow{display:none;}
html[data-otwarcie="2"] .hero-print{grid-template-columns:minmax(0,1fr);grid-template-areas:"glowa" "pq" "txt";}
html[data-otwarcie="2"] .hero-print .zn,html[data-otwarcie="2"] .hero-print .hak-forma{display:none;}
html[data-otwarcie="2"] .hero-print .pq{display:block;}
@media(max-width:860px){
  .hero-print{grid-template-columns:minmax(0,1fr);grid-template-areas:"glowa" "zn" "txt";}
  .zn{margin-top:40px;}
  .zn-scena{max-width:min(100%,400px);}
}
@media(max-width:560px){
  .pq-rz{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
  .pq-r{padding:12px 12px 16px;}
  .pq-r.sz-l{grid-column:span 2;grid-row:auto;}
  .pq-r.sz-l .pq-o{max-width:280px;}
  .pq-r.sz-w .pq-o{max-width:200px;}
}
@media(prefers-reduced-motion:reduce){
  .js .zn .zn-ring,.js .zn .zn-dot{animation:none!important;stroke-dashoffset:0!important;transform:none!important;}
  .zn-znak,.zn-o,.pq-w,.zo-m{transition:none!important;}
}
/* zrobione = rzeczy: duży kadr i tekst na zmianę */
.rz{margin-top:40px;display:flex;flex-direction:column;gap:clamp(56px,9vh,104px);}
.rz-r{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;}
.rz-r:nth-child(even) .rz-img{order:2;}
.rz-img{border-radius:16px;overflow:hidden;background:#141416;}
.rz-img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;}
.rz-t{position:relative;display:flex;flex-direction:column;gap:12px;}
.rz-n{font-size:clamp(72px,9vw,120px);font-weight:900;line-height:.8;letter-spacing:-.04em;color:rgba(255,255,255,.1);}
@media(max-width:860px){.rz-r{grid-template-columns:minmax(0,1fr);}.rz-r:nth-child(even) .rz-img{order:0;}.rz-n{font-size:64px;}}
/* co robię = półka produktów z wejściem do konfiguratora */
.pk{list-style:none;margin-top:24px;border-top:1px solid rgba(255,255,255,.1);}
.pk-r{display:grid;grid-template-columns:72px minmax(0,1fr) 56px;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.1);}
.pk-n{font-size:40px;font-weight:900;line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.18);}
.pk-t .gxf-p{margin-top:6px;max-width:64ch;}
.pk-go{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;color:#000;font-size:20px;font-weight:800;text-decoration:none;transition:transform .2s;}
@media(hover:hover){.pk-go:hover{transform:translateX(4px);}}
@media(max-width:560px){.pk-r{grid-template-columns:36px minmax(0,1fr) 48px;gap:12px;}.pk-n{font-size:26px;}.pk-go{width:48px;height:48px;}}




.kino{margin:0;}
.kino-ekran{position:relative;height:min(82svh,56.25vw);min-height:360px;overflow:hidden;background:#000;}
.kino-ekran img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.kino-pas{position:absolute;left:0;right:0;height:13%;background:#000;transition:transform 1.6s cubic-bezier(.16,1,.3,1) .2s;}
.kino-pas.g{top:0;transform-origin:top;}
.kino-pas.d{bottom:0;transform-origin:bottom;}
.js .kino:not(.on) .kino-pas{transform:scaleY(0);}
.kino-napis{position:absolute;left:50%;bottom:2.4%;z-index:2;width:min(92%,900px);margin:0;transform:translateX(-50%);text-align:center;font-size:clamp(17px,2.1vw,28px);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#E6B800;max-width:none;text-wrap:balance;}

.kino-cap{display:flex;justify-content:flex-end;padding:10px clamp(16px,5vw,40px) 0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);}
.kino-txt{margin-top:32px;}
@media(max-width:860px){.kino-ekran{height:auto;aspect-ratio:4/5;min-height:0;}.kino-pas{height:20%;}.kino-napis{font-size:17px;bottom:3%;}}
@media(prefers-reduced-motion:reduce){.kino-pas{transition:none;}}
/* zrobione = taśma kadrów */
.tm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.tm-ster{display:flex;gap:8px;}
.tm-b{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:none;color:#fff;font-size:18px;cursor:pointer;}
html:not(.js) .tm-ster{display:none;}
.tm{list-style:none;margin-top:32px;display:grid;grid-auto-flow:column;grid-auto-columns:min(82%,560px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;}
.tm-k{scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;min-width:0;}
.tm-img{border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#141416;}
.tm-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
/* jak to idzie = storyboard */
.jak-storyboard .gxf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;margin-top:32px;}
.jak-storyboard .gxf-step{background:none;border-radius:0;padding:0;}
.jak-storyboard .gxf-step-n{position:static;display:flex;align-items:flex-end;aspect-ratio:16/9;margin-bottom:16px;padding:12px 14px;border-radius:12px;background:#141416;border:1px solid rgba(255,255,255,.08);font-size:clamp(26px,2.6vw,36px);color:rgba(255,255,255,.32);}
@media(max-width:860px){.jak-storyboard .gxf-steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){.jak-storyboard .gxf-steps{grid-template-columns:minmax(0,1fr);}}

/* ---------- wjazdy poniżej pierwszego ekranu (tylko z JS; bez JS wszystko widać) ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.js .rv.in{opacity:1;transform:none;}
.js .rv .rv-i{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(min(var(--i,0),5) * .1s + .1s);}
.js .rv.in .rv-i{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .rv .rv-i{opacity:1!important;transform:none!important;transition:none!important;}
  .js .gxf-hero>*,.js .op-rule{animation:none!important;}
  .puz-in,.ts-chip,.ts-tor i{transition:none!important;}
}

/* ---------- panel podglądu (tylko szkic/localhost — wstawia go JS) ---------- */
#gxPodglad{position:fixed;left:12px;bottom:12px;z-index:9999;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:rgba(20,20,22,.94);border:1px solid #2C2C2E;font:600 12px/1.3 Montserrat,system-ui,sans-serif;color:#F5F5F7;max-width:calc(100vw - 24px);}
#gxPodglad b{font-weight:800;color:#A1A1A6;letter-spacing:.06em;text-transform:uppercase;font-size:10px;}
#gxPodglad .r{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
#gxPodglad a{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid #3A3A3C;color:#F5F5F7;text-decoration:none;}
#gxPodglad a.on{background:#fff;color:#000;border-color:#fff;}
#gxPodglad button{background:none;border:0;color:#A1A1A6;font:inherit;cursor:pointer;padding:0 4px;min-height:30px;}
#gxPodglad.zw .r:not(:first-child){display:none;}
#gxPodglad .tg{color:#F5F5F7;font-weight:800;}



html[data-nowy],html[data-nowy] body{overflow-x:clip;}
html[data-nowy] .gxf-wrap,html[data-nowy] .gxf-ft{position:relative;z-index:1;}
html[data-nowy] .gxf-flow{gap:clamp(96px,14vh,160px);}

/* ---------- tło pod treścią (stałe, nie przewija się, nie łapie kliknięć) ---------- */
.w-tlo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.w-tlo i{position:absolute;display:block;opacity:0;}
/* wygląd 1: linie kolumn strony jak w projekcie (12 na PC, 4 na telefonie), wygaszone u góry i u dołu */
.w-siatka{top:0;bottom:0;left:50%;width:min(100%,1180px);transform:translateX(-50%);padding:0 clamp(16px,5vw,40px);
  background-origin:content-box;background-clip:content-box;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px calc(100% / 12)),linear-gradient(270deg,rgba(255,255,255,.055) 0 1px,transparent 1px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);}
@media(max-width:860px){.w-siatka{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px calc(100% / 4)),linear-gradient(270deg,rgba(255,255,255,.06) 0 1px,transparent 1px);}}
html[data-wyglad="1"] .w-siatka{opacity:1;}
/* ziarno we wszystkich wariantach: czerń przestaje być płaska */
.w-ziarno{inset:-50%;opacity:1!important;background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* wygląd 2: prawdziwe strony z realizacji jako faktura za slajdami (szarość + rozmycie: kształt strony, nie jej słowa) */
.w-foto{display:none;}
html[data-wyglad="2"] .w-foto{display:block;position:absolute;z-index:-1;top:-6%;bottom:-6%;width:min(78vw,1100px);pointer-events:none;
  background:var(--img) center top/cover no-repeat;opacity:.3;filter:grayscale(1) blur(6px) contrast(1.2);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 25%,transparent 72%);}
html[data-wyglad="2"] .w-jak .w-foto{left:-8vw;opacity:.16;}
html[data-wyglad="2"] .w-teraz .w-foto{right:-6vw;}
html[data-wyglad="2"] .w-pyt .w-foto{right:-10vw;}
html[data-wyglad="2"] .w-end .w-foto{left:50%;transform:translateX(-50%);}
.w-sec{isolation:isolate;}
.w-wm,.w-akcje{display:none;}

/* ---------- wspólne kawałki ---------- */
.w-glowa{margin-bottom:clamp(40px,6vw,72px);}
.w-glowa .gxf-h2{font-size:clamp(36px,5.4vw,72px);letter-spacing:-.04em;}
.w-badge{display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:100px;background:#fff;color:#000;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.w-hair{border-top:1px solid rgba(255,255,255,.1);}

/* ---------- 1 · rozmowa bez Ciebie: zdanie + trzy telefony z prawdziwymi stronami ---------- */
.w-mowi{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;min-height:clamp(520px,72vh,760px);}
.w-mowi-q{margin-top:24px;font-size:clamp(26px,3.3vw,46px);font-weight:800;line-height:1.14;letter-spacing:-.03em;color:#fff;text-wrap:pretty;}
.w-mowi-q .w-ciche{color:rgba(255,255,255,.38);font-weight:800;}
.w-mowi-q b{font-weight:800;color:#fff;}
.w-telefony{display:flex;gap:clamp(12px,1.4vw,20px);align-items:center;width:max-content;}
.w-tel{flex:none;width:clamp(136px,12.5vw,196px);}
.w-tel:nth-child(1){transform:translateY(-36px);}
.w-tel:nth-child(2){transform:translateY(40px);}
.w-tel:nth-child(3){transform:translateY(-8px);}
.w-tel-ekran{position:relative;aspect-ratio:390/844;border-radius:24px;overflow:hidden;background:#0B0B0C;border:1px solid rgba(255,255,255,.16);padding:5px;}
.w-tel-ekran img{display:block;width:100%;height:auto;border-radius:19px;}
@keyframes wPrzewin{to{transform:translateY(-47%);}}
.js .w-tel-ekran img{animation:wPrzewin var(--d,44s) cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused;}
.js .w-mowi.gra .w-tel-ekran img{animation-play-state:running;}
.w-tel-pod{display:block;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.44);}
@media(max-width:860px){.w-mowi{grid-template-columns:minmax(0,1fr);min-height:0;gap:48px;}.w-telefony{width:100%;max-width:520px;gap:12px;}.w-tel{width:auto;flex:1 1 0;min-width:0;}.w-tel-ekran{border-radius:18px;padding:4px;}.w-tel-ekran img{border-radius:14px;}.w-tel-pod{font-size:9px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.w-tel:nth-child(1){transform:none;}.w-tel:nth-child(2){transform:translateY(32px);}.w-tel:nth-child(3){transform:translateY(8px);}}

/* ---------- 2 · co robię: spis w trzech rozmiarach, wielkie numery wystają ---------- */
.w-spis{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid rgba(255,255,255,.12);}
.w-r{position:relative;min-width:0;border-bottom:1px solid rgba(255,255,255,.12);padding:clamp(28px,3.4vw,44px) 0;}
.w-n{display:block;font-weight:900;line-height:.78;letter-spacing:-.05em;color:rgba(255,255,255,.13);font-variant-numeric:tabular-nums;}
.w-r-h{font-weight:800;line-height:1.08;letter-spacing:-.03em;color:#fff;text-wrap:balance;}
.w-r .gxf-p{margin-top:12px;max-width:52ch;}
/* L: pierwszy rząd, cała szerokość — numer jak plakat, obraz prawdziwej strony wychodzi poza kolumnę */
.w-r-l{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:end;padding-top:clamp(32px,4vw,56px);}
.w-r-l .w-n{position:absolute;left:-.04em;top:clamp(12px,2vw,28px);font-size:clamp(120px,17vw,248px);color:rgba(255,255,255,.1);}
.w-r-l .w-r-t{position:relative;padding-top:clamp(96px,12vw,176px);}
.w-r-l .w-r-h{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.04em;}
.w-r-l .gxf-p{font-size:clamp(16px,1.5vw,18px);}
.w-r-img{margin-right:calc(-1 * clamp(16px,5vw,40px));}
.w-okno{position:relative;border-radius:14px 0 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-right:0;border-bottom:0;background:#0B0B0C;height:clamp(300px,34vw,480px);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);}
.w-okno-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);}
.w-okno-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18);}
.w-okno-bar span{margin-left:10px;font-size:11px;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.02em;}
.w-okno img{display:block;width:100%;height:auto;}
.js .w-co .w-okno img{transform:translateY(6%);transition:transform 1.6s cubic-bezier(.16,1,.3,1) .3s;}
.js .w-co.in .w-okno img{transform:none;}
/* M: dwa średnie obok siebie */
.w-r-m{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start;}
.w-r-m:nth-child(3){padding-left:clamp(20px,3vw,40px);border-left:1px solid rgba(255,255,255,.12);}
.w-r-m:nth-child(2){padding-right:clamp(20px,3vw,40px);}
.w-r-m .w-n{font-size:clamp(64px,7.4vw,108px);}
.w-r-m .w-r-h{font-size:clamp(24px,2.5vw,34px);}
/* S: reszta jako zwarte wiersze na całą szerokość */
.w-r-s{grid-column:1/-1;display:grid;grid-template-columns:clamp(64px,9vw,128px) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:baseline;padding:clamp(20px,2.4vw,28px) 0;}
.w-r-s .w-n{font-size:clamp(36px,4vw,56px);color:rgba(255,255,255,.18);}
.w-r-s .w-r-t{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px clamp(24px,4vw,56px);align-items:baseline;}
.w-r-s .w-r-h{font-size:clamp(19px,1.7vw,24px);}
.w-r-s .gxf-p{margin-top:0;}
.w-r-s .gxf-more{grid-column:2;}
@media(max-width:860px){
  .w-spis{grid-template-columns:minmax(0,1fr);}
  .w-r-l{grid-template-columns:minmax(0,1fr);}
  .w-r-img{margin-right:calc(-1 * clamp(16px,5vw,40px));}
  .w-okno{height:clamp(240px,64vw,380px);}
  .w-r-m:nth-child(2),.w-r-m:nth-child(3){padding-left:0;padding-right:0;border-left:0;}
  .w-r-s{grid-template-columns:clamp(48px,14vw,72px) minmax(0,1fr);}
  .w-r-s .w-r-t{grid-template-columns:minmax(0,1fr);}
  .w-r-s .gxf-more{grid-column:auto;}
}

/* ---------- 3 · jak to idzie: tor w kolorze filaru, cyfry siedzą na linii ---------- */
.w-jak{position:relative;}
.w-tor{list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);padding-top:clamp(104px,12vw,168px);}
.w-tor.n3{grid-template-columns:repeat(3,minmax(0,1fr));}
.w-tor.n5{grid-template-columns:repeat(5,minmax(0,1fr));}
.w-tor::before{content:"";position:absolute;left:0;right:0;top:clamp(104px,12vw,168px);height:2px;background:var(--acc);transform-origin:left;}
.js .w-jak .w-tor::before{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1) .25s;}
.js .w-jak.in .w-tor::before{transform:none;}
.w-tor::after{content:"";position:absolute;left:0;right:0;top:clamp(104px,12vw,168px);height:2px;background:rgba(255,255,255,.1);z-index:-1;}
.w-k{position:relative;padding-top:36px;min-width:0;}
.w-k-n{position:absolute;left:-.05em;bottom:calc(100% - .12em);font-size:clamp(104px,12vw,176px);font-weight:900;line-height:.74;letter-spacing:-.06em;color:rgba(255,255,255,.12);}
.w-k-pkt{position:absolute;left:0;top:-7px;width:16px;height:16px;border-radius:50%;background:#000;border:2px solid var(--acc);}
.w-k-h{font-size:clamp(19px,1.7vw,23px);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:#fff;}
.w-k .gxf-p{margin-top:12px;font-size:15px;}
@media(max-width:860px){
  .w-tor,.w-tor.n3,.w-tor.n5{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:0;padding-left:40px;}
  .w-tor::before,.w-tor::after{left:7px;right:auto;top:8px;bottom:0;width:2px;height:auto;}
  .js .w-jak .w-tor::before{transform:scaleY(0);transform-origin:top;}
  .w-k{padding-top:0;}
  .w-k-pkt{left:-40px;top:2px;}
  .w-k-n{position:static;display:block;margin-bottom:8px;font-size:72px;line-height:.8;}
}

/* ---------- 4 · teraz w robocie: pas na całą szerokość, wielka data ---------- */
.w-teraz{margin-inline:calc(50% - 50vw);padding:clamp(64px,8vw,112px) max(clamp(16px,5vw,40px),calc(50vw - 590px + clamp(16px,5vw,40px)));
  border-block:1px solid rgba(255,255,255,.1);position:relative;overflow:clip;}
.w-teraz-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;}
.w-data{font-size:clamp(96px,12.5vw,200px);font-weight:900;line-height:.78;letter-spacing:-.06em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;}
.w-teraz-t .gxf-meta{margin-top:16px;}
.w-teraz-p{margin-top:16px;font-size:clamp(17px,1.6vw,20px);font-weight:500;line-height:1.6;color:rgba(255,255,255,.78);max-width:58ch;text-wrap:pretty;}
@media(max-width:860px){.w-teraz-in{grid-template-columns:minmax(0,1fr);}.w-data{font-size:clamp(88px,26vw,136px);}}

/* ---------- 5 · krótka odpowiedź: pytanie wielkie, odpowiedź obok ---------- */
.w-odp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start;padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.12);}
.w-odp-q{font-size:clamp(32px,4.2vw,58px);letter-spacing:-.04em;}
.w-odp-t{font-size:clamp(17px,1.7vw,21px);font-weight:500;line-height:1.62;color:rgba(255,255,255,.6);max-width:60ch;text-wrap:pretty;}
.w-odp-t b{font-weight:700;color:#fff;}
/* 02.11 Dawid: nazwa filaru w „Czym zajmuje się” jak w znaku — G| białe, nazwa w kolorze filaru */
.w-gn{white-space:nowrap;}
.w-gn .g{color:#fff;}
@media(max-width:860px){.w-odp{grid-template-columns:minmax(0,1fr);}}

/* ---------- 6 · cennik: jedna wielka cena, reszta spisem ---------- */
.w-ceny{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;}
.w-cena-hero{position:relative;background:#1D1D1F;border-radius:16px;padding:clamp(28px,4vw,48px);overflow:hidden;}
.w-cena-n{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.w-cena-d{margin:20px 0 20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;}
.w-cena-d b{font-size:clamp(60px,9vw,132px);font-weight:900;line-height:.86;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;}
.w-cena-d span{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-t,var(--acc));}
.w-cena-hero .gxf-p{max-width:56ch;}
.w-cena-lista{list-style:none;border-top:1px solid rgba(255,255,255,.12);}
.w-cena-r{position:relative;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.12);}
.w-cena-r .w-badge{position:absolute;top:22px;right:0;}
.w-cena-r .w-cena-n{padding-right:96px;}
.w-cena-m{margin-top:8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;}
.w-cena-m b{font-size:clamp(24px,2.4vw,32px);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;}
.w-cena-m span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.w-cena-r .gxf-p{margin-top:8px;font-size:14px;line-height:1.6;}
@media(max-width:860px){.w-ceny{grid-template-columns:minmax(0,1fr);}}

/* ---------- 7 · pytania: nagłówek i przycisk przyklejone, lista z kreskami ---------- */
.w-pyt{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);}
.w-pyt-l{min-width:0;}
.w-lepki{position:sticky;top:calc(var(--topbar-h,64px) + 40px);}
.w-lepki .gxf-h2{font-size:clamp(36px,5.4vw,72px);letter-spacing:-.04em;}
.w-qs{border-top:1px solid rgba(255,255,255,.12);min-width:0;}
.w-q{border-bottom:1px solid rgba(255,255,255,.12);}
.w-q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:20px 0;cursor:pointer;font-size:clamp(18px,1.7vw,22px);font-weight:700;line-height:1.3;letter-spacing:-.015em;color:#fff;}
.w-q summary::-webkit-details-marker{display:none;}
.w-q summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.24);transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s;}
.w-q summary i::before,.w-q summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;background:#fff;border-radius:2px;}
.w-q summary i::after{transform:rotate(90deg);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.w-q[open] summary i{background:#fff;border-color:#fff;}
.w-q[open] summary i::before{background:#000;}
.w-q[open] summary i::after{transform:rotate(0);background:#000;}
@media(hover:hover){.w-q summary:hover i{border-color:#fff;}}
.w-q .gxf-p{padding:0 56px 28px 0;max-width:64ch;}
@media(max-width:860px){.w-pyt{grid-template-columns:minmax(0,1fr);}.w-lepki{position:static;}.w-q .gxf-p{padding-right:0;}}

/* ---------- 8 · skąd: wąska kolumna z etykietą, pierwsze zdanie wielkie ---------- */
.w-skad{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:16px clamp(24px,5vw,72px);align-items:start;}
.w-skad>.gxf-k{grid-column:1;grid-row:1;}
.w-skad-h{grid-column:1;grid-row:2;margin-top:0;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;}
.w-skad-1{grid-column:2;grid-row:1/span 2;font-size:clamp(26px,3.4vw,46px);font-weight:800;line-height:1.14;letter-spacing:-.03em;color:#fff;text-wrap:pretty;}
.w-skad-r{grid-column:2;max-width:62ch;font-size:clamp(16px,1.5vw,18px);}
@media(max-width:860px){.w-skad{grid-template-columns:minmax(0,1fr);}.w-skad>*{grid-column:1!important;grid-row:auto!important;}}

/* ---------- 9 · most: indeks pozostałych filarów ---------- */
.w-most-t{font-size:clamp(24px,3vw,40px);max-width:30ch;}
.w-most-k{margin-top:40px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.w-fils{list-style:none;margin-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.w-fil{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:16px clamp(16px,2.4vw,32px);min-height:56px;padding:clamp(14px,1.8vw,22px) 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;}
.w-fil i{width:14px;height:14px;border-radius:4px;background:var(--k);transition:transform .2s;}
.w-fil span{font-size:clamp(34px,5.6vw,80px);font-weight:900;line-height:1;letter-spacing:-.04em;}
.w-fil em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.w-fil b{font-size:clamp(20px,2vw,28px);font-weight:700;transition:transform .2s;}
@media(hover:hover){.w-fil:hover b{transform:translateX(6px);}.w-fil:hover i{transform:scale(1.25);}.w-fil:hover em{color:#fff;}}
@media(max-width:560px){.w-fil{grid-template-columns:auto minmax(0,1fr) auto;}.w-fil em{grid-column:2;grid-row:2;margin-top:-8px;}.w-fil b{grid-column:3;grid-row:1/span 2;}}

/* ---------- 10 · kontakt: jedno wielkie zdanie ---------- */
.w-end{position:relative;display:flex;align-items:center;min-height:clamp(420px,62vh,640px);padding-block:clamp(48px,8vh,96px);border-top:1px solid rgba(255,255,255,.12);}
.w-end-in{position:relative;}
/* znak filaru na dole strony, ucięty krawędzią sekcji (przełamanie skalą, nie dekoracja: podpis filaru) */
.w-end{overflow:clip;padding-bottom:clamp(96px,22vw,320px);}
/* cały znak, bez cięcia (DNA: „połowa cyfry = gówno”) */
.w-znak{position:absolute;left:-.04em;bottom:clamp(8px,2vw,24px);z-index:-1;font-size:min(21vw,300px);font-weight:900;line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.06);white-space:nowrap;pointer-events:none;}
.w-znak b{font-weight:900;color:color-mix(in oklch,var(--acc) 22%,transparent);}
.w-end-t{font-size:clamp(36px,6vw,88px);letter-spacing:-.045em;line-height:1.02;max-width:15ch;}
.w-end-dlugi .w-end-t{font-size:clamp(28px,3.6vw,52px);line-height:1.08;letter-spacing:-.035em;max-width:28ch;}

/* ---------- wjazdy: sekcje v3 korzystają z .rv/.rv-i z gx-filar.css (0,7–0,8 s ease-out, co 0,1 s) ---------- */
@media(prefers-reduced-motion:reduce){
  .w-tel-ekran img{animation:none!important;}
  .js .w-jak .w-tor::before,.js .w-co .w-okno img{transform:none!important;transition:none!important;}
}

/* ---------- pięć pasków filarów (sygnatura Dizajniora, most do innych filarów) ---------- */
.w-bary{display:flex;gap:10px;margin-bottom:clamp(28px,4vh,48px);}
.w-bary i{display:block;width:clamp(30px,4vw,46px);height:5px;border-radius:3px;transform-origin:left;}
.js .w-most .w-bary i{transform:scaleX(0);transition:transform .9s cubic-bezier(.16,1,.3,1);}
.js .w-most.in .w-bary i{transform:none;}
.w-most.in .w-bary i:nth-child(2){transition-delay:.14s;}
.w-most.in .w-bary i:nth-child(3){transition-delay:.28s;}
.w-most.in .w-bary i:nth-child(4){transition-delay:.42s;}
.w-most.in .w-bary i:nth-child(5){transition-delay:.56s;}

/* ---------- „+ Odkryj” (jak u Dizajniora) ---------- */
.w-odkryj{display:inline-flex;align-items:center;gap:9px;min-height:44px;background:transparent;cursor:pointer;border:1px solid rgba(255,255,255,.2);border-radius:100px;
  padding:11px 18px 11px 13px;font:inherit;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .3s,border-color .3s;}
.w-plus-k{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;border:1px solid currentColor;font-size:14px;line-height:1;font-weight:600;letter-spacing:0;}
@media(hover:hover){.w-odkryj:hover{color:#fff;border-color:rgba(255,255,255,.4);}}
.w-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:#fff;font-weight:700;font-size:15px;letter-spacing:-.01em;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);}
@media(hover:hover){.w-link:hover{border-bottom-color:#fff;}}

/* ---------- okienko szczegółów ---------- */
.w-pop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);opacity:0;pointer-events:none;transition:opacity .35s ease;}
.w-pop.open{opacity:1;pointer-events:auto;}
.w-pop-zas{position:absolute;inset:0;background:rgba(0,0,0,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
.w-pop-k{position:relative;z-index:1;width:100%;max-width:680px;max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 4px 24px;transform:translateY(18px) scale(.98);transition:transform .5s cubic-bezier(.16,1,.3,1);}
.w-pop.open .w-pop-k{transform:none;}
.w-pop-x{position:absolute;top:0;right:0;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:#000;color:#fff;font:inherit;font-size:18px;cursor:pointer;}
.w-pop-w{padding-right:56px;font-weight:900;font-size:clamp(26px,6vw,44px);letter-spacing:-.02em;line-height:1;}
.w-pop-w b{color:var(--acc-t,var(--acc));font-weight:900;}
.w-pop-l{margin-top:16px;display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.w-pop-l i{display:block;width:30px;height:2px;border-radius:2px;background:var(--acc);}
.w-pop-tr{margin-top:20px;}
.w-pop .gxf-actions{margin-top:28px;}
/* zawartość w okienku: zwarta lista z kreskami (bez wielkich numerów i obrazów) */
.w-pop .w-spis,.w-pop .w-tor,.w-pop .w-ceny{display:block;border:0;padding:0;}
.w-pop .w-r,.w-pop .w-k,.w-pop .w-cena-hero,.w-pop .w-cena-r{display:block;position:relative;padding:20px 0;border:0;border-top:1px solid rgba(255,255,255,.1);background:none;border-radius:0;}
.w-pop .w-r:first-child,.w-pop .w-k:first-child,.w-pop .w-cena-hero{border-top:0;}
.w-pop .w-n,.w-pop .w-r-img,.w-pop .w-k-pkt,.w-pop .w-tor::before,.w-pop .w-tor::after{display:none;}
.w-pop .w-r-t{display:block;padding:0;}
.w-pop .w-r-h,.w-pop .w-k-h{font-size:clamp(17px,4vw,20px);font-weight:800;}
.w-pop .w-k-n{position:static;display:block;margin-bottom:6px;font-size:36px;line-height:.8;}
.w-pop .gxf-p{margin-top:8px;font-size:15px;max-width:none;}
.w-pop .w-cena-d b{font-size:clamp(44px,10vw,64px);}
.w-pop .w-cena-lista{border:0;}
.w-pop .w-q .gxf-p{padding-right:0;}
.w-pop .w-qs{border-top:0;}
.w-pop-k>.w-pop-tr>*{animation:wPopIn .5s cubic-bezier(.16,1,.3,1) both;}
@keyframes wPopIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ================= WYGLĄD 2 · SLAJDY (wybór Dawida 18:4x, dopracowane wg listy T80 „LISTA-POPRAWEK-SLAJDY”) =================
   Zasada: slajd = jeden ekran (100svh, pod paskiem 64 px PC / 88 px telefon), treść wyśrodkowana w pionie:
   kicker → nagłówek → jedno zdanie → pigułka + „+ Odkryj”; reszta w okienku. Krój skaluje się od szerokości I wysokości (min(vw, vh)).
   01.11 T80: BEZ dociągania do slajdów (scroll-snap) — na telefonie i przy małych ruchach gładzika cofało przewijanie do początku slajdu (zgłosił Dawid). */
.st-wejscie{display:contents;}
.w-odkryj-st{display:none;}
.w-end-p{margin-top:16px;font-size:clamp(16px,1.6vw,20px);font-weight:500;line-height:1.55;color:rgba(255,255,255,.7);max-width:52ch;text-wrap:pretty;}
html[data-wyglad="2"]{--w-gora:96px;--w-dol:40px;--w-wys:calc(100svh - 136px);scroll-padding-top:76px;}   /* 02.11 audyt: skok ze spisu/kotwicy — nagłówek pod paskiem, nie pod nim (było 0) */
@media(max-width:860px){html[data-wyglad="2"]{scroll-padding-top:112px;}}
@media(max-width:860px){html[data-wyglad="2"]{--w-gora:112px;--w-dol:28px;--w-wys:calc(100svh - 140px);}}
html[data-wyglad="2"] body.gxf-site .gxf-wrap{padding-top:0;}
html[data-wyglad="2"] .gxf-flow{gap:0;}
html[data-wyglad="2"] .hero-site{display:block;}
html[data-wyglad="2"] .w-sec,html[data-wyglad="2"] .st-wejscie,html[data-wyglad="2"] .hero-site>.st{position:relative;box-sizing:border-box;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;padding-top:var(--w-gora);padding-bottom:var(--w-dol);scroll-snap-align:start;}
html[data-wyglad="2"] .w-sec{margin-inline:calc(50% - 50vw);padding-left:max(clamp(16px,5vw,40px),calc(50vw - 590px + clamp(16px,5vw,40px)));
  padding-right:max(clamp(16px,5vw,40px),calc(50vw - 590px + clamp(16px,5vw,40px)));overflow:clip;border:0;}
/* 02.11 Dawid: „w każdym filarze jest pełno takich czarnych pauz bez sensu” — sekcje pod pierwszym ekranem mają tyle wysokości, ile treści,
   plus równy odstęp; pełny ekran zostaje tylko dla wejścia (header .gxf-hero / SITE .st). Było: min-height 100svh i treść na środku. */
html[data-wyglad="2"] section.w-sec{min-height:0;justify-content:flex-start;padding-top:clamp(44px,7vh,88px);padding-bottom:clamp(44px,7vh,88px);}
@media(max-width:860px){html[data-wyglad="2"] section.w-sec{padding-top:clamp(32px,4.6vh,44px);padding-bottom:clamp(32px,4.6vh,44px);}}   /* telefon: przerwa między sekcjami ok. 80 px */
/* jedna skala etykiet i nagłówków */
html[data-wyglad="2"] .w-sec .gxf-k,html[data-wyglad="2"] .hero-site .st-top .gxf-k{margin:0 0 clamp(12px,2vh,20px);}
html[data-wyglad="2"] .w-sec .gxf-h2{margin-top:0;font-size:clamp(34px,min(5.2vw,7.2vh),72px);letter-spacing:-.04em;line-height:1.04;}
html[data-wyglad="2"] .w-glowa{margin-bottom:clamp(20px,3.6vh,40px);}
html[data-wyglad="2"] .w-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(20px,3.6vh,40px);}
html[data-wyglad="2"] .w-odkryj{min-height:48px;padding:0 22px 0 16px;font-size:13px;letter-spacing:.12em;color:#fff;border-color:rgba(255,255,255,.4);}
html[data-wyglad="2"] .w-plus-k{width:22px;height:22px;font-size:16px;}
@media(hover:hover){html[data-wyglad="2"] .w-odkryj:hover{border-color:#fff;}}
/* znak wodny tylko tam, gdzie obok jest pusto (cena, odpowiedź), cały w kadrze */
html[data-wyglad="2"] .w-cennik .w-wm,html[data-wyglad="2"] .w-odp .w-wm{display:block;position:absolute;z-index:-1;top:auto;left:auto;right:max(clamp(16px,5vw,40px),calc(50vw - 590px));bottom:var(--w-dol);transform:none;pointer-events:none;
  font-weight:900;font-size:clamp(120px,min(26vw,34vh),380px);line-height:.8;letter-spacing:-.02em;color:rgba(255,255,255,.035);white-space:nowrap;}
/* 0 · wejście: G|SITE + hak + przycisk */
html[data-wyglad="2"] .st-wejscie{align-items:flex-start;}
html[data-wyglad="2"] .st-wejscie .gxf-lead{display:none;}
html[data-wyglad="2"] .st-wejscie .gxf-hak{margin-top:clamp(24px,4.4vh,48px);font-size:clamp(28px,min(4.4vw,6.4vh),60px);max-width:17ch;}
html[data-wyglad="2"] .st-wejscie .gxf-actions{margin-top:clamp(20px,3.6vh,36px);}
html[data-wyglad="2"] .st-wejscie .gxf-ctap{max-width:46ch;}
/* 1 · Zrobione: makieta w całości w ekranie, opis 1 zdanie + Efekt, reszta w „+ Odkryj” */
html[data-wyglad="2"] .st-top{gap:12px;}
html[data-wyglad="2"] .st-p,html[data-wyglad="2"].js .st-p.on{margin-top:clamp(16px,3vh,28px);align-items:center;}
html[data-wyglad="2"] .st-dev{max-width:calc((var(--w-wys) - 150px) * 1.62 + 96px);}
html[data-wyglad="2"] .st-br img{max-height:calc(var(--w-wys) - 210px);}
html[data-wyglad="2"] .st-info{padding-bottom:0;}
html[data-wyglad="2"] .st-info .gxf-p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
html[data-wyglad="2"] .st-info .gxf-wynik{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
html[data-wyglad="2"] .w-odkryj-st{display:inline-flex;order:9;align-self:flex-start;}
/* 2 · rozmowa: nagłówek 1 zdanie (max 2–3 linie), reszta zwykłym tekstem, telefony obok */
html[data-wyglad="2"] .w-mowi{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-content:center;align-items:center;gap:clamp(24px,4vw,64px);}
html[data-wyglad="2"] .w-mowi-q{display:flex;flex-direction:column;gap:clamp(12px,2.4vh,24px);margin-top:0;}
html[data-wyglad="2"] .w-mowi-q b{order:1;font-size:clamp(32px,min(4.4vw,6.6vh),62px);font-weight:900;line-height:1.05;letter-spacing:-.035em;text-wrap:balance;}
html[data-wyglad="2"] .w-mowi-q .w-ciche{order:2;font-size:clamp(16px,min(1.5vw,2.3vh),19px);font-weight:500;line-height:1.6;letter-spacing:0;color:rgba(255,255,255,.62);max-width:52ch;}
html[data-wyglad="2"] .w-tel{width:min(clamp(118px,11vw,176px),calc((var(--w-wys) - 60px) * .44));}
html[data-wyglad="2"] .w-tel:nth-child(1){transform:translateY(-16px);}
html[data-wyglad="2"] .w-tel:nth-child(2){transform:translateY(16px);}
html[data-wyglad="2"] .w-tel:nth-child(3){transform:none;}
/* 3 · co robię: cała lista na jednym ekranie (PC 2 kolumny po 3) */
html[data-wyglad="2"] .w-spis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:clamp(24px,4vw,64px);row-gap:clamp(6px,1.4vh,16px);border:0;}
html[data-wyglad="2"] .w-r{display:flex;align-items:baseline;gap:clamp(10px,1.4vw,18px);padding:0;border:0;grid-column:auto;}
html[data-wyglad="2"] .w-r .gxf-p,html[data-wyglad="2"] .w-r .gxf-more,html[data-wyglad="2"] .w-r-img{display:none;}
html[data-wyglad="2"] .w-n{position:static;flex:none;font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--acc-t,var(--acc));line-height:1;}
html[data-wyglad="2"] .w-r-t{display:block;padding:0;}
html[data-wyglad="2"] .w-r-h{font-size:clamp(24px,min(2.8vw,5.6vh),44px);font-weight:900;letter-spacing:-.04em;line-height:1.04;white-space:nowrap;}
/* 02.11 Dawid: „podświetla tylko jedną rzecz z listy i daje do zrozumienia, że reszty nie robię” → wszystkie pozycje „Co robię” w pełnej bieli (było: od 2. przygaszone .5) */
html[data-wyglad="2"] .w-r .w-r-h{color:#fff;}
/* 4 · jak to idzie: tytuł nad osią, cyfry w całości NAD linią (nie nachodzą na nazwy kroków, nie chowają się pod paskiem) */
html[data-wyglad="2"] .w-tor{padding-top:clamp(72px,min(8.6vw,12vh),124px);gap:clamp(16px,2.4vw,32px);}
html[data-wyglad="2"] .w-tor::before,html[data-wyglad="2"] .w-tor::after{top:clamp(72px,min(8.6vw,12vh),124px);}
html[data-wyglad="2"] .w-k{padding-top:clamp(20px,3vh,32px);}
html[data-wyglad="2"] .w-k-n{bottom:calc(100% + 10px);font-size:clamp(60px,min(7.6vw,10.4vh),112px);line-height:.76;color:rgba(255,255,255,.16);}
html[data-wyglad="2"] .w-k-h{font-size:clamp(18px,min(1.8vw,2.7vh),24px);}
html[data-wyglad="2"] .w-k .gxf-p{display:none;}
/* 5 · teraz w robocie: etykieta → data → zdanie */
html[data-wyglad="2"] .w-teraz-in{display:flex;flex-direction:column;align-items:flex-start;gap:0;}
html[data-wyglad="2"] .w-teraz-t{display:contents;}
html[data-wyglad="2"] .w-teraz-t>.gxf-k{order:1;margin-bottom:0;}
html[data-wyglad="2"] .w-data{order:2;margin:clamp(14px,2.6vh,28px) 0 clamp(10px,2vh,20px);font-size:clamp(88px,min(15vw,21vh),210px);}
html[data-wyglad="2"] .w-teraz-t .gxf-meta{order:3;margin-top:0;}
html[data-wyglad="2"] .w-teraz-p{order:4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:56ch;}
html[data-wyglad="2"] .w-teraz-t .w-akcje{order:5;}
/* 6 · krótka odpowiedź */
html[data-wyglad="2"] .w-odp{display:flex;flex-direction:column;justify-content:center;border-top:0;}
html[data-wyglad="2"] .w-odp-q{font-size:clamp(36px,min(5.6vw,8vh),78px);max-width:15ch;}
html[data-wyglad="2"] .w-odp-t{margin-top:clamp(16px,3vh,32px);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* 02.11 (czarne pauzy, PC): sekcje nie mają już pełnego ekranu, więc „Czym jest…” i „Teraz w robocie” na PC w dwóch kolumnach — bez pustej prawej połowy */
@media(min-width:861px){
  html[data-wyglad="2"] .w-odp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,80px);align-items:center;}
  html[data-wyglad="2"] .w-odp>.w-odp-l{grid-column:1;grid-row:1/span 2;}
  html[data-wyglad="2"] .w-odp>.w-odp-t{grid-column:2;margin-top:0;align-self:end;}
  html[data-wyglad="2"] .w-odp>.w-akcje{grid-column:2;align-self:start;}
  html[data-wyglad="2"] .w-teraz-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(32px,5vw,80px);row-gap:12px;align-items:center;}
  html[data-wyglad="2"] .w-teraz-in>.w-data{grid-column:1;grid-row:1/span 4;}
  html[data-wyglad="2"] .w-teraz-t>*{grid-column:2;}
  html[data-wyglad="2"] section.w-o-skad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-content:start;}
  html[data-wyglad="2"] section.w-o-skad>*{grid-column:1;}
  html[data-wyglad="2"] section.w-o-skad>.w-o-skad-1{grid-column:2;grid-row:1/span 4;align-self:center;margin-top:0;}
  html[data-wyglad="2"] section.w-o-skad>.w-akcje{grid-column:2;}
}
/* 7 · cennik: jedna ogromna cena, „netto” tuż przy niej */
html[data-wyglad="2"] .w-ceny{display:block;}
html[data-wyglad="2"] .w-cena-lista,html[data-wyglad="2"] .w-cena-hero .gxf-p{display:none;}
html[data-wyglad="2"] .w-cena-hero{background:none;padding:0;border-radius:0;overflow:visible;}
html[data-wyglad="2"] .w-cena-n{font-size:13px;}
html[data-wyglad="2"] .w-cena-d{margin:clamp(6px,1.6vh,16px) 0 0;align-items:baseline;gap:6px clamp(12px,1.6vw,22px);}
html[data-wyglad="2"] .w-cena-d b{font-size:clamp(92px,min(16vw,23vh),236px);}
html[data-wyglad="2"] .w-cena-d span{font-size:clamp(14px,min(1.7vw,2.6vh),22px);color:rgba(255,255,255,.75);letter-spacing:.1em;}
/* 8 · pytania: nagłówek + przycisk po lewej, 3 pytania wprost, reszta w „+ Odkryj” */
html[data-wyglad="2"] .w-pyt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-content:center;align-items:center;gap:clamp(24px,4vw,64px);}
html[data-wyglad="2"] .w-lepki{position:static;}
html[data-wyglad="2"] .w-lepki .gxf-h2{font-size:clamp(40px,min(6vw,9vh),88px);}
html[data-wyglad="2"] .w-akcje-same{margin-top:16px;}
html[data-wyglad="2"] .w-qs{display:block;}
html[data-wyglad="2"] .w-pyt .w-q:nth-child(n+4){display:none;}
/* 9 · skąd: etykieta + pierwsze zdanie wielkie, reszta w „+ Odkryj” */
html[data-wyglad="2"] .w-skad{display:flex;flex-direction:column;justify-content:center;}
html[data-wyglad="2"] .w-skad-h{font-size:clamp(18px,1.7vw,22px);}
html[data-wyglad="2"] .w-skad-r{display:none;}
html[data-wyglad="2"] .w-skad-1{margin-top:clamp(12px,2.4vh,24px);font-size:clamp(30px,min(4.4vw,6.6vh),62px);max-width:22ch;}
/* 10 · pozostałe filary: jeden ekran */
html[data-wyglad="2"] .w-bary{margin-bottom:clamp(16px,3vh,32px);}
html[data-wyglad="2"] .w-most-t{font-size:clamp(24px,min(3vw,4.4vh),40px)!important;}
html[data-wyglad="2"] .w-most-k{margin-top:clamp(16px,3vh,32px);}
html[data-wyglad="2"] .w-fil{padding:clamp(8px,1.4vh,16px) 0;min-height:48px;}
html[data-wyglad="2"] .w-fil span{font-size:clamp(30px,min(4.8vw,7vh),68px);}
/* 11 · koniec: nagłówek 1 zdanie, bez wiszącego znaku G|SITE */
html[data-wyglad="2"] .w-end{display:flex;flex-direction:column;justify-content:center;min-height:100svh;}
/* PC: ostatni slajd + stopka (239 px) = jeden ekran — na końcu strony zamknięcie nie jest ucięte od góry */
@media(min-width:861px){html[data-wyglad="2"] .w-end{min-height:calc(100svh - 240px);}}
html[data-wyglad="2"] .w-znak{display:none;}
html[data-wyglad="2"] .w-end-t{font-size:clamp(32px,min(4.6vw,6.8vh),64px)!important;max-width:27ch!important;line-height:1.06!important;}
/* zdjęcie-faktura tylko za „Teraz w robocie” (znak GEK-X obok pustego miejsca); za krokami, pytaniami i końcem było brudną plamą */
html[data-wyglad="2"] .w-jak .w-foto,html[data-wyglad="2"] .w-pyt .w-foto,html[data-wyglad="2"] .w-end .w-foto{display:none;}
/* telefon */
@media(max-width:860px){
  html[data-wyglad="2"] .w-mowi,html[data-wyglad="2"] .w-pyt{grid-template-columns:minmax(0,1fr);gap:clamp(20px,3.6vh,32px);}
  html[data-wyglad="2"] .w-spis{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;}
  html[data-wyglad="2"] .w-r-h{font-size:clamp(22px,min(7vw,4.4vh),34px);white-space:normal;}
  html[data-wyglad="2"] .w-tor{grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:clamp(16px,3vh,28px) 16px;}
  html[data-wyglad="2"] .w-tor::before,html[data-wyglad="2"] .w-tor::after,html[data-wyglad="2"] .w-k-pkt{display:none;}
  html[data-wyglad="2"] .w-k{padding:0;}
  html[data-wyglad="2"] .w-k-n{position:static;display:block;margin-bottom:6px;font-size:clamp(44px,min(14vw,8vh),64px);}
  html[data-wyglad="2"] .st-dev{max-width:none;padding:0;}
  html[data-wyglad="2"] .st-tel{display:none;}
  html[data-wyglad="2"] .st-br img{max-height:min(26svh,240px);}
  html[data-wyglad="2"] .st-info{gap:8px;}
  html[data-wyglad="2"] .st-info .gxf-p{-webkit-line-clamp:2;}
  html[data-wyglad="2"] .st-info .gxf-wynik{display:none;}
  html[data-wyglad="2"] .w-tel{width:auto;}
  html[data-wyglad="2"] .w-telefony{max-width:min(100%,calc((var(--w-wys) - 330px) * 1.5));}
  html[data-wyglad="2"] .w-mowi-q .w-ciche{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
  html[data-wyglad="2"] .w-cennik .w-wm,html[data-wyglad="2"] .w-odp .w-wm{display:none;}
}
@media(max-width:860px) and (max-height:720px){
  html[data-wyglad="2"] .w-mowi-q .w-ciche{-webkit-line-clamp:3;}
  html[data-wyglad="2"] .gxf-ctap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  html[data-wyglad="2"] .w-pyt .w-q:nth-child(n+3){display:none;}
  html[data-wyglad="2"] .w-teraz-p{-webkit-line-clamp:2;}
  html[data-wyglad="2"] .st-br img{max-height:18svh;}
  html[data-wyglad="2"] .st-p,html[data-wyglad="2"].js .st-p.on{margin-top:12px;}
  html[data-wyglad="2"] .st-info{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px;}
  html[data-wyglad="2"] .st-info>.gxf-h3,html[data-wyglad="2"] .st-info>.gxf-p{flex-basis:100%;}
  html[data-wyglad="2"] .st-info .gxf-p{-webkit-line-clamp:1;}
  html[data-wyglad="2"] .st-info>.gxf-h3,html[data-wyglad="2"] .st-info>.gxf-p{order:-1;}
  html[data-wyglad="2"] .w-odkryj-st{order:2;}
}

/* ================= WYGLĄD 3 · LINIA (jedna linia w kolorze filaru prowadzi przez stronę; sekcje = karty z wielkimi numerami) ================= */
html[data-wyglad="3"] .gxf-flow{gap:clamp(72px,11vh,120px);counter-reset:wsek;}
html[data-wyglad="3"] .w-sec{--wl:clamp(28px,5vw,72px);position:relative;counter-increment:wsek;margin-left:var(--wl);padding:clamp(28px,4vw,56px);
  background:#0D0D0E;border:1px solid rgba(255,255,255,.08);border-radius:24px;overflow:visible;}
html[data-wyglad="3"] .w-sec::before{content:"";position:absolute;left:calc(-1 * var(--wl) + 8px);top:-1px;bottom:calc(-1 * clamp(72px,11vh,120px) - 1px);width:2px;background:var(--acc);transform-origin:top;}
html[data-wyglad="3"] .w-sec:last-child::before{bottom:50%;}
html[data-wyglad="3"] .w-sec::after{content:counter(wsek,decimal-leading-zero);position:absolute;right:clamp(20px,3vw,40px);top:0;transform:translateY(-58%);z-index:2;
  font-size:clamp(72px,9vw,136px);font-weight:900;line-height:1;letter-spacing:-.05em;color:#fff;opacity:.12;pointer-events:none;}
html[data-wyglad="3"] .w-sec .gxf-k:first-of-type::before{content:"";position:absolute;left:calc(-1 * var(--wl) + 2px);width:14px;height:14px;border-radius:50%;background:#000;border:2px solid var(--acc);margin-top:-1px;}
html[data-wyglad="3"] .w-teraz{margin-inline:0;margin-left:var(--wl);padding:clamp(28px,4vw,56px);border:1px solid rgba(255,255,255,.08);}
html[data-wyglad="3"] .w-end{border:1px solid rgba(255,255,255,.08);min-height:0;}
html[data-wyglad="3"] .w-mowi{min-height:0;}
html[data-wyglad="3"] .w-tel{width:clamp(104px,8.6vw,148px);}
html[data-wyglad="3"] .w-r-img{margin-right:0;}
html[data-wyglad="3"] .w-okno{border-right:1px solid rgba(255,255,255,.14);border-radius:14px 14px 0 0;}
html[data-wyglad="3"] .w-cena-hero{background:#000;border:1px solid rgba(255,255,255,.1);}
html[data-wyglad="3"] .w-lepki{top:calc(var(--topbar-h,64px) + 72px);}
/* mieszane szerokości kart: co druga węższa i przesunięta (asymetria, DNA pkt 12) */
@media(min-width:1024px){
  html[data-wyglad="3"] .w-odp,html[data-wyglad="3"] .w-skad,html[data-wyglad="3"] .w-teraz{margin-left:calc(var(--wl) + 12%);}
  html[data-wyglad="3"] .w-odp::before,html[data-wyglad="3"] .w-skad::before,html[data-wyglad="3"] .w-teraz::before{left:calc(-1 * var(--wl) - 12% + 8px);}
  html[data-wyglad="3"] .w-odp .gxf-k:first-of-type::before,html[data-wyglad="3"] .w-skad .gxf-k:first-of-type::before,html[data-wyglad="3"] .w-teraz .gxf-k:first-of-type::before{left:calc(-1 * var(--wl) - 12% + 2px);}
}
@media(max-width:860px){html[data-wyglad="3"] .w-sec{--wl:28px;padding:24px 20px;}html[data-wyglad="3"] .w-sec::after{font-size:64px;right:16px;}}

/* ================= PRINT · konfigurator w pętli (nagranie ekranu) ================= */
.w-konfig{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center;}
.w-kf-scena{display:flex;justify-content:center;}
.w-kf-tel{width:clamp(220px,24vw,300px);aspect-ratio:390/844;border-radius:36px;border:1px solid rgba(255,255,255,.16);background:#0B0B0C;padding:7px;overflow:hidden;}
.w-kf-v{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:29px;background:#111;}
.w-kf-bez .w-kf-tel{width:100%;aspect-ratio:auto;border-radius:16px;padding:6px;}
.w-kf-bez .w-kf-v{height:auto;border-radius:11px;}
.w-kf-t .gxf-h2{font-size:clamp(32px,4.6vw,60px);letter-spacing:-.04em;}
.w-kf-t .gxf-p{margin-top:16px;font-size:clamp(16px,1.6vw,19px);max-width:44ch;}
@media(max-width:860px){.w-konfig{grid-template-columns:minmax(0,1fr);}.w-kf-scena{order:2;}}


.w-pod{margin-top:16px;font-size:clamp(16px,1.6vw,19px);font-weight:500;line-height:1.6;color:rgba(255,255,255,.62);max-width:56ch;}
.w-maszyny{list-style:none;border-top:1px solid rgba(255,255,255,.12);}
.w-m{display:grid;grid-template-columns:clamp(56px,8vw,112px) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.12);}
.w-m-nr{font-size:clamp(36px,4.4vw,64px);font-weight:900;line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.16);font-variant-numeric:tabular-nums;}
.w-m-t{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:8px clamp(24px,4vw,56px);align-items:baseline;}
.w-m-u{grid-column:1;font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--acc-t,var(--acc));}
.w-m-cz{grid-column:1;font-size:clamp(28px,4.2vw,58px);font-weight:900;line-height:1;letter-spacing:-.035em;color:#fff;text-wrap:balance;}
.w-m-dc{grid-column:2;grid-row:1/span 2;align-self:center;font-size:15px;font-weight:500;line-height:1.6;color:rgba(255,255,255,.62);}
.w-zap{margin-top:clamp(32px,4vw,48px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:12px clamp(24px,4vw,56px);padding:clamp(20px,3vw,32px);border-radius:16px;background:#1D1D1F;}
.w-zap-h{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.w-zap-p{grid-column:1;font-size:15px;line-height:1.6;color:rgba(255,255,255,.75);}
.w-zap-l{grid-column:2;grid-row:1/span 2;list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-content:center;}
.w-zap-l li{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:100px;border:1px solid rgba(255,255,255,.18);font-size:13px;font-weight:700;color:#fff;}
@media(max-width:860px){.w-m-t,.w-zap{grid-template-columns:minmax(0,1fr);}.w-m-dc,.w-zap-l{grid-column:1;grid-row:auto;}}
.w-klocki{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,2.6vw,32px) clamp(16px,2vw,24px);padding-top:16px;}
.w-klo{position:relative;background:#1D1D1F;border-radius:16px;padding:clamp(32px,3.4vw,40px) clamp(20px,2.6vw,32px) clamp(24px,3vw,32px);}
.w-klo-l{grid-column:1/-1;}
.w-klo-b{position:absolute;top:-14px;left:24px;display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:100px;background:#fff;color:#000;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.w-klo-s{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.w-chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;}
.w-plus{font-size:20px;font-weight:900;line-height:1;color:var(--acc-t,var(--acc));}
.w-klo-h{margin-top:20px;font-size:clamp(22px,2.4vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:#fff;}
.w-klo-l .w-klo-h{font-size:clamp(28px,3.6vw,46px);}
.w-klo .gxf-p{margin-top:10px;}
@media(max-width:700px){.w-klocki{grid-template-columns:minmax(0,1fr);}}
.w-prace{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);}
.w-pr{position:relative;min-width:0;}
.w-pr-film{grid-column:span 3;aspect-ratio:16/9;}
.w-pr-l{grid-column:1/-1;}
.w-pr-zdjecie{grid-column:span 2;aspect-ratio:4/5;}
.w-pr-pusto,.w-pr-a{position:absolute;inset:0;border-radius:16px;overflow:hidden;}
.w-pr-pusto{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:#0E0E0F;border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.55);font-size:13px;font-weight:700;text-align:center;}
.w-pr-ik{position:relative;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);}
.w-pr-ik::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid rgba(255,255,255,.55);border-top:10px solid transparent;border-bottom:10px solid transparent;}
.w-pr-zdjecie .w-pr-ik{border-radius:10px;}
.w-pr-zdjecie .w-pr-ik::after{left:12px;top:22px;border:0;width:30px;height:18px;background:rgba(255,255,255,.3);clip-path:polygon(0 100%,35% 30%,55% 65%,72% 45%,100% 100%);}
.w-pr-typ{position:absolute;top:14px;left:16px;z-index:1;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.w-pr-a img{display:block;width:100%;height:100%;object-fit:cover;}
@media(max-width:700px){.w-prace{grid-template-columns:repeat(2,minmax(0,1fr));}.w-pr-film{grid-column:1/-1;}.w-pr-zdjecie{grid-column:span 1;}.w-pr-zdjecie:last-child{grid-column:1/-1;aspect-ratio:16/9;}}
@media(prefers-reduced-motion:reduce){.w-pop,.w-pop-k,.w-pop-k>.w-pop-tr>*{transition:none!important;animation:none!important;}.js .w-most .w-bary i{transform:none!important;transition:none!important;}}

/* ================= PRINT · materia (31.10 ~19:3x) — hero PRINT bez zmian; pod nim slajdy z motywem znaku z hero ================= */
.w-tylko-odkryj{display:none!important;}
/* długie ceny („od €6,99/szt.”) mniejszym krojem, z łamaniem */
html[data-wyglad="2"] .w-cena-dl b{font-size:clamp(52px,min(8.6vw,12.4vh),128px);white-space:normal;line-height:.95;}
/* co robię: przedmioty z Twoim znakiem (rysunki z hero) + reszta usług jako pigułki */
.w-przedmioty{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);}
.w-pz-a{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,16px);height:100%;padding:clamp(14px,2.2vh,24px) 10px;border-radius:16px;background:#0E0E10;
  border:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;transition:border-color .2s,transform .2s;}
@media(hover:hover){a.w-pz-a:hover{border-color:rgba(255,255,255,.32);transform:translateY(-2px);}}
.w-pz-svg{display:block;width:100%;max-width:min(200px,24vh);height:auto;aspect-ratio:1;}
.w-pz-znak{padding:18%;}
.w-pz-t{font-size:clamp(14px,min(1.3vw,2.1vh),17px);font-weight:800;line-height:1.25;text-align:center;text-wrap:balance;}
.w-chipy{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,2.4vh,24px);}
.w-chip-l{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px;border-radius:100px;border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;font-weight:700;text-decoration:none;}
@media(hover:hover){a.w-chip-l:hover{border-color:#fff;}}
/* znak rysuje się przy wjeździe (jak w hero) */
.js .w-co-print .zn-ring,.js .w-mowi-print .zn-ring{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .25s;}
.js .w-co-print.in .zn-ring,.js .w-mowi-print.in .zn-ring{stroke-dashoffset:0;}
/* „To nie logo buduje markę.” — zdanie + duży znak */
.w-mowi-print{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(24px,4vw,64px);}
.w-mowi-print .w-mowi-q b{display:block;font-size:clamp(34px,min(5vw,7.4vh),72px);font-weight:900;line-height:1.02;letter-spacing:-.04em;}
.w-mowi-print .w-mowi-q .w-ciche{display:block;margin-top:clamp(12px,2.4vh,24px);font-size:clamp(16px,min(1.5vw,2.3vh),19px);font-weight:500;line-height:1.6;color:rgba(255,255,255,.62);letter-spacing:0;max-width:52ch;}
.w-znak-duzy{display:flex;justify-content:center;}
.w-zd-svg{width:min(100%,clamp(160px,min(30vw,46vh),420px));height:auto;aspect-ratio:1;}
/* zrobione: dwie rzeczy obok siebie, po jednym zdaniu, szczegóły w „+ Odkryj” */
.w-rzeczy{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);}
.w-rz-img{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#111;}
.w-rz-img img{display:block;width:100%;height:auto;max-height:calc(var(--w-wys,60vh) - 260px);object-fit:cover;object-position:top;}
.w-rz-h{margin-top:16px;font-size:clamp(20px,min(2vw,3vh),28px);font-weight:900;letter-spacing:-.03em;color:#fff;}
.w-rz-p{margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.w-rz-ak{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px;}
html[data-wyglad="2"] .w-rz-ak .w-odkryj{min-height:44px;}
/* RURK: wielkie słowo, zdanie, plakietka */
.w-rurk-w{margin-top:0;font-size:clamp(96px,min(22vw,30vh),300px);font-weight:900;line-height:.8;letter-spacing:-.05em;color:#fff;}
.w-rurk-p{margin-top:clamp(16px,3vh,32px);font-size:clamp(17px,min(1.7vw,2.6vh),22px);font-weight:500;line-height:1.55;color:rgba(255,255,255,.72);max-width:46ch;}
.w-rurk-b{margin-top:clamp(16px,3vh,28px);align-self:flex-start;}
@media(max-width:860px){
  .w-przedmioty{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .w-pz-svg{max-width:min(140px,15vh);}
  .w-mowi-print{grid-template-columns:minmax(0,1fr);}
  .w-zd-svg{width:clamp(120px,min(40vw,22vh),200px);}
  .w-rzeczy{grid-template-columns:minmax(0,1fr);gap:20px;}
  .w-rz-img img{max-height:min(19svh,180px);}
  .w-rz-h{margin-top:10px;}
  .w-rz-p{-webkit-line-clamp:1;}
}
@media(prefers-reduced-motion:reduce){.js .w-co-print .zn-ring,.js .w-mowi-print .zn-ring{stroke-dashoffset:0!important;transition:none!important;}}
/* PRINT · dopasowanie do wysokości ekranu (bramka 4 rozmiary) */
html[data-wyglad="2"] .w-konfig,html[data-wyglad="2"] .w-mowi-print{display:grid;align-content:center;align-items:center;}
html[data-wyglad="2"] .w-kf-tel{width:min(clamp(200px,24vw,300px),calc((var(--w-wys) - 30px) * .462));}
html[data-wyglad="2"] .w-pz-svg{max-width:min(200px,22vh);}
@media(max-width:860px){
  html[data-wyglad="2"] .w-konfig{grid-template-columns:minmax(0,1fr);gap:16px;}
  html[data-wyglad="2"] .w-kf-tel{width:min(56vw,calc((var(--w-wys) - 300px) * .462));}
  html[data-wyglad="2"] .w-kf-t .gxf-h2{font-size:clamp(28px,min(8vw,4.6vh),40px);}
  html[data-wyglad="2"] .w-pz-svg{max-width:min(120px,12.5vh);}
  html[data-wyglad="2"] .w-pz-a{padding:10px 8px;gap:6px;}
  html[data-wyglad="2"] .w-rzeczy{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  html[data-wyglad="2"] .w-rz-img img{max-height:22svh;}
  html[data-wyglad="2"] .w-rz-h{font-size:16px;}
  html[data-wyglad="2"] .w-rz-p{display:none;}
  html[data-wyglad="2"] .w-rz-ak{flex-direction:column;align-items:flex-start;gap:4px;}
}
@media(max-width:860px) and (max-height:760px){
  html[data-wyglad="2"] .w-kf-t .gxf-p,html[data-wyglad="2"] .w-co-print .w-chipy{display:none;}
  html[data-wyglad="2"] .w-kf-tel{width:min(56vw,calc((var(--w-wys) - 220px) * .462));}
}
html[data-wyglad="2"] .w-mowi-print .w-ciche{display:-webkit-box!important;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.w-pop .w-mowi-q b{display:block;font-size:clamp(24px,5vw,36px);font-weight:900;line-height:1.1;}
.w-pop .w-mowi-q .w-ciche{display:block;margin-top:12px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.75);}
@media(max-width:860px){
  html[data-wyglad="2"] .w-mowi-print .w-ciche{-webkit-line-clamp:3;}
  html[data-wyglad="2"] .w-kf-tel{width:min(56vw,calc((var(--w-wys) - 340px) * .462));}
}
@media(max-width:860px) and (max-height:760px){html[data-wyglad="2"] .w-kf-tel{width:min(56vw,calc((var(--w-wys) - 270px) * .462));}}
.nw{white-space:nowrap;}





/* szczegóły tylko w „+ Odkryj” (bez JS widać wszystko) */
.js .w-af-p,.js .w-af .gxf-more,.js .w-sl-dc,.js .w-zp-p,.js .w-mt-p,.js .w-sb-p,.js .w-bil-r .w-bil-p{display:none;}

/* ---- 0 · wejście: tytuł nad ekranem, kadr na całą szerokość, pasy kinowe, hak jako napis w dolnym pasie ---- */
.w-hk-t{grid-area:t;min-width:0;}
.w-hk-ak{grid-area:ak;min-width:0;}
.w-hk .gxf-h1{margin-top:4px;}
.w-hk .gxf-h1 .w{font-size:clamp(56px,min(9.6vw,13.4vh),148px);line-height:.86;letter-spacing:-.01em;}
.w-hk .gxf-h1 .d{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(15px,min(1.5vw,2.3vh),20px);max-width:36ch;color:rgba(255,255,255,.72);}
.w-hk .gxf-lead{margin-top:0;font-size:clamp(15px,min(1.3vw,2.1vh),17px);max-width:40ch;color:rgba(255,255,255,.64);}
.w-hk .gxf-actions{margin-top:clamp(14px,2.4vh,24px);}
html[data-wyglad] .w-hk .gxf-ctap{display:none;}
.w-kino{grid-area:k;align-self:stretch;position:relative;margin:0 calc(-1 * var(--w-bok));min-height:0;}
.w-kino{--pas:14%;}
.w-kino .kino-ekran{width:100%;height:100%;min-height:0;aspect-ratio:auto;background:transparent;}
.w-kino .kino-pas{display:none;}
.w-kino .kino-ekran img{clip-path:inset(var(--pas) 0 var(--pas) 0);transition:clip-path 1.6s cubic-bezier(.16,1,.3,1) .2s;}
.js .w-kino:not(.on) .kino-ekran img{clip-path:inset(0 0 0 0);}
.w-kino .kino-napis{top:calc(100% - var(--pas) / 2);bottom:auto;transform:translate(-50%,-50%);width:min(88%,860px);font-size:clamp(15px,min(1.7vw,2.6vh),24px);font-weight:700;line-height:1.28;}
.w-kino .kino-cap{position:absolute;z-index:2;top:0;right:var(--w-bok);height:var(--pas);display:flex;align-items:center;padding:0;font-size:10px;color:rgba(255,255,255,.5);}
html[data-wyglad="2"] .w-hk{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"t ak" "k k";
  align-items:end;column-gap:clamp(24px,4vw,64px);row-gap:clamp(16px,3.2vh,32px);height:100vh;height:100svh;padding-bottom:0;}
@media(max-width:860px){
  html[data-wyglad="2"] .w-hk{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "k" "ak";grid-template-rows:auto minmax(0,1fr) auto;row-gap:clamp(12px,2.4vh,20px);padding-bottom:var(--w-dol);}
  .w-hk .gxf-h1 .w{font-size:clamp(52px,min(17vw,8.6vh),80px);}
  .w-hk .gxf-lead{display:none;}
  .w-hk .gxf-actions{margin-top:0;}
  .w-kino{--pas:clamp(60px,16%,96px);}
  .w-kino .kino-napis{width:92%;font-size:clamp(14px,min(4.2vw,2.1vh),17px);}
  .w-kino .kino-cap{font-size:9px;}
}
@media(max-width:860px) and (max-height:720px){html[data-wyglad="2"] .w-hk .gxf-crumb{display:none;}.w-hk .gxf-h1 .d{margin-top:8px;}}

/* ---- 1 · plansza: dwa zdania na środku jak w kinie niemym, trzecie pod kreską ---- */
.w-pl{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:1040px;margin-inline:auto;}
.w-pl .gxf-k{justify-content:center;}
.w-pl-q{font-size:clamp(40px,min(6.6vw,9.6vh),104px);font-weight:900;line-height:1.02;letter-spacing:-.045em;text-wrap:balance;}
.w-pl-1{display:block;color:rgba(255,255,255,.38);}
.w-pl-2{display:block;color:#fff;}
.w-pl-k{display:block;width:48px;height:3px;border-radius:2px;background:var(--acc);margin:clamp(24px,4.4vh,44px) auto clamp(14px,2.6vh,24px);transform-origin:center;}
.js .w-plansza .w-pl-k{transform:scaleX(0);transition:transform .8s cubic-bezier(.16,1,.3,1) .5s;}
.js .w-plansza.in .w-pl-k{transform:none;}
.w-pl-p{font-size:clamp(16px,min(1.6vw,2.4vh),20px);color:rgba(255,255,255,.72);max-width:46ch;}
.w-pl .w-akcje{justify-content:center;}

/* ---- 2 · afisz: obsada w trzech rozmiarach (gwiazda · dwie role · reszta) ---- */
.w-af .w-glowa{text-align:center;}
html[data-wyglad] .w-af .gxf-h2{font-size:clamp(13px,1.1vw,15px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.3;}
.w-af .gxf-k{justify-content:center;}
.w-afisz{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:baseline;row-gap:clamp(14px,3vh,32px);width:100%;max-width:1100px;margin-inline:auto;text-align:center;}
.w-af-i{min-width:0;padding:0 clamp(6px,1vw,14px);}
.w-af-h{font-weight:900;color:#fff;text-wrap:balance;}
.w-af-l{grid-column:1/-1;}
.w-af-l .w-af-h{font-size:clamp(46px,min(8.4vw,11.6vh),124px);line-height:.92;letter-spacing:-.05em;}
.w-af-m{grid-column:span 3;}
.w-af-m .w-af-h{font-size:clamp(24px,min(2.9vw,4.4vh),42px);line-height:1;letter-spacing:-.035em;}
.w-af-m+.w-af-m{border-left:1px solid rgba(255,255,255,.14);}
.w-af-s{grid-column:span 2;}
.w-af-s .w-af-h{font-size:clamp(16px,min(1.6vw,2.5vh),22px);font-weight:800;line-height:1.2;letter-spacing:-.015em;color:rgba(255,255,255,.62);}
.w-af-s+.w-af-s{border-left:1px solid rgba(255,255,255,.14);}
.w-af .w-akcje{justify-content:center;}
@media(max-width:860px){.w-af-s{grid-column:span 3;}.w-af-s:nth-child(6){grid-column:1/-1;border-left:0;}}

/* ---- 3 · słownik: 6 kart, numer wystaje nad kartę, czasownik wielki ---- */
.w-sl{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,6vh,56px) clamp(12px,1.6vw,20px);padding-top:clamp(24px,4vh,44px);}
.w-sl-i{position:relative;min-width:0;background:#1D1D1F;border-radius:16px;padding:clamp(30px,4.6vh,48px) clamp(16px,1.8vw,24px) clamp(16px,2.6vh,24px);}
.w-sl-nr{position:absolute;left:clamp(12px,1.4vw,20px);top:0;transform:translateY(-50%);font-size:clamp(52px,min(6.6vw,9.4vh),104px);font-weight:900;line-height:.74;letter-spacing:-.05em;
  color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums;pointer-events:none;}
.w-sl-u{font-size:11px;font-weight:800;letter-spacing:.1em;line-height:1.3;color:var(--acc-t,var(--acc));}
.w-sl-cz{margin-top:6px;font-size:clamp(19px,min(2.3vw,3.4vh),32px);font-weight:900;line-height:1.02;letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.w-sl-dol{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(16px,3vh,32px);}
.w-sl-dol .w-akcje{margin-top:0!important;}
.w-zp{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0;}
.w-zp-h{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-right:4px;}
.w-zp-l{list-style:none;display:flex;flex-wrap:wrap;gap:8px;}
.w-zp-l li{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:100px;border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700;color:rgba(255,255,255,.86);}
@media(max-width:860px){
  .w-slownik .w-pod{display:none;}
  .w-sl{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4.6vh,40px) 10px;padding-top:clamp(18px,3vh,28px);}
  .w-sl-i{padding:clamp(24px,3.4vh,32px) 12px clamp(12px,1.8vh,16px);}
  .w-sl-nr{left:10px;font-size:clamp(44px,min(13vw,6.6vh),60px);}
  .w-sl-u{font-size:9px;letter-spacing:.06em;}
  .w-sl-cz{margin-top:4px;font-size:clamp(15px,min(4.6vw,2.4vh),20px);}
  .w-sl-dol{margin-top:clamp(12px,2vh,20px);}
  .w-zp-l li{min-height:28px;padding:0 10px;font-size:11px;}
}

/* ---- 4 · montaż: dwa klipy na ścieżce stykają się cięciem, obok efekt i pakiet ---- */
.w-mt{list-style:none;border-top:1px solid rgba(255,255,255,.12);}
.w-mt-r{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr) clamp(150px,15vw,210px);align-items:center;gap:8px clamp(16px,2.4vw,32px);padding:clamp(10px,1.8vh,18px) 0;border-bottom:1px solid rgba(255,255,255,.12);}
.w-mt-tor{display:flex;gap:3px;min-width:0;}
.w-mt-c{flex:1 1 0;min-width:0;display:flex;align-items:center;min-height:clamp(36px,5.4vh,48px);padding:6px 12px;border-radius:6px;background:#1D1D1F;border-left:3px solid var(--acc);
  font-size:11px;font-weight:800;letter-spacing:.05em;line-height:1.2;color:#fff;}
.js .w-montaz .w-mt-c{opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(min(var(--i,0),5) * .1s + .25s);}
.js .w-montaz .w-mt-c:first-child{transform:translateX(-28px);}
.js .w-montaz .w-mt-c:last-child{transform:translateX(28px);}
.js .w-montaz.in .w-mt-c{opacity:1;transform:none;}
/* telefon: ścieżka sięga krawędzi ekranu — oba klipy wjeżdżają z lewej, drugi chwilę później (nic nie stoi za prawą krawędzią) */
@media(max-width:860px){.js .w-montaz .w-mt-c:last-child{transform:translateX(-16px);transition-delay:calc(min(var(--i,0),5) * .1s + .4s);}.js .w-montaz .w-mt-c:first-child{transform:translateX(-16px);}}
.w-mt-h{font-size:clamp(18px,min(2vw,3vh),28px);font-weight:900;line-height:1.1;letter-spacing:-.025em;color:#fff;}
.w-mt-g{justify-self:end;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:100px;background:#fff;color:#000;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
@media(max-width:860px){
  .w-mt-r{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tor tor" "h g";gap:6px 12px;padding:clamp(7px,1.2vh,12px) 0;}
  .w-mt-tor{grid-area:tor;}
  .w-mt-h{grid-area:h;font-size:clamp(16px,min(4.6vw,2.3vh),19px);}
  .w-mt-g{grid-area:g;height:24px;padding:0 10px;font-size:10px;}
  .w-mt-c{min-height:clamp(26px,3.6vh,32px);padding:3px 8px;font-size:9px;letter-spacing:.03em;}
}

/* ---- 5 · taśma filmowa: kadry z perforacją, pusty kadr = numer + rodzaj, jeden napis pod taśmą ---- */
.w-tasma{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(12px,2.4vh,24px);}
.w-ts-k{min-width:0;padding:14px 0;background-color:#1E1E20;background-repeat:repeat-x;background-size:calc(100% / 20) 8px;background-position:0 3px,0 calc(100% - 3px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8'%3E%3Crect x='5' y='1' width='8' height='6' rx='1.5' fill='%23000'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='8'%3E%3Crect x='5' y='1' width='8' height='6' rx='1.5' fill='%23000'/%3E%3C/svg%3E");}
.w-ts-k:nth-child(3n+1){border-radius:4px 0 0 4px;}
.w-ts-k:nth-child(3n){border-radius:0 4px 4px 0;}
.w-ts-kadr{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;margin:0 5px;border-radius:3px;background:#0A0A0B;overflow:hidden;}
.w-ts-nr,.w-ts-typ{position:absolute;top:10px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.w-ts-nr{left:12px;color:var(--acc-t,var(--acc));}
.w-ts-typ{right:12px;}
.w-ts-ik{position:relative;display:block;width:clamp(36px,4vw,52px);height:clamp(36px,4vw,52px);border-radius:50%;border:1.5px solid rgba(255,255,255,.3);}
.w-ts-ik::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:clamp(11px,1.2vw,15px) solid rgba(255,255,255,.55);border-top:clamp(7px,.8vw,9px) solid transparent;border-bottom:clamp(7px,.8vw,9px) solid transparent;}
.w-ts-zdjecie .w-ts-ik{border-radius:10px;}
.w-ts-zdjecie .w-ts-ik::after{left:50%;top:56%;border:0;width:58%;height:36%;background:rgba(255,255,255,.4);clip-path:polygon(0 100%,35% 25%,55% 62%,72% 40%,100% 100%);}
.w-ts-a{position:absolute;inset:0;}
.w-ts-a img{display:block;width:100%;height:100%;object-fit:cover;}
.w-ts-sub{margin-top:clamp(16px,3vh,32px);text-align:center;font-size:clamp(16px,min(1.7vw,2.6vh),22px);font-weight:700;line-height:1.3;color:var(--acc-t,var(--acc));}
@media(max-width:860px){
  .w-tasma{grid-template-columns:repeat(2,minmax(0,1fr));}
  .w-ts-k{padding:12px 0;background-size:calc(100% / 10) 7px;}
  .w-ts-k:nth-child(n){border-radius:0;}
  .w-ts-k:nth-child(odd){border-radius:4px 0 0 4px;}
  .w-ts-k:nth-child(even){border-radius:0 4px 4px 0;}
  .w-ts-kadr{margin:0 4px;}
  .w-ts-nr,.w-ts-typ{top:7px;font-size:9px;}
  .w-ts-nr{left:8px;}
  .w-ts-typ{right:8px;}
  .w-ts-ik{width:30px;height:30px;}
  .w-ts-ik::after{border-left-width:10px;border-top-width:6px;border-bottom-width:6px;}
}

/* ---- 6 · zrobione: trzy kadry z podpisem ---- */
.w-zr{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.w-zr.n2{grid-template-columns:repeat(2,minmax(0,1fr));}
.w-zr-i{min-width:0;}
.w-zr-img{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.1);}
.w-zr-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.w-zr-img .gxf-ph{min-height:0;height:100%;}
.w-zr-img .gxf-ph span{font-size:clamp(40px,5vw,72px);}
.w-zr-h{margin-top:clamp(10px,1.8vh,16px);font-size:clamp(18px,min(1.8vw,2.8vh),24px);font-weight:900;line-height:1.15;letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.w-zr-w{margin-top:6px;font-size:13px;font-weight:700;line-height:1.4;color:rgba(255,255,255,.6);}
.w-zr-ak{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:8px;}
.w-zr-ak .gxf-more{margin-top:0;}
html[data-wyglad="2"] .w-zr-ak .w-odkryj{min-height:44px;}
@media(max-width:860px){
  .w-zr,.w-zr.n2{grid-template-columns:minmax(0,1fr);gap:clamp(12px,2vh,18px);}
  .w-zr-i{display:grid;grid-template-columns:clamp(104px,32vw,140px) minmax(0,1fr);gap:14px;align-items:start;}
  .w-zr-img{border-radius:8px;}
  .w-zr-img .gxf-ph span{font-size:28px;}
  .w-zr-h{margin-top:0;font-size:16px;}
  .w-zr-w{margin-top:2px;font-size:12px;}
  .w-zr-ak{margin-top:4px;gap:0 12px;}
  .w-zr-ak .gxf-more{min-height:40px;font-size:13px;}
  html[data-wyglad="2"] .w-zr-ak .w-odkryj{min-height:40px;padding:0 14px 0 10px;font-size:11px;}
}

/* ---- 7 · storyboard: 4 kadry szkicu z numerem sceny ---- */
.w-sb{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,24px);}
.w-sb.n3{grid-template-columns:repeat(3,minmax(0,1fr));}
.w-sb-k{min-width:0;}
.w-sb-kadr{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:#0B0B0C;}
.w-sb-sc{position:absolute;top:10px;left:12px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--acc-t,var(--acc));}
.w-sb-n{font-size:clamp(56px,min(7.4vw,10.4vh),120px);font-weight:900;line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.2);}
.w-sb-h{margin-top:clamp(10px,1.8vh,16px);font-size:clamp(17px,min(1.8vw,2.7vh),24px);font-weight:900;line-height:1.15;letter-spacing:-.02em;color:#fff;text-wrap:balance;}
@media(max-width:860px){
  .w-sb{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vh,18px) 12px;}
  .w-sb-kadr{aspect-ratio:16/9;border-radius:8px;}
  .w-sb-sc{top:7px;left:9px;font-size:9px;}
  .w-sb-n{font-size:clamp(40px,min(12vw,6vh),56px);}
  .w-sb-h{margin-top:8px;font-size:16px;}
}

/* ---- 8 · cennik: dwa bilety (pakiety), wyróżniony z wystającą plakietką, reszta jednym wierszem ---- */
.w-bilety{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,24px);padding-top:14px;}
.w-bil-k{position:relative;min-width:0;background:#1D1D1F;border-radius:16px;padding:clamp(24px,4vh,40px) clamp(20px,2.6vw,36px);}
.w-bil-k.is-top{box-shadow:inset 0 0 0 1px rgba(230,184,0,.55);}
.w-bil-b{position:absolute;top:-12px;left:clamp(20px,2.6vw,36px);height:26px;}
.w-bil-n{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.w-bil-c{margin-top:clamp(8px,1.6vh,16px);}
.w-bil-c b{display:block;font-size:clamp(64px,min(9vw,13vh),140px);font-weight:900;line-height:.86;letter-spacing:-.05em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;}
.w-bil-k .w-bil-p{margin-top:clamp(12px,2.2vh,20px);max-width:44ch;font-size:clamp(14px,min(1.2vw,2vh),16px);line-height:1.5;color:rgba(255,255,255,.72);}
.w-bil-l{list-style:none;margin-top:clamp(12px,2.4vh,24px);}
.w-bil-r{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:clamp(10px,1.8vh,16px) 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);}
.w-bil-rc{font-size:clamp(17px,min(1.8vw,2.7vh),24px);font-weight:900;letter-spacing:-.02em;color:#fff;}
@media(max-width:860px){
  .w-bilety{gap:10px;}
  .w-bil-k{padding:clamp(20px,3vh,28px) 14px clamp(14px,2.2vh,20px);border-radius:14px;}
  .w-bil-b{left:14px;height:22px;padding:0 10px;font-size:9px;}
  .w-bil-n{font-size:10px;letter-spacing:.06em;}
  .w-bil-c b{font-size:clamp(40px,min(12.4vw,6.4vh),60px);}
  .w-bil-rc{font-size:16px;}
  .w-bil-k .w-bil-p{margin-top:10px;font-size:12px;line-height:1.45;}
}
@media(max-width:860px) and (max-height:720px){.js .w-bil-k .w-bil-p{display:none;}}


.w-pop .w-afisz,.w-pop .w-sl,.w-pop .w-mt,.w-pop .w-sb,.w-pop .w-bilety,.w-pop .w-bil-l{display:block;border:0;padding:0;margin:0;max-width:none;text-align:left;}
.w-pop .w-af-i,.w-pop .w-sl-i,.w-pop .w-mt-r,.w-pop .w-sb-k,.w-pop .w-bil-k,.w-pop .w-bil-r{display:block;position:relative;padding:18px 0;border:0;border-top:1px solid rgba(255,255,255,.1);background:none;border-radius:0;box-shadow:none;}
.w-pop .w-af-i:first-child,.w-pop .w-sl-i:first-child,.w-pop .w-mt-r:first-child,.w-pop .w-sb-k:first-child,.w-pop .w-bil-k:first-child{border-top:0;}
.w-pop .w-af-h,.w-pop .w-sl-cz,.w-pop .w-mt-h,.w-pop .w-sb-h,.w-pop .w-bil-n{font-size:clamp(17px,4vw,20px)!important;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:#fff;text-transform:none;}
.w-pop .w-af-p,.w-pop .w-sl-dc,.w-pop .w-zp-p,.w-pop .w-mt-p,.w-pop .w-sb-p,.w-pop .w-bil-p,.w-pop .w-af .gxf-more{display:block;margin-top:8px;}
.w-pop .w-sl-nr,.w-pop .w-sb-kadr,.w-pop .w-bil-b{display:none;}
.w-pop .w-bil-k .w-bil-p,.w-pop .w-bil-r .w-bil-p{display:block;margin-top:8px;max-width:none;font-size:15px;line-height:1.6;color:rgba(255,255,255,.64);}
.w-pop .w-sl-u{display:block;}
.w-pop .w-mt-tor{margin-bottom:10px;max-width:420px;}
.w-pop .w-mt-c{opacity:1!important;transform:none!important;}
.w-pop .w-mt-g{display:inline-flex;margin-top:8px;}
.w-pop .w-bil-c b{font-size:clamp(36px,9vw,52px);}
.w-pop .w-bil-rc{margin-top:4px;}
.w-pop .w-zp{display:block;margin-top:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);}
.w-pop .w-zp-l{margin-top:12px;}
.w-pop .w-pl-p,.w-pop .w-pl-r,.w-pop .w-zr-p{margin-top:12px;font-size:16px;color:rgba(255,255,255,.78);}
/* niski telefon (375×667): zaplecze tylko w „+ Odkryj”, ciaśniejszy montaż */
@media(max-width:860px) and (max-height:720px){
  html[data-wyglad="2"] .w-slownik .w-zp{display:none;}
  html[data-wyglad="2"] .w-sl{gap:28px 10px;}
  html[data-wyglad="2"] .w-mt-r{gap:4px 10px;padding:6px 0;}
  html[data-wyglad="2"] .w-montaz .w-glowa{margin-bottom:14px;}
  html[data-wyglad="2"] .w-mt-c{min-height:24px;}
}


@media(prefers-reduced-motion:reduce){.js .w-montaz .w-mt-c,.js .w-plansza .w-pl-k{opacity:1!important;transform:none!important;transition:none!important;}.w-kino .kino-ekran img{transition:none!important;}}


.w-bil-c .w-bil-dop{display:block;margin-top:10px;font-size:clamp(12px,min(1.1vw,1.8vh),14px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.w-bil-rc .w-bil-dop{margin-left:8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);vertical-align:.2em;white-space:nowrap;}
html[lang="nl"][data-wyglad="2"] .w-lepki .gxf-h2{font-size:clamp(40px,min(4.8vw,9vh),70px);}


/* 04.11 T88 (6l): G|LAB używa tego samego przewodu i kulki co SAAS (zmienne, margines na przewód, tor) — kolor z --acc filaru (#E6B800) */
.gxf-saas,.gxf-lab{--s-g:clamp(16px,5vw,40px);--s-gl:var(--s-g);--s-od:24px;--s-sz:rgba(255,255,255,.18);--s-ez:cubic-bezier(.16,1,.3,1);--s-io:cubic-bezier(.65,0,.35,1);}
@media(max-width:860px){.gxf-saas,.gxf-lab{--s-gl:34px;--s-od:20px;}}
html[data-wyglad="2"] body.gxf-saas .gxf-wrap{padding-top:0;}
.gxf-saas .gxf-flow,.gxf-lab .gxf-flow{position:relative;overflow-y:clip;}   /* 02.11: tor przyklejonego czoła nie wydłuża strony */
html[data-wyglad="2"] .gxf-saas .gxf-flow>.w-sec,html[data-wyglad="2"] .gxf-lab .gxf-flow>.w-sec:not(#start){padding-left:max(var(--s-gl),calc(50vw - 590px + var(--s-gl)));}   /* 6l: hero LAB = 1:1 z makiety A (bez marginesu na przewód; przewód zaczyna się pod rysunkiem) */
/* szczegóły tylko w „+ Odkryj” (bez JS widać wszystko) */
.js .w-s-gek-det,.js .w-s-roz-p,.js .w-s-ok-det,.js .w-s-zac-p,.js .w-s-cen-p{display:none;}

/* ---- przewód główny: rysuje się za przewijaniem (--p 0…1 z JS), bez JS narysowany cały ---- */
.w-s-bus{position:absolute;z-index:0;top:0;bottom:0;left:calc(var(--s-gl) - var(--s-g) - var(--s-od) - 1px);width:2px;pointer-events:none;}
.w-s-bus::before{content:"";position:absolute;inset:0;border-radius:2px;background:var(--acc);clip-path:inset(0 0 calc((1 - var(--p,1)) * 100%) 0);}
/* 02.11 Dawid: „strasznie podskakuje ta kulka prowadząca z linią niebieską w trakcie scrolla” — kulka i czoło linii nie są już ustawiane skryptem
   przy każdym kroku: przyklejona (sticky) czarna zasłona z kulką stoi na 62 % ekranu i przykrywa przewód poniżej; przesuwa ją sama przeglądarka.
   Tor zasłony = przewód + 1 ekran, żeby przy końcu przewodu zasłona zjechała pod linię, a nie wjechała w nią. */
.w-s-tor,.w-s-czolo{display:none;}
.js .w-s-bus::before{clip-path:none;}
.js .w-s-tor{display:block;position:absolute;left:-3px;top:0;width:8px;height:calc(100% + 100vh);}
.js .w-s-czolo{display:block;position:sticky;top:62vh;width:8px;height:100vh;background:#000;transition:opacity .4s;}
.w-s-czolo b{position:absolute;left:50%;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--acc);opacity:0;transition:opacity .3s;}
.js .w-s-bus.w-plynie .w-s-czolo b{opacity:1;}
.js .w-s-bus.w-koniec .w-s-czolo{opacity:0;}
/* węzeł na przewodzie + odgałęzienie do etykiety (kreska etykiety jest dalszym ciągiem przewodu) */
.gxf-saas .gxf-flow .gxf-k{position:relative;}
.gxf-saas .gxf-flow .gxf-k::before{content:"";position:absolute;top:50%;right:100%;width:var(--s-od);height:2px;margin-top:-1px;background:var(--acc);transform-origin:left;transition:transform .4s var(--s-ez);}
.gxf-saas .gxf-flow .gxf-k::after{content:"";position:absolute;top:50%;left:calc(-1 * var(--s-od) - 6px);width:12px;height:12px;margin-top:-6px;box-sizing:border-box;border-radius:50%;border:2px solid var(--acc);background:var(--acc);transition:background .3s;}
.gxf-saas .gxf-flow .gxf-k i{transition:transform .6s var(--s-ez) .3s;}
.js .gxf-saas .gxf-flow .w-sec:not(.w-zas) .gxf-k::before,.js .gxf-saas .gxf-flow .w-sec:not(.w-zas) .gxf-k i{transform:scaleX(0);}
.js .gxf-saas .gxf-flow .w-sec:not(.w-zas) .gxf-k::after{background:#000;}
/* 6l G|LAB: te same węzły na przewodzie (6q: warsztaty → jak → sklep → Zleć zbudowanie → pytania → jak to się łączy); start = pierścień przy rysunku w hero */
.gxf-lab .gxf-flow>:is(#inaczej,#jak-to-idzie,#shop,#build,#pytania,#most) .gxf-k{position:relative;}
.gxf-lab .gxf-flow>:is(#inaczej,#jak-to-idzie,#shop,#build,#pytania,#most) .gxf-k::before{content:"";position:absolute;top:50%;right:100%;width:var(--s-od);height:2px;margin-top:-1px;background:var(--acc);transform-origin:left;transition:transform .4s var(--s-ez);}
.gxf-lab .gxf-flow>:is(#inaczej,#jak-to-idzie,#shop,#build,#pytania,#most) .gxf-k::after{content:"";position:absolute;top:50%;left:calc(-1 * var(--s-od) - 6px);width:12px;height:12px;margin-top:-6px;box-sizing:border-box;border-radius:50%;border:2px solid var(--acc);background:var(--acc);transition:background .3s;}
.gxf-lab .gxf-flow>:is(#inaczej,#jak-to-idzie,#shop,#build,#pytania,#most) .gxf-k i{transition:transform .6s var(--s-ez) .3s;}
.js .gxf-lab .gxf-flow>:is(#inaczej,#jak-to-idzie,#shop,#build,#pytania,#most):not(.w-zas) .gxf-k::before,.js .gxf-lab .gxf-flow>:is(#inaczej,#jak-to-idzie,#shop,#build,#pytania,#most):not(.w-zas) .gxf-k i{transform:scaleX(0);}
.js .gxf-lab .gxf-flow>:is(#inaczej,#jak-to-idzie,#shop,#build,#pytania,#most):not(.w-zas) .gxf-k::after{background:#000;}
.gxf-lab .w-s-bus::after{content:"";position:absolute;z-index:2;left:50%;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;box-sizing:border-box;border-radius:50%;border:2px solid var(--acc);background:radial-gradient(circle,var(--acc) 0 3.5px,#000 4px);}
/* 04.11 T88 (6q, Dawid 15:56 z iPhone'a): przewód LAB idzie przez całą podstronę (węzły też na „Pytania” i „Jak to się łączy”). Tło podstron ma siatkę
   i ziarno (.w-tlo), nie czyste #000, więc czarna zasłona pod kulką była widać jako ciemny pasek od kulki w dół. LAB: bez zasłony — kreska rośnie W GÓRĘ
   od kulki (doczepiona do przyklejonego czoła, przesuwa ją sama przeglądarka, jak od 02.11, bez podskakiwania), tor = długość przewodu, więc kulka staje
   na ostatnim węźle; nad startem kreskę przycina tor (overflow:clip). Cały przewód (::before) wraca na samym dole strony.
   Bez overflow:clip (stare przeglądarki) i przy „ogranicz ruch” zostaje stary sposób.
   6r (04.11, Dawid: „a co SAAS? Tam coś robione było?”): ten sam ciemny pas był pod kulką na SAAS — SAAS dostaje ten sam sposób (te same reguły). */
@supports (overflow:clip){@media (prefers-reduced-motion:no-preference){
  .js :is(.gxf-lab,.gxf-saas) .w-s-tor{height:100%;overflow:clip;}
  .js :is(.gxf-lab,.gxf-saas) .w-s-czolo{height:0;background:none;}
  .js :is(.gxf-lab,.gxf-saas) .w-s-czolo::before{content:"";position:absolute;left:3px;bottom:0;width:2px;height:var(--s-dl,20000px);border-radius:2px;background:var(--acc);}
  .js :is(.gxf-lab,.gxf-saas) .w-s-bus::before{opacity:0;transition:opacity .4s;}
  .js :is(.gxf-lab,.gxf-saas) .w-s-bus.w-koniec::before{opacity:1;}
  .js :is(.gxf-lab,.gxf-saas) .w-s-bus.w-koniec .w-s-czolo{opacity:1;}
}}


/* ---- 0 · wejście = zasilanie: zacisk na początku przewodu, G|SAAS, pytanie, jedna pigułka ---- */
html[data-wyglad="2"] .w-s0{align-items:flex-start;}
.w-s0-t,.w-s0-ak{min-width:0;}
.w-s0 .gxf-crumb{position:relative;}
.w-s0 .gxf-crumb::before{content:"";position:absolute;top:50%;left:calc(-1 * var(--s-od) - 10px);width:20px;height:20px;margin-top:-10px;box-sizing:border-box;border-radius:50%;border:2px solid var(--acc);background:#000;}
.w-s0 .gxf-crumb::after{content:"";position:absolute;top:50%;left:calc(-1 * var(--s-od) - 4px);width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--acc);}
.w-s0 .w-s0-hak{margin-top:clamp(22px,4vh,44px);font-size:clamp(28px,min(4vw,5.8vh),56px);max-width:20ch;}
.w-s0-ak .gxf-lead{margin-top:clamp(14px,2.6vh,24px);font-size:clamp(15px,min(1.35vw,2.1vh),18px);max-width:56ch;}
.w-s0-ak .gxf-actions{margin-top:clamp(18px,3.4vh,32px);}
.w-s0-ak .gxf-ctap{max-width:46ch;}
.w-s0 .w-s0-wm{position:absolute;z-index:-1;right:max(var(--s-g),calc(50vw - 590px + var(--s-g)));bottom:calc(var(--w-dol) + 8px);font-weight:900;font-size:clamp(110px,min(14vw,20vh),210px);line-height:.8;letter-spacing:-.02em;color:rgba(255,255,255,.035);white-space:nowrap;pointer-events:none;}
@media(max-width:1100px){.w-s0 .w-s0-wm{display:none;}}
@media(min-width:861px) and (max-height:800px){html[data-wyglad="2"] .w-s0-ak .gxf-ctap{display:none;}}

/* ---- 1 · Mr. GEK: wielka nazwa, hasło, okno żywej aplikacji, jedna pigułka ---- */
html[data-wyglad="2"] .w-s-gek{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-content:center;align-items:center;gap:clamp(24px,4vw,64px);}
.w-s-gek-t{min-width:0;}
html[data-wyglad="2"] .w-s-gek .w-s-gek-n{margin-top:0;font-size:clamp(48px,min(7.4vw,11.4vh),116px);line-height:.9;letter-spacing:-.045em;white-space:nowrap;}
.w-s-gek-h{margin-top:clamp(14px,2.6vh,24px);font-size:clamp(20px,min(2.2vw,3.4vh),30px);font-weight:800;line-height:1.18;letter-spacing:-.025em;color:#fff;max-width:20ch;text-wrap:balance;}
.w-s-gek-h span{color:rgba(255,255,255,.45);}
.w-s-gek-det .gxf-p{margin-top:16px;max-width:52ch;}
.w-s-pkt{list-style:none;margin-top:12px;display:grid;gap:8px;}
.w-s-pkt li{position:relative;padding-left:24px;font-size:15px;font-weight:600;line-height:1.5;color:rgba(255,255,255,.8);}
.w-s-pkt li::before{content:"";position:absolute;left:0;top:.7em;width:12px;height:2px;border-radius:2px;background:var(--acc);}
.w-s-czat{justify-self:end;display:flex;flex-direction:column;width:100%;max-width:640px;height:clamp(260px,calc(var(--w-wys) * .56),420px);border-radius:16px;overflow:hidden;background:#0A0A0B;
  border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:border-color .3s;}
@media(hover:hover){.w-s-czat:hover{border-color:rgba(255,255,255,.32);}}
.w-s-czat-bar{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#141416;border-bottom:1px solid rgba(255,255,255,.08);}
.w-s-czat-bar i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);}
.w-s-czat-bar span{margin-left:10px;font-size:11px;font-weight:700;letter-spacing:.02em;color:rgba(255,255,255,.5);white-space:nowrap;}
.w-s-czat-in{flex:1;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.46fr);}
.w-s-czat-rozm{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;min-width:0;padding:clamp(16px,2.6vh,24px);}
.w-s-czat-kto{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.w-s-czat-b{display:block;max-width:92%;padding:14px 18px;border-radius:18px 18px 18px 4px;background:#1D1D1F;border:1px solid rgba(255,255,255,.1);font-size:clamp(15px,min(1.3vw,2.2vh),18px);font-weight:600;line-height:1.4;}
.w-s-czat-pole{align-self:stretch;display:flex;align-items:center;gap:12px;height:48px;margin-top:clamp(12px,3.4vh,40px);padding:0 6px 0 18px;border-radius:100px;background:#141416;border:1px solid rgba(255,255,255,.14);font-size:14px;font-weight:500;color:rgba(255,255,255,.45);}
.w-s-czat-pole>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.w-s-czat-pole i{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#fff;}
.w-s-czat-pole svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.w-s-czat-kosz{display:flex;flex-direction:column;gap:10px;min-width:0;padding:clamp(16px,2.6vh,24px) 16px;border-left:1px solid rgba(255,255,255,.08);}
.w-s-czat-kosz b{font-size:13px;font-weight:800;color:#fff;}
.w-s-czat-kosz span{font-size:12px;font-weight:500;line-height:1.5;color:rgba(255,255,255,.45);}
/* puste miejsca w koszyku: tu „ląduje to, o czym rozmawiacie” (żywy koszyk) */
.w-s-czat-kosz::after{content:"";display:block;height:clamp(96px,14vh,128px);margin-top:4px;border-radius:10px;border:1px dashed rgba(255,255,255,.16);}
.js .w-s-gek .w-s-czat-kto,.js .w-s-gek .w-s-czat-b{opacity:0;transform:translateY(10px);transition:opacity .6s var(--s-ez),transform .6s var(--s-ez);}
.js .w-s-gek.in .w-s-czat-kto{opacity:1;transform:none;transition-delay:.7s;}
.js .w-s-gek.in .w-s-czat-b{opacity:1;transform:none;transition-delay:.9s;}

/* ---- 2 · odwrócenie = przełącznik schodowy: „ręcznie · dziś” ↔ „samo · z systemem”, prąd do sześciu robót ---- */
html[data-wyglad="2"] .w-s-odw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:center;align-items:center;gap:clamp(24px,5vw,80px);}
.w-s-prz-t{min-width:0;}
.w-s-prz-w0{font-size:clamp(16px,min(1.5vw,2.4vh),20px);font-weight:500;line-height:1.5;color:rgba(255,255,255,.55);max-width:40ch;text-wrap:pretty;}
.w-s-prz-q{margin-top:clamp(10px,2vh,18px);font-size:clamp(30px,min(4.2vw,6.4vh),60px);font-weight:900;line-height:1.04;letter-spacing:-.04em;color:#fff;text-wrap:balance;max-width:16ch;}
.w-s-prz{position:relative;width:100%;max-width:540px;justify-self:center;margin:0;}
@media(min-width:1100px) and (min-height:760px){.w-s-prz{zoom:1.3;}}
@media(min-width:861px) and (max-width:1099px),(min-width:1100px) and (max-height:759px){.w-s-prz{zoom:1.12;}}
.w-s-prz-g{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:start;}
.w-s-prz-e{display:flex;flex-direction:column;gap:4px;padding-top:6px;min-width:0;color:rgba(255,255,255,.38);transition:color .4s;}
.w-s-prz-e b{font-size:clamp(16px,min(1.6vw,2.6vh),22px);font-weight:900;line-height:1.1;letter-spacing:-.02em;}
.w-s-prz-e span{font-size:11px;font-weight:800;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;}
.w-s-prz-a{align-items:flex-end;text-align:right;padding-right:4px;}
.w-s-prz-b{align-items:flex-start;text-align:left;padding-left:4px;color:#fff;}
.w-s-prz-b span{color:var(--acc-t,var(--acc));}
.w-s-prz-k{position:relative;display:block;width:120px;height:76px;margin:0;padding:0;border:0;border-radius:12px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.w-s-prz-k i{position:absolute;display:block;}
.w-s-prz-ka,.w-s-prz-kb{top:11px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid;transition:border-color .4s,background .4s;}
.w-s-prz-ka{left:9px;border-color:rgba(255,255,255,.4);background:#000;}
.w-s-prz-kb{right:9px;border-color:var(--acc);background:var(--acc);}
.w-s-prz-o{left:53px;top:59px;width:14px;height:14px;border-radius:50%;background:var(--acc);transition:background .4s;}
.w-s-prz-n{left:59px;top:6px;width:2px;height:60px;border-radius:2px;background:var(--acc);transform-origin:50% 100%;transform:rotate(42.5deg);transition:transform .55s var(--s-io),background .4s;}
.w-s-prz-l{list-style:none;position:relative;display:grid;gap:12px;padding-top:clamp(16px,2.6vh,24px);}
.w-s-prz-l::before,.w-s-prz-l::after{content:"";position:absolute;left:50%;top:-10px;bottom:20px;width:2px;margin-left:-1px;border-radius:2px;}
.w-s-prz-l::before{background:var(--s-sz);}
.w-s-prz-l::after{background:var(--acc);transform-origin:top;transition:transform .5s var(--s-io) .35s;}
.w-s-prz-r{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;height:40px;}
.w-s-prz-w{position:relative;height:2px;background:var(--s-sz);}
.w-s-prz-w::before{content:"";position:absolute;inset:0;background:var(--acc);transition:transform .45s var(--s-ez);transition-delay:calc(.75s + var(--i,0) * .18s);}
.w-s-prz-w::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--acc);transition:background .3s;transition-delay:calc(.7s + var(--i,0) * .18s);}
.w-s-prz-c{display:inline-flex;align-items:center;gap:8px;max-width:100%;height:40px;padding:0 14px;border-radius:100px;background:#1D1D1F;border:1px solid rgba(255,255,255,.12);
  font-size:clamp(13px,min(1.1vw,1.9vh),15px);font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;transition:color .3s;}
.w-s-prz-cl{justify-self:end;}
.w-s-prz-cr{justify-self:start;}
.w-s-prz-c i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);transition:background .3s;transition-delay:calc(.9s + var(--i,0) * .18s);}
.w-s-prz-r .w-s-prz-c{transition-delay:calc(.9s + var(--i,0) * .18s);}
.w-s-prz-r .w-s-prz-c i{transition-delay:inherit;}
.w-s-prz-cap{margin-top:clamp(14px,2.4vh,22px);text-align:center;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-t,var(--acc));transition:color .3s;}
/* stan „ręcznie” (JS ustawia na start, przełącza na „samo”, gdy przełącznik jest w widoku; klik przełącza z powrotem) */
.w-s-reka .w-s-prz-a{color:#fff;}
.w-s-reka .w-s-prz-a span{color:rgba(255,255,255,.6);}
.w-s-reka .w-s-prz-b,.w-s-reka .w-s-prz-b span{color:rgba(255,255,255,.38);}
.w-s-reka .w-s-prz-ka{border-color:#fff;background:#fff;}
.w-s-reka .w-s-prz-kb{border-color:rgba(10,132,255,.45);background:#000;}
.w-s-reka .w-s-prz-o{background:#8E8E93;}
.w-s-reka .w-s-prz-n{transform:rotate(-42.5deg);background:#8E8E93;}
.w-s-reka .w-s-prz-l::after{transform:scaleY(0);transition-delay:0s;}
.w-s-reka .w-s-prz-w::before{transform:scaleX(0);transition-delay:0s;}
.w-s-reka .w-s-prz-w::after,.w-s-reka .w-s-prz-c i{background:#48484A;transition-delay:0s;}
.w-s-reka .w-s-prz-c{color:rgba(255,255,255,.55);transition-delay:0s;}
.w-s-reka .w-s-prz-cap,.w-s-niepelne .w-s-prz-cap{color:rgba(255,255,255,.5);}
@media(hover:hover){.w-s-prz-k:hover .w-s-prz-o{transform:scale(1.15);}}
.w-s-prz-o{transition:background .4s,transform .2s;}

/* ---- 3 · co robię = rozdzielnica: szyna z przewodu głównego, moduły (rozmiar = waga usługi), dźwignie wskakują na ON ---- */
.w-s-roz{position:relative;padding-top:clamp(18px,3vh,28px);}
.w-s-roz::before{content:"";position:absolute;top:0;left:calc(-1 * var(--s-od));right:0;height:2px;margin-top:-1px;background:var(--acc);transform-origin:left;transition:transform .9s var(--s-ez) .2s;}
.w-s-roz::after{content:"";position:absolute;top:0;left:calc(-1 * var(--s-od) - 6px);width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--acc);}
.w-s-roz-lista{list-style:none;display:flex;align-items:flex-start;gap:clamp(8px,1vw,12px);}
.w-s-mod{position:relative;flex:1 1 0;min-width:0;}
.w-s-mod-l{flex-grow:3;}
.w-s-mod-m{flex-grow:2;}
.w-s-mod::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:clamp(18px,3vh,28px);margin-left:-1px;background:var(--acc);transform-origin:top;transition:transform .35s var(--s-ez);transition-delay:calc(.55s + var(--i,0) * .12s);}
.w-s-roz-a{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,16px);color:#fff;text-decoration:none;}
.w-s-roz-b{position:relative;display:block;height:clamp(96px,min(12vw,16vh),156px);border-radius:12px;background:#1D1D1F;border:1px solid rgba(255,255,255,.07);transition:border-color .3s;}
a.w-s-roz-a:hover .w-s-roz-b{border-color:rgba(255,255,255,.28);}
.w-s-roz-nr{position:absolute;left:clamp(10px,1.2vw,16px);top:clamp(10px,1.4vh,16px);font-weight:900;line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums;}
.w-s-mod-l .w-s-roz-nr{font-size:clamp(48px,min(6vw,8.4vh),92px);}
.w-s-mod-m .w-s-roz-nr{font-size:clamp(36px,min(4.2vw,6vh),64px);}
.w-s-mod-s .w-s-roz-nr{font-size:clamp(26px,min(2.8vw,4vh),42px);}
.w-s-roz-dz{position:absolute;right:clamp(10px,1.2vw,16px);bottom:clamp(10px,1.4vh,16px);width:22px;height:44px;box-sizing:border-box;border-radius:7px;background:#000;border:1px solid rgba(255,255,255,.14);}
.w-s-roz-dz i{position:absolute;left:3px;right:3px;top:3px;height:18px;border-radius:4px;background:var(--acc);transition:transform .45s var(--s-io),background .3s;transition-delay:calc(.75s + var(--i,0) * .12s);}
.js .w-s-rozd:not(.in) .w-s-roz::before{transform:scaleX(0);}
.js .w-s-rozd:not(.in) .w-s-mod::before{transform:scaleY(0);}
.js .w-s-rozd:not(.in) .w-s-roz-dz i{transform:translateY(18px);background:#48484A;}
.w-s-roz-h{font-weight:900;line-height:1.12;letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.w-s-mod-l .w-s-roz-h{font-size:clamp(20px,min(2.2vw,3.4vh),32px);}
.w-s-mod-m .w-s-roz-h{font-size:clamp(16px,min(1.6vw,2.6vh),22px);}
.w-s-mod-s .w-s-roz-h{font-size:clamp(14px,min(1.15vw,2vh),16px);font-weight:800;color:rgba(255,255,255,.7);}
.w-s-roz-go{color:var(--acc-t,var(--acc));font-weight:800;white-space:nowrap;}

/* ---- 4 · zrobione = okna działających aplikacji, od największego do najmniejszego; status pod oknem ---- */
.w-s-ok-lista{list-style:none;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,5.2fr) minmax(0,3.4fr) minmax(0,3.4fr);grid-template-rows:auto auto auto;column-gap:clamp(12px,1.6vw,24px);}
.w-s-ok-i{display:grid;grid-row:span 3;grid-template-rows:subgrid;min-width:0;}
.w-s-ok-r{align-self:end;display:block;border-radius:12px;overflow:hidden;background:#0A0A0B;border:1px solid rgba(255,255,255,.14);color:inherit;text-decoration:none;transition:border-color .3s;}
@media(hover:hover){a.w-s-ok-r:hover{border-color:rgba(255,255,255,.34);}}
.w-s-ok-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#141416;border-bottom:1px solid rgba(255,255,255,.08);}
.w-s-ok-bar i{flex:none;display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);}
.w-s-ok-bar span{min-width:0;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:700;color:rgba(255,255,255,.5);}
.w-s-ok-ekran{display:block;aspect-ratio:16/10;overflow:hidden;background:#111;}
.w-s-ok-ekran img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.w-s-ok-ekran .gxf-ph{min-height:0;height:100%;}
.w-s-ok-t{min-width:0;padding-top:clamp(10px,1.8vh,16px);}
.w-s-ok-h{font-weight:900;line-height:1.15;letter-spacing:-.02em;color:#fff;text-wrap:balance;}
.w-s-ok-h a{color:inherit;text-decoration:none;}
.w-s-ok-h a span{color:var(--acc-t,var(--acc));font-weight:800;}
@media(hover:hover){.w-s-ok-h a:hover{text-decoration:underline;text-underline-offset:4px;}}
.w-s-ok-l .w-s-ok-h{font-size:clamp(20px,min(2vw,3.2vh),28px);}
.w-s-ok-m .w-s-ok-h{font-size:clamp(16px,min(1.5vw,2.4vh),20px);}
.w-s-ok-s .w-s-ok-h{font-size:clamp(13px,min(1.05vw,1.9vh),15px);font-weight:800;}
.w-s-ok-st{display:flex;align-items:baseline;gap:8px;margin-top:6px;font-size:12px;font-weight:700;line-height:1.4;color:rgba(255,255,255,.6);}
.w-s-ok-st i{flex:none;display:block;width:7px;height:7px;border-radius:50%;background:var(--acc);transform:translateY(-1px);}
.w-s-ok-s .w-s-ok-st{font-size:11px;}
.js .w-s-okna .w-s-ok-i{opacity:0;transform:translateY(16px);transition:opacity .7s var(--s-ez),transform .7s var(--s-ez);transition-delay:calc(var(--i,0) * .12s + .15s);}
.js .w-s-okna.in .w-s-ok-i{opacity:1;transform:none;}

/* ---- 5 · jak to idzie = listwa zaciskowa: przewód przez 4 zaciski, lampka na końcu zapala się na „start” ---- */
.w-s-zac{--zh:clamp(84px,min(10vw,13vh),124px);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,2.4vw,32px);align-items:start;}
.w-s-zac::before,.w-s-zac::after{content:"";position:absolute;left:calc(-1 * var(--s-od));right:16px;top:calc(var(--zh) / 2);height:2px;margin-top:-1px;border-radius:2px;}
.w-s-zac::before{background:var(--s-sz);}
.w-s-zac::after{background:var(--acc);transform-origin:left;transition:transform 1.5s var(--s-io) .3s;}
.w-s-zac-l{list-style:none;position:relative;z-index:1;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(16px,2.4vw,32px);}
.w-s-zac-i{min-width:0;}
.w-s-zac-z{position:relative;display:flex;align-items:center;justify-content:center;height:var(--zh);border-radius:12px;background:#1D1D1F;border:1px solid rgba(255,255,255,.08);}
.w-s-zac-sr{position:absolute;top:10px;right:10px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);}
.w-s-zac-sr::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:1.5px;margin:-.75px 0 0 -4px;background:rgba(255,255,255,.3);transform:rotate(-45deg);}
.w-s-zac-n{font-size:clamp(48px,min(6vw,8.6vh),88px);font-weight:900;line-height:.8;letter-spacing:-.05em;color:#fff;transition:color .5s;transition-delay:calc(.45s + var(--i,0) * .32s);}
.w-s-zac-h{margin-top:clamp(10px,1.8vh,16px);font-size:clamp(16px,min(1.6vw,2.6vh),22px);font-weight:900;line-height:1.15;letter-spacing:-.02em;color:#fff;text-wrap:balance;}
.w-s-zac-lamp{position:relative;z-index:1;display:block;width:36px;height:36px;margin-top:calc(var(--zh) / 2 - 18px);box-sizing:border-box;border-radius:50%;border:2px solid var(--acc);background:var(--acc);transition:background .4s 1.7s;}
.w-s-zac-lamp::before,.w-s-zac-lamp::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:2px;margin:-1px 0 0 -12px;background:#000;transform:rotate(45deg);transition:background .4s 1.7s;}
.w-s-zac-lamp::after{transform:rotate(-45deg);}
.js .w-s-jak:not(.in) .w-s-zac::after{transform:scaleX(0);}
.js .w-s-jak:not(.in) .w-s-zac-n{color:rgba(255,255,255,.2);}
.js .w-s-jak:not(.in) .w-s-zac-lamp{background:#000;}
.js .w-s-jak:not(.in) .w-s-zac-lamp::before,.js .w-s-jak:not(.in) .w-s-zac-lamp::after{background:var(--acc);}
.js .w-s-jak .w-s-zac-i{opacity:0;transform:translateY(12px);transition:opacity .6s var(--s-ez),transform .6s var(--s-ez);transition-delay:calc(var(--i,0) * .12s + .1s);}
.js .w-s-jak.in .w-s-zac-i{opacity:1;transform:none;}
/* 02.11 Dawid: „animacja 1,2,3,4 pojawia się jak bug nagle, zamiast lecieć razem z tą linią i kulą z lewej strony”.
   Układ pionowy (telefon, JS daje .w-sc): przewód przez zaciski idzie za kulką przewodu głównego (--zp), kafel i jego numer
   zapalają się, gdy kulka do niego dojdzie (.w-zas), lampka na końcu — gdy dojdzie do lampki (.w-lamp). Na PC bez zmian. */
.js .gxf-saas .w-s-jak .w-s-zac.w-sc::after{transform:scaleY(var(--zp,0));transition:none;}
.js .gxf-saas .w-s-jak .w-s-zac.w-sc .w-s-zac-i{opacity:.22;transform:translateY(8px);transition-delay:0s;}   /* blado, nie znika — bez czarnej dziury pod jedynką */
.js .gxf-saas .w-s-jak .w-s-zac.w-sc .w-s-zac-i.w-zas{opacity:1;transform:none;}
.js .gxf-saas .w-s-jak .w-s-zac.w-sc .w-s-zac-n{color:rgba(255,255,255,.2);transition-delay:0s;}
.js .gxf-saas .w-s-jak .w-s-zac.w-sc .w-zas .w-s-zac-n{color:#fff;}
.js .gxf-saas .w-s-jak .w-s-zac.w-sc .w-s-zac-lamp{background:#000;transition-delay:0s;}
.js .gxf-saas .w-s-jak .w-s-zac.w-sc .w-s-zac-lamp::before,.js .gxf-saas .w-s-jak .w-s-zac.w-sc .w-s-zac-lamp::after{background:var(--acc);transition-delay:0s;}
.js .gxf-saas .w-s-jak .w-s-zac.w-sc.w-lamp .w-s-zac-lamp{background:var(--acc);}
.js .gxf-saas .w-s-jak .w-s-zac.w-sc.w-lamp .w-s-zac-lamp::before,.js .gxf-saas .w-s-jak .w-s-zac.w-sc.w-lamp .w-s-zac-lamp::after{background:#000;}

/* ---- 6 · cennik = trzy obwody z jednej szyny, jeden pod drugim (schemat rozdzielni); ceny wielkie i równe, wyróżniony z plakietką ---- */
.w-s-cennik{--cp:clamp(28px,3vw,40px);--cg:clamp(12px,2vh,20px);}
.w-s-cen-l{list-style:none;display:grid;gap:var(--cg);max-width:980px;padding-left:var(--cp);}
.w-s-cen-k{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;min-width:0;padding:clamp(18px,3vh,28px) clamp(20px,2.4vw,36px);border-radius:16px;background:#1D1D1F;}
.w-s-cen-k.is-top{box-shadow:inset 0 0 0 1px var(--acc);}
/* szyna: odcinek od środka karty do środka następnej + odgałęzienie do karty; pierwsza karta dostaje dojście od przewodu głównego */
/* 02.11 Dawid: „nie dorysowana linia do ostatniej ceny” — karty mają różne wysokości (PREMIUM na telefonie wyższa), więc odcinek liczony
   z wysokości własnej karty nie dochodził do środka następnej. Teraz każda karta rysuje swój kawałek szyny: od połowy przerwy nad sobą
   do połowy przerwy pod sobą (pierwsza od swojego środka, ostatnia do swojego środka) — szyna ciągła przy każdej wysokości kart */
.w-s-cen-k::before{content:"";position:absolute;left:calc(-1 * var(--cp) - 1px);top:calc(var(--cg) / -2);width:2px;height:calc(100% + var(--cg));background:var(--acc);transform-origin:top;transition:transform .4s var(--s-io);transition-delay:calc(.45s + var(--i,0) * .3s);}
.w-s-cen-k:first-child::before{top:50%;height:calc(50% + var(--cg) / 2);}
.w-s-cen-k:last-child::before{height:calc(50% + var(--cg) / 2);}
.w-s-cen-k:only-child::before{display:none;}
.w-s-cen-k::after{content:"";position:absolute;left:calc(-1 * var(--cp));top:50%;width:var(--cp);height:2px;margin-top:-1px;background:var(--acc);transform-origin:left;transition:transform .35s var(--s-ez);transition-delay:calc(.6s + var(--i,0) * .3s);}
.w-s-cen-wej{position:absolute;left:calc(-1 * var(--cp) - var(--s-od));top:50%;width:var(--s-od);height:2px;margin-top:-1px;background:var(--acc);transform-origin:left;transition:transform .35s var(--s-ez) .2s;}
.w-s-cen-wej::before{content:"";position:absolute;left:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--acc);}
.js .w-s-cennik:not(.in) .w-s-cen-k::before{transform:scaleY(0);}
.js .w-s-cennik:not(.in) .w-s-cen-k::after,.js .w-s-cennik:not(.in) .w-s-cen-wej{transform:scaleX(0);}
.w-s-cen-b{position:absolute;top:-12px;left:clamp(20px,2.4vw,36px);height:26px;}
.w-s-cen-n{display:flex;flex-direction:column;gap:6px;min-width:0;}
.w-s-cen-n b{font-size:clamp(18px,min(1.8vw,2.8vh),26px);font-weight:900;line-height:1.05;letter-spacing:-.02em;color:#fff;}
.w-s-cen-n span{font-size:12px;font-weight:800;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;color:rgba(255,255,255,.55);}
.w-s-cen-c{display:flex;flex-direction:column;align-items:flex-end;min-width:0;}
.w-s-cen-c b{display:block;font-size:clamp(34px,min(4.6vw,6.6vh),72px);font-weight:900;line-height:.9;letter-spacing:-.04em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;}
.w-s-cen-dop{display:block;margin-top:8px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);}

/* ---- „+ Odkryj” w SAAS: zwarta lista z kreskami, bez rysunków ---- */
.w-pop .w-s-gek-det,.w-pop .w-s-roz-p,.w-pop .w-s-ok-det,.w-pop .w-s-zac-p,.w-pop .w-s-cen-p{display:block;}
.w-pop .w-s-gek-det .gxf-p{margin-top:0;}
.w-pop .w-s-roz-lista,.w-pop .w-s-ok-lista,.w-pop .w-s-zac-l,.w-pop .w-s-cen-l{display:block;}
.w-pop .w-s-mod,.w-pop .w-s-ok-i,.w-pop .w-s-zac-i,.w-pop .w-s-cen-k{display:block;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);background:none;border-radius:0;box-shadow:none;opacity:1!important;transform:none!important;}
.w-pop .w-s-mod:first-child,.w-pop .w-s-ok-i:first-child,.w-pop .w-s-zac-i:first-child,.w-pop .w-s-cen-k:first-child{border-top:0;}
.w-pop .w-s-mod::before,.w-pop .w-s-cen-k::before,.w-pop .w-s-roz-b,.w-pop .w-s-ok-r,.w-pop .w-s-zac-z,.w-pop .w-s-cen-b{display:none;}
.w-pop .w-s-roz-a{display:block;}
.w-pop .w-s-roz-h,.w-pop .w-s-ok-h,.w-pop .w-s-zac-h{font-size:clamp(17px,4vw,20px)!important;font-weight:800;color:#fff;}
.w-pop .w-s-zac-h{margin-top:0;}
.w-pop .w-s-zac-h .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;color:var(--acc-t,var(--acc));}
.w-pop .w-s-ok-t{padding-top:0;}
.w-pop .w-s-ok-st{display:none;}
.w-pop .w-s-roz-p,.w-pop .w-s-ok-det .gxf-p,.w-pop .w-s-zac-p,.w-pop .w-s-cen-p{margin-top:8px;font-size:15px;}
.w-pop .w-s-cen-c b{font-size:clamp(32px,8vw,44px);}
.w-pop .w-s-cen-l{padding-left:0;}
.w-pop .w-s-cen-k::after,.w-pop .w-s-cen-wej{display:none;}
.w-pop .w-s-cen-c{align-items:flex-start;margin-top:8px;}
.w-pop .w-s-cen-n{color:#fff;}

/* ---- telefon ---- */
@media(max-width:860px){
  html[data-wyglad="2"] .w-s0 .gxf-lead,html[data-wyglad="2"] .w-s0-ak .gxf-ctap{display:none;}
  .w-s0 .w-s0-hak{font-size:clamp(28px,min(8.4vw,4.6vh),40px);}
  html[data-wyglad="2"] .w-s-gek,html[data-wyglad="2"] .w-s-odw{grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vh,28px);}
  html[data-wyglad="2"] .w-s-gek .w-s-gek-n{font-size:clamp(44px,min(14vw,7.4vh),64px);}
  .w-s-gek-h{font-size:clamp(17px,min(5vw,2.7vh),22px);}
  .w-s-czat{justify-self:stretch;height:auto;}
  .w-s-czat-in{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;}
  .w-s-czat-rozm{justify-content:flex-start;padding:14px;}
  .w-s-czat-pole{height:44px;margin-top:8px;font-size:13px;}
  .w-s-czat-pole i{width:32px;height:32px;}
  .w-s-czat-kosz{flex-direction:row;align-items:baseline;gap:10px;padding:10px 14px;border-left:0;border-top:1px solid rgba(255,255,255,.08);}
  .w-s-czat-kosz span{font-size:11px;line-height:1.35;}
  .w-s-czat-kosz::after{display:none;}
  .w-s-prz-w0{font-size:15px;}
  .w-s-prz-q{font-size:clamp(28px,min(8.4vw,4.4vh),40px);}
  .w-s-prz-r{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);height:38px;}
  .w-s-prz-c{height:38px;padding:0 12px;font-size:13px;}
  .w-s-prz-l::before,.w-s-prz-l::after{bottom:19px;}
  .w-s-prz-l{gap:10px;}
  /* rozdzielnica w pionie: moduły w rzędach, szyna przechodzi przez środek modułów */
  .w-s-roz{padding-top:0;}
  .w-s-roz::before,.w-s-roz::after{display:none;}
  .w-s-roz-lista{flex-direction:column;align-items:stretch;gap:clamp(8px,1.4vh,12px);position:relative;}
  .w-s-roz-lista::before{content:"";position:absolute;left:27px;top:0;bottom:0;width:2px;background:var(--acc);transform-origin:top;transition:transform .9s var(--s-ez) .2s;}
  .js .w-s-rozd:not(.in) .w-s-roz-lista::before{transform:scaleY(0);}
  .w-s-mod::before{display:none;}
  .w-s-roz-a{flex-direction:row;align-items:center;gap:14px;}
  .w-s-roz-b{position:relative;z-index:1;flex:none;width:56px;height:clamp(48px,min(14vw,7vh),60px);border-radius:10px;}
  .w-s-mod .w-s-roz-nr{left:8px;top:8px;font-size:22px!important;}
  .w-s-roz-dz{right:7px;bottom:7px;width:14px;height:28px;border-radius:5px;}
  .w-s-roz-dz i{left:2px;right:2px;top:2px;height:11px;border-radius:3px;}
  .js .w-s-rozd:not(.in) .w-s-roz-dz i{transform:translateY(11px);}
  .w-s-roz-t{min-width:0;}
  .w-s-mod-l .w-s-roz-h{font-size:clamp(20px,min(6vw,3vh),24px);}
  .w-s-mod-m .w-s-roz-h{font-size:clamp(16px,min(4.8vw,2.4vh),19px);}
  .w-s-mod-s .w-s-roz-h{font-size:clamp(14px,min(4.2vw,2.2vh),16px);}
  /* okna: największe na całą szerokość, trzy mniejsze w rzędzie */
  .w-s-ok-lista{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:10px;}
  .w-s-ok-i.w-s-ok-l{grid-column:1/-1;}
  .w-s-ok-l .w-s-ok-ekran{aspect-ratio:auto;height:clamp(150px,calc(var(--w-wys) - 470px),211px);}
  .w-s-ok-l .w-s-ok-t{padding-bottom:clamp(12px,2.4vh,20px);}
  .w-s-ok-m .w-s-ok-bar,.w-s-ok-s .w-s-ok-bar{height:18px;padding:0 7px;gap:3px;}
  .w-s-ok-m .w-s-ok-bar i,.w-s-ok-s .w-s-ok-bar i{width:5px;height:5px;}
  .w-s-ok-m .w-s-ok-bar span,.w-s-ok-s .w-s-ok-bar span{display:none;}
  .w-s-ok-r{border-radius:8px;}
  .w-s-ok-l .w-s-ok-h{font-size:20px;}
  .w-s-ok-m .w-s-ok-h,.w-s-ok-s .w-s-ok-h{font-size:13px;font-weight:800;}
  .w-s-ok-m .w-s-ok-st,.w-s-ok-s .w-s-ok-st{display:none;}
  .w-s-ok-t{padding-top:8px;}
  /* listwa zaciskowa w pionie: przewód z góry na dół przez zaciski, lampka pod ostatnim */
  .w-s-zac{--zh:clamp(48px,min(14vw,7vh),60px);display:block;}
  .w-s-zac::before,.w-s-zac::after{left:calc(var(--zh) / 2);right:auto;top:0;bottom:18px;width:2px;height:auto;margin:0 0 0 -1px;}
  .w-s-zac::after{transform-origin:top;}
  .js .w-s-jak:not(.in) .w-s-zac::after{transform:scaleY(0);}
  .w-s-zac-l{grid-template-columns:minmax(0,1fr);gap:clamp(8px,1.6vh,14px);}
  .w-s-zac-i{display:grid;grid-template-columns:var(--zh) minmax(0,1fr);align-items:center;column-gap:16px;}
  .w-s-zac-z{height:var(--zh);border-radius:10px;}
  .w-s-zac-sr{top:5px;right:5px;width:10px;height:10px;}
  .w-s-zac-sr::after{width:6px;margin-left:-3px;}
  .w-s-zac-n{font-size:clamp(28px,min(8vw,4vh),36px);}
  .w-s-zac-h{margin-top:0;font-size:clamp(16px,min(4.8vw,2.4vh),19px);}
  .w-s-zac-lamp{width:30px;height:30px;margin:clamp(8px,1.6vh,14px) 0 0 calc(var(--zh) / 2 - 15px);}
  .w-s-zac-lamp::before,.w-s-zac-lamp::after{width:20px;margin-left:-10px;}
  /* cennik: nazwa nad ceną, cena na całą szerokość karty */
  .w-s-cennik{--cp:18px;}
  .w-s-cen-k{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:clamp(16px,2.4vh,22px) 16px;}
  .w-s-cen-n{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px;}
  .w-s-cen-n b{font-size:17px;}
  .w-s-cen-n span{font-size:10px;}
  .w-s-cen-c{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 10px;}
  .w-s-cen-c b{font-size:clamp(26px,min(8.2vw,4.4vh),38px);}
  .w-s-cen-dop{margin-top:0;font-size:10px;}
  .w-s-cen-b{left:16px;height:22px;padding:0 10px;font-size:9px;}
  /* pigułka mieści się w jednym wierszu, „+ Odkryj” obok albo pod nią — nic nie wychodzi za ekran */
  html[data-wyglad="2"] .gxf-saas .w-akcje{flex-wrap:wrap;gap:10px;}
  .gxf-saas .gx-cta{font-size:14px;padding:10px 18px;white-space:normal;text-wrap:balance;text-align:center;}
}
/* niski telefon (375×667): mniej zdań na wierzchu (są w „+ Odkryj”), ciaśniej */
@media(max-width:860px) and (max-height:760px){
  .w-s-gek-h span{display:none;}
  .w-s-czat-kto,.w-s-czat-kosz{display:none;}
  .w-s-cennik{--cg:12px;}
  html[data-wyglad="2"] .gxf-saas .w-teraz-p{-webkit-line-clamp:3;}
  .w-s-cen-k{padding:12px 14px;row-gap:6px;}
  .w-s-cen-c b,.w-s-cen-k.is-top .w-s-cen-c b{font-size:30px;}
  .w-s-czat-b{padding:10px 14px;font-size:14px;}
  .w-s-prz-w0{display:none;}
  .w-s-ok-l .w-s-ok-st{display:none;}
  .w-s-ok-l .w-s-ok-ekran{height:112px;}
  .w-s-ok-l .w-s-ok-t{padding-top:6px;padding-bottom:8px;}
  .w-s-ok-l .w-s-ok-h{font-size:17px;}
  .w-s-ok-m .w-s-ok-h,.w-s-ok-s .w-s-ok-h{font-size:12px;}
  html[data-wyglad="2"] .w-s-okna .w-glowa{margin-bottom:12px;}
  html[data-wyglad="2"] .gxf-saas .w-most-t{font-size:19px!important;line-height:1.12!important;}
  html[data-wyglad="2"] .gxf-saas .w-fil{padding:4px 0;}
  html[data-wyglad="2"] .gxf-saas .w-fil span{font-size:26px;}
}
@media(prefers-reduced-motion:reduce){
  .w-s-bus b,.js .w-s-czolo{display:none;}
  .gxf-saas .gxf-flow .gxf-k::before,.gxf-saas .gxf-flow .gxf-k i,.w-s-prz *,.w-s-prz-l::before,.w-s-prz-l::after,.w-s-prz-w::before,.w-s-prz-w::after,.w-s-roz::before,.w-s-mod::before,.w-s-roz-dz i,
  .w-s-roz-lista::before,.w-s-zac::after,.w-s-zac-n,.w-s-zac-lamp,.w-s-zac-lamp::before,.w-s-zac-lamp::after,.w-s-cen-k::after,.w-s-cen-wej,.w-s-cen-k::before,.js .w-s-okna .w-s-ok-i,.js .w-s-jak .w-s-zac-i,
  .js .w-s-gek .w-s-czat-kto,.js .w-s-gek .w-s-czat-b{transition:none!important;}
}

/* ================= G|OPTIMA · ODWRÓCONE PUZZLE (31.10 noc) — każdy filar indywidualnie; tu szara strona → jasna strona =================
   Z treści: „Odwracam puzzle, na które od lat patrzysz od szarej strony”. Szary kafel = kolor filaru #6B7280 (biały tekst 4,8:1, kształt na czerni 4,3:1),
   jasna strona = #F5F5F7 z czarnym tekstem. Jedyny ruch to obrót kafla (rotateY; małe kawałki: ten sam obrót w rzucie, scaleX) — bez rozmycia i poświaty.
   Wejście = puzzle na stole (3 kawałki odwracają się same) · odwrócenie = karta · co robię = 3 wielkie kafle na klik/tap · liczby = przed → po ·
   jak = ścieżka · cennik = 3 kawałki, polecany jasny · skąd = zawody w jedno · most = mosty do 4 filarów. Etykiety sekcji: mały kawałek, który się odwraca.
   Bez JS i przy „ogranicz ruch” wszystko leży jasną stroną do góry z całą treścią. Reguły pod .gxf-optima albo klasami w-o-* — inne filary nietknięte. */
.gxf-optima{--o-sz:#6B7280;--o-ja:#F5F5F7;--o-ez:cubic-bezier(.16,1,.3,1);--o-io:cubic-bezier(.65,0,.35,1);--o-wr:22px;--o-wo:14px;--o-gap:16px;}
@media(max-width:860px){.gxf-optima{--o-wr:14px;--o-wo:10px;}}
html[data-wyglad="2"] body.gxf-optima .gxf-wrap{padding-top:0;}
.gxf-optima .gxf-crumb{color:rgba(255,255,255,.56);}   /* .44 dawało 4,2:1 przy 12 px — AA wymaga 4,5:1 */
/* szczegóły tylko w „+ Odkryj” (bez JS widać wszystko) */
.js .w-o-det,.js .w-o-sc-o,.js .w-o-cen-p{display:none;}
.gxf-optima .w-o-ja :focus-visible,.gxf-optima .w-o-ja:focus-visible{outline-color:#000;}

/* ---- twarze kafli: szara (kolor filaru) i jasna ---- */
.w-o-sz,.w-o-ja{position:relative;border-radius:16px;}
.w-o-sz{background:#1D1D1F;color:#fff;}   /* 02.11: zwykła ciemna karta (jak cennik G|SITE) — szary #6B7280 został tylko w puzzlach hero */
.w-o-ja{background:var(--o-ja);color:#000;}
/* 02.11 Dawid: „nie kombinujmy bo to nie gra planszowa” — zamki puzzli (wypustka/wcięcie) usunięte; puzzle tylko w hero i w „Jak to się łączy” */
/* obrót: bez JS / „ogranicz ruch” twarze leżą jedna pod drugą (szary przód tylko tam, gdzie ma własną treść) */
.w-o-obr{position:relative;}
.w-o-obr-in{display:flex;flex-direction:column;gap:20px;}
html:not(.js) .w-o-kaf-f,html:not(.js) .w-o-pp-pusty,html:not(.js) .w-o-obr-b,html:not(.js) .w-o-kaf-x,html:not(.js) .w-o-hint{display:none;}
@media(prefers-reduced-motion:reduce){.w-o-kaf-f,.w-o-pp-pusty,.w-o-obr-b,.w-o-kaf-x,.w-o-hint{display:none!important;}}
@media(prefers-reduced-motion:no-preference){
  .js .w-o-obr{perspective:1600px;}
  .js .w-o-obr-in{display:grid;gap:0;height:100%;transform-style:preserve-3d;transition:transform .9s var(--o-io);}
  .js .w-o-obr.on .w-o-obr-in{transform:rotateY(180deg);}
  .js .w-o-obr-in>.w-o-sz,.js .w-o-obr-in>.w-o-ja{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
  .js .w-o-obr-in>.w-o-ja{transform:rotateY(180deg);}
}
/* przycisk „odwróć” w rogu karty (biały na szarej, czarny na jasnej — zmiana w połowie obrotu) */
.w-o-obr-b{position:absolute;z-index:5;top:clamp(12px,2vh,20px);right:clamp(12px,2vh,20px);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer;transition:color .1s .4s,border-color .1s .4s,transform .3s var(--o-ez);}
.w-o-obr.on .w-o-obr-b{color:#000;border-color:rgba(0,0,0,.3);}
@media(hover:hover){.w-o-obr-b:hover{transform:rotate(-40deg);}}
.w-o-obr-b svg,.w-o-ik svg,.w-o-kaf-x svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}

/* ---- etykiety sekcji: zwykła kreska jak w innych filarach (02.11: bez małych puzzli) ---- */

/* ---- 0 · wejście: G|OPTIMA, pytanie, pigułka; obok puzzle na stole szarą stroną do góry, trzy kawałki odwracają się same ---- */
html[data-wyglad="2"] .w-o0{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-content:center;align-items:center;column-gap:clamp(24px,4vw,64px);}
.w-o0-t{min-width:0;}
.w-o0 .w-o0-hak{margin-top:clamp(22px,4vh,44px);font-size:clamp(28px,min(4.2vw,6vh),58px);max-width:17ch;}
.w-o0-ak .gxf-lead{margin-top:clamp(14px,2.6vh,24px);font-size:clamp(15px,min(1.35vw,2.1vh),18px);max-width:52ch;}
.w-o0-ak .gxf-actions{margin-top:clamp(18px,3.4vh,32px);}
.w-o0-ak .gxf-ctap{max-width:46ch;}
@media(min-width:861px) and (max-height:820px){html[data-wyglad="2"] .w-o0-ak .gxf-ctap{display:none;}}
.w-o-stol{justify-self:center;width:min(100%,calc(var(--w-wys) * .66),460px);margin:0;}
.w-o-stol-svg{display:block;width:100%;height:auto;overflow:visible;transform:rotate(-4deg);}
.w-o-stol-svg path{fill:var(--o-sz);stroke:#000;stroke-width:2.4;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;}
.w-o-st-j path{fill:var(--o-ja);}
.w-o-st-k{transform-box:fill-box;transform-origin:center;}
.w-o-stol-cap{margin-top:clamp(18px,3.4vh,32px);text-align:center;font-size:clamp(14px,min(1.2vw,2vh),16px);font-weight:700;line-height:1.3;color:var(--acc-t);}
@keyframes wOPol{from{transform:scaleX(0);}to{transform:none;}}
@keyframes wOObrS{0%{transform:scaleX(1);fill:var(--o-sz);}49.9%{fill:var(--o-sz);}50%{transform:scaleX(0);fill:var(--o-ja);}100%{transform:scaleX(1);fill:var(--o-ja);}}
@media(prefers-reduced-motion:no-preference){
  .js .w-o-st-k{animation:wOPol .6s var(--o-ez) both;animation-delay:calc(.15s + var(--i,0) * .07s);}
  .js .w-o-st-j path{animation:wOObrS .8s var(--o-io) both;animation-delay:calc(1.05s + var(--j,0) * .32s);}
}

/* ---- 1 · odwrócenie: jedna karta — szara „to, co widzi większość”, jasna „to, czego nie widzisz”; raz odwraca się sama ---- */
.w-o-odw-a{font-size:clamp(17px,min(1.7vw,2.6vh),22px);font-weight:600;line-height:1.45;color:rgba(255,255,255,.6);max-width:44ch;text-wrap:pretty;}
.w-o-odw-b{margin-top:clamp(10px,1.8vh,16px);font-size:clamp(28px,min(4.4vw,6.6vh),66px);font-weight:900;line-height:1.05;letter-spacing:-.035em;color:#fff;max-width:19ch;text-wrap:balance;}
.w-o-pod{margin-top:clamp(20px,3.6vh,36px);font-size:clamp(17px,min(1.7vw,2.6vh),22px);font-weight:600;line-height:1.45;color:rgba(255,255,255,.78);max-width:44ch;text-wrap:pretty;}

/* ---- 2 · co robię: trzy wielkie kafle szarą stroną do góry, odwracane klikiem / tapnięciem ---- */
.w-o-hint{margin-top:clamp(8px,1.4vh,14px);font-size:14px;font-weight:600;color:var(--acc-t);}
.w-o-kafle{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--o-gap);}
.w-o-ck{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.6vh,14px);height:100%;padding:clamp(22px,2.6vw,32px);}
.w-o-ck-n{margin-bottom:clamp(4px,1.2vh,12px);font-size:clamp(40px,min(4.4vw,6.4vh),72px);font-weight:900;line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums;}
.w-o-ck-h{font-size:clamp(20px,min(2vw,3.2vh),28px);font-weight:900;line-height:1.08;letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.w-o-ck-p{font-size:clamp(15px,min(1.3vw,2.1vh),18px);font-weight:600;line-height:1.5;color:rgba(255,255,255,.72);text-wrap:pretty;}
.gxf-more.w-o-ck-l{margin-top:auto;}
.w-o-k{position:relative;z-index:calc(10 - var(--i,0));min-width:0;}
.w-o-kaf{height:100%;}
.w-o-kaf-f,.w-o-kaf-b{min-height:clamp(210px,min(28vw,38vh),350px);padding:clamp(20px,2.4vw,32px);text-align:left;}
.w-o-kaf-f{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:16px;width:100%;margin:0;border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.w-o-kaf-n{font-size:clamp(60px,min(7.6vw,10.6vh),128px);font-weight:900;line-height:.8;letter-spacing:-.05em;color:rgba(255,255,255,.36);font-variant-numeric:tabular-nums;}
.w-o-kaf-t{font-size:clamp(22px,min(2.3vw,3.6vh),34px);font-weight:900;line-height:1.06;letter-spacing:-.03em;color:#fff;text-wrap:balance;}
.w-o-ik{position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);color:#fff;transition:transform .3s var(--o-ez);}
@media(hover:hover){.w-o-kaf-f:hover .w-o-ik{transform:rotate(-40deg);}}
.w-o-kaf-b{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px);outline:none;}
.w-o-kaf-h{padding-right:52px;font-size:clamp(20px,min(2vw,3.2vh),28px);font-weight:900;line-height:1.08;letter-spacing:-.025em;color:#000;text-wrap:balance;}
.w-o-kaf-p{font-size:clamp(15px,min(1.3vw,2.1vh),18px);font-weight:600;line-height:1.5;color:rgba(0,0,0,.72);text-wrap:pretty;}
.gxf-more.w-o-kaf-l{margin-top:auto;color:#000;}
.w-o-kaf-x{position:absolute;top:clamp(14px,2vw,24px);right:clamp(14px,2vw,24px);display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.26);background:transparent;color:#000;cursor:pointer;}
.w-o-lista{list-style:none;display:grid;gap:16px;margin-top:28px;}
.w-o-li-h{font-size:18px;font-weight:800;line-height:1.25;color:#fff;}
.w-o-lista .gxf-p{margin-top:6px;font-size:15px;}

/* ---- 3 · liczby, nie przeczucia: „przed” szarą stroną, „po” odwraca się na jasną ---- */
.w-o-pp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--o-gap);width:min(calc(100% - 4px),900px);}
.w-o-pp-k{position:relative;min-width:0;container-type:inline-size;}
.w-o-pp-a{z-index:2;}
.w-o-pp-b{z-index:1;}
.w-o-pp .w-o-sz,.w-o-pp .w-o-ja{display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(10px,1.8vh,16px);min-height:clamp(160px,min(22vw,30vh),270px);padding:clamp(18px,2.4vw,32px);}
.w-o-pp-w{margin-top:-.14em;font-size:min(26cqi,15vh,140px);font-weight:900;line-height:1.04;letter-spacing:-.05em;}   /* ogonek „p” nie wchodzi na zdanie pod spodem */
.w-o-pp-p{font-size:clamp(14px,min(1.3vw,2.1vh),18px);font-weight:600;line-height:1.45;max-width:30ch;text-wrap:pretty;}
.w-o-pp .w-o-ja .w-o-pp-p{color:rgba(0,0,0,.72);}
.w-o-lic-q{margin-top:clamp(18px,3.4vh,32px);font-size:clamp(22px,min(2.8vw,4.2vh),40px);font-weight:900;line-height:1.1;letter-spacing:-.03em;color:#fff;max-width:26ch;text-wrap:balance;}

/* ---- 4 · jak to idzie: ścieżka, kafelki kroków odwracają się po kolei, gdy linia do nich dojdzie ---- */
.w-o-sc{--pk:clamp(56px,min(6.6vw,10vh),104px);--g:clamp(12px,2vw,28px);list-style:none;position:relative;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:var(--g);}
.w-o-sc::before,.w-o-sc::after{content:"";position:absolute;z-index:0;top:calc(var(--pk) / 2 - 1px);left:calc(var(--pk) / 2);right:calc((100% - (var(--n,5) - 1) * var(--g)) / var(--n,5) - var(--pk) / 2);height:2px;border-radius:2px;}
.w-o-sc::before{background:rgba(255,255,255,.16);}
.w-o-sc::after{background:var(--acc-t);transform-origin:left;}
.w-o-sc-i{position:relative;z-index:1;min-width:0;}
.w-o-sc-p{position:relative;display:flex;align-items:center;justify-content:center;width:var(--pk);height:var(--pk);border-radius:calc(var(--pk) * .16);background:var(--o-ja);color:#000;}
.w-o-sc-p b{font-size:calc(var(--pk) * .5);font-weight:900;line-height:1;letter-spacing:-.04em;}
.w-o-sc-h{margin-top:clamp(14px,2.6vh,26px);font-size:clamp(16px,min(1.8vw,2.9vh),26px);font-weight:900;line-height:1.15;letter-spacing:-.02em;color:#fff;text-wrap:balance;}
@media(prefers-reduced-motion:no-preference){
  .js .w-o-jak:not(.in) .w-o-sc::after{transform:scaleX(0);}
  .js .w-o-jak .w-o-sc::after{transition:transform calc((var(--n,5) - 1) * .2s) linear .32s;}
}

/* ---- 6 · cennik: trzy kawałki jednego puzzla, polecany leży jasną stroną (plakietka wystaje) ---- */
.w-o-cen-l{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--o-gap);max-width:1100px;}
.w-o-cen-i{position:relative;z-index:calc(10 - var(--i,0));min-width:0;}
.w-o-cen-k{display:flex;flex-direction:column;gap:clamp(12px,2vh,20px);height:100%;min-height:clamp(190px,min(22vw,30vh),290px);padding:clamp(22px,3vw,36px) clamp(20px,2.4vw,32px);container-type:inline-size;}
.w-o-cen-b{position:absolute;z-index:3;top:-12px;left:clamp(20px,2.4vw,32px);height:26px;background:#000;color:#fff;}
.w-o-cen-n{display:flex;flex-direction:column;gap:6px;}
.w-o-cen-n b{font-size:clamp(18px,min(1.8vw,2.8vh),26px);font-weight:900;line-height:1.05;letter-spacing:-.02em;}
.w-o-cen-n span{font-size:12px;font-weight:800;letter-spacing:.1em;line-height:1.3;text-transform:uppercase;}
.w-o-ja .w-o-cen-n span,.w-o-ja .w-o-cen-dop{color:rgba(0,0,0,.66);}
.w-o-cen-c{display:flex;flex-direction:column;gap:8px;margin-top:auto;}
.w-o-cen-c b{display:block;font-size:min(13cqi,64px);font-weight:900;line-height:.92;letter-spacing:-.04em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.w-o-cen-dl b{font-size:min(10cqi,52px);}
.w-o-cen-dop{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;}

/* ---- 9 · skąd: zawody jako szare kawałki, które odwracają się jeden po drugim w „jedną robotę” ---- */
html[data-wyglad="2"] .w-sec.w-o-skad .gxf-h2{font-size:clamp(20px,min(2.2vw,3.4vh),30px);letter-spacing:-.02em;}
.w-o-skad-w{margin-top:clamp(14px,2.6vh,24px);font-size:clamp(16px,min(1.5vw,2.4vh),20px);font-weight:600;line-height:1.5;color:rgba(255,255,255,.72);max-width:46ch;text-wrap:pretty;}
.w-o-chipy{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(12px,2.2vh,20px);max-width:920px;}
.w-o-chipy li{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:clamp(14px,min(1.3vw,2.1vh),17px);font-weight:800;letter-spacing:-.01em;}
.w-o-skad-1{margin-top:clamp(20px,3.6vh,36px);font-size:clamp(26px,min(3.6vw,5.4vh),52px);font-weight:900;line-height:1.08;letter-spacing:-.035em;color:#fff;max-width:22ch;text-wrap:balance;}
.w-o-skad-1 span{display:block;margin-top:clamp(8px,1.4vh,12px);font-size:clamp(16px,min(1.6vw,2.5vh),21px);font-weight:600;line-height:1.45;letter-spacing:0;color:rgba(255,255,255,.72);max-width:44ch;text-wrap:pretty;}

/* ---- 10 · most: z kawałka OPTIMA wychodzą cztery mosty do pozostałych filarów ---- */
.w-o-mapa{display:grid;grid-template-columns:auto minmax(40px,1fr) minmax(0,2.4fr);align-items:stretch;max-width:1000px;margin-top:clamp(12px,2.2vh,20px);}
.w-o-mapa-z{align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:12px;}
.w-o-mapa-k{position:relative;display:block;width:clamp(36px,min(3.6vw,5.4vh),52px);aspect-ratio:1;border-radius:10px;background:var(--o-sz);}
.w-o-mapa-k::after{content:"";position:absolute;left:calc(100% - 4px);top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:inherit;}
.w-o-mapa-n{font-size:clamp(18px,min(2vw,3.2vh),28px);font-weight:900;letter-spacing:-.02em;color:#fff;white-space:nowrap;}
.w-o-mapa-n b{font-weight:900;color:var(--acc-t);}
.w-o-mapa-z em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.w-o-mosty{display:block;width:100%;height:100%;overflow:visible;}
.w-o-mosty path{fill:none;stroke:var(--k);stroke-width:2;vector-effect:non-scaling-stroke;}
@media(prefers-reduced-motion:no-preference){
  .js .w-o-most .w-o-mosty{clip-path:inset(-4px 100% -4px 0);transition:clip-path 1.1s var(--o-ez) .45s;}
  .js .w-o-most.in .w-o-mosty{clip-path:inset(-4px 0 -4px 0);}
}
.w-o-mapa-l{list-style:none;display:grid;grid-auto-rows:1fr;}
.w-o-fil{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);height:100%;min-height:48px;padding:clamp(4px,1vh,10px) 0;color:#fff;text-decoration:none;}
.w-o-fil i{flex:none;display:block;width:10px;height:10px;border-radius:3px;background:var(--k);transition:transform .2s;}
.w-o-fil span{font-size:clamp(28px,min(4.2vw,6.4vh),60px);font-weight:900;line-height:1;letter-spacing:-.04em;}
.w-o-fil em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.w-o-fil b{margin-left:auto;padding-left:8px;font-size:clamp(20px,2vw,28px);font-weight:700;transition:transform .2s;}
@media(hover:hover){.w-o-fil:hover b{transform:translateX(6px);}.w-o-fil:hover em{color:#fff;}}

/* ---- „+ Odkryj” w OPTIMA: zwarta lista z kreskami, bez kafli i kawałków ---- */
.w-pop .w-o-det,.w-pop .w-o-sc-o,.w-pop .w-o-cen-p{display:block;}
.w-pop .w-o-lista{display:block;margin-top:0;}
.w-pop .w-o-lista>li,.w-pop .w-o-sc-i,.w-pop .w-o-cen-i{display:block;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);opacity:1!important;transform:none!important;}
.w-pop .w-o-lista>li:first-child,.w-pop .w-o-sc-i:first-child,.w-pop .w-o-cen-i:first-child{border-top:0;}
.w-pop .w-o-sc,.w-pop .w-o-cen-l{display:block;}
.w-pop .w-o-sc::before,.w-pop .w-o-sc::after,.w-pop .w-o-sc-p,.w-pop .w-o-cen-b,.w-pop .w-o-cen-k::before,.w-pop .w-o-cen-k::after{display:none;}
.w-pop .w-o-sc-h,.w-pop .w-o-li-h{margin-top:0;font-size:clamp(17px,4vw,20px);font-weight:800;}
.w-pop .w-o-sc-h .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;color:var(--acc-t);}
.w-pop .w-o-sc-o,.w-pop .w-o-cen-p,.w-pop .w-o-lista .gxf-p{margin-top:8px;font-size:15px;color:rgba(255,255,255,.64);}
.w-pop .w-o-cen-k{display:block;min-height:0;padding:0;border-radius:0;background:none;color:#fff;}
.w-pop .w-o-cen-n span,.w-pop .w-o-cen-dop{color:rgba(255,255,255,.6);}
.w-pop .w-o-cen-c{margin-top:10px;}
.w-pop .w-o-cen-c b{font-size:clamp(28px,7vw,40px);}
.w-pop .w-o-lic-r,.w-pop .w-o-skad-r{font-size:16px;line-height:1.65;color:rgba(255,255,255,.78);}

/* ---- telefon ---- */
@media(max-width:860px){
  html[data-wyglad="2"] .w-o0{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,3vh,28px);}
  html[data-wyglad="2"] .w-o0 .gxf-lead,html[data-wyglad="2"] .w-o0-ak .gxf-ctap{display:none;}
  .w-o0 .w-o0-hak{font-size:clamp(28px,min(8.4vw,4.6vh),40px);}
  .w-o-stol{justify-self:start;width:min(62vw,calc(var(--w-wys) - 400px),280px);margin-left:6px;}
  .w-o-stol-cap{display:none;}
  /* karty jedna pod drugą */
  .w-o-kafle,.w-o-cen-l{grid-template-columns:minmax(0,1fr);gap:12px;}
  .w-o-ck{padding:18px 18px 20px;gap:8px;}
  .w-o-ck-n{margin-bottom:4px;font-size:30px;}
  .w-o-ck-h{font-size:clamp(18px,5vw,21px);}
  .w-o-ck-p{font-size:15px;line-height:1.45;}
  .w-o-odw-a{font-size:17px;}
  .w-o-odw-b{font-size:clamp(26px,min(7.6vw,4vh),34px);}
  .w-o-kaf-f,.w-o-kaf-b{min-height:0;padding:14px 16px;}
  .w-o-kaf-f{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding-right:64px;}
  .w-o-kaf-n{font-size:36px;}
  .w-o-kaf-t{font-size:clamp(18px,5vw,22px);}
  .w-o-ik,.w-o-kaf-x{top:50%;right:12px;margin-top:-22px;}
  .w-o-kaf-b{justify-content:center;gap:4px;padding-right:64px;}
  .w-o-kaf-h{padding-right:0;font-size:clamp(17px,4.6vw,20px);}
  .w-o-kaf-p{font-size:14px;line-height:1.45;}
  .gxf-more.w-o-kaf-l{display:none;}
  .w-o-obr-b{top:10px;right:10px;}
  .w-o-pp .w-o-sz,.w-o-pp .w-o-ja{min-height:clamp(150px,24vh,210px);padding:14px;}
  .w-o-pp-p{font-size:13px;line-height:1.4;}
  .w-o-lic-q{font-size:clamp(20px,min(6vw,3.2vh),26px);}
  /* ścieżka w pionie */
  .w-o-sc{--pk:clamp(40px,min(11vw,6vh),52px);grid-template-columns:minmax(0,1fr);gap:clamp(10px,1.8vh,18px);}
  .w-o-sc::before,.w-o-sc::after{left:calc(var(--pk) / 2 - 1px);right:auto;top:calc(var(--pk) / 2);bottom:calc(var(--pk) / 2);width:2px;height:auto;}
  .w-o-sc::after{transform-origin:top;}
  .js .w-o-jak:not(.in) .w-o-sc::after{transform:scaleY(0);}
  .w-o-sc-i{display:grid;grid-template-columns:var(--pk) minmax(0,1fr);align-items:center;column-gap:16px;}
  .w-o-sc-h{margin-top:0;font-size:clamp(16px,min(4.6vw,2.5vh),19px);}
  /* cennik: nazwa po lewej, cena po prawej */
  .w-o-cen-k{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;min-height:0;padding:16px 18px;}
  .w-o-cen-n b{font-size:18px;}
  .w-o-cen-n span{font-size:10px;}
  .w-o-cen-c{margin-top:0;align-items:flex-end;gap:4px;}
  .w-o-cen-c b,.w-o-cen-dl b{font-size:clamp(22px,7vw,30px);}
  .w-o-cen-dl b{font-size:clamp(19px,5.6vw,24px);}
  .w-o-cen-dop{font-size:10px;}
  .w-o-cen-b{left:18px;height:22px;padding:0 10px;font-size:9px;}
  .w-o-skad-1{font-size:clamp(24px,min(7vw,3.6vh),32px);}
  .w-o-chipy{gap:8px;}
  .w-o-chipy li{min-height:36px;padding:0 12px;font-size:14px;}
  .w-o-mapa{grid-template-columns:auto minmax(28px,1fr) minmax(0,3.2fr);}
  .w-o-mapa-z{padding-right:6px;}
  .w-o-mapa-n{font-size:16px;}
  .w-o-fil{gap:10px;}
  .w-o-fil span{font-size:clamp(24px,7.4vw,30px);}
  .w-o-fil em{display:none;}
  html[data-wyglad="2"] .gxf-optima .w-akcje{gap:10px;}
  .gxf-optima .gx-cta{font-size:14px;padding:12px 20px;white-space:normal;text-wrap:balance;text-align:left;}
}
/* niski telefon (375×667): bez podpowiedzi, opis na jasnej stronie kafla w 2 liniach (cały w „+ Odkryj”), ciaśniej */
@media(max-width:860px) and (max-height:760px){
  .w-o-hint{display:none;}
  html[data-wyglad="2"] .w-o-co .w-glowa{margin-bottom:14px;}
  .w-o-kaf-f,.w-o-kaf-b{padding:10px 60px 10px 14px;}
  .w-o-kaf-n{font-size:30px;}
  .w-o-kaf-t{font-size:18px;}
  .w-o-kaf-p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;}
  .w-o-kafle{--o-gap:14px;gap:14px;}
  html[data-wyglad="2"] .w-o-co .w-akcje{margin-top:16px;}
}
@media(prefers-reduced-motion:reduce){.w-o-obr-in,.w-o-obr-b,.w-o-ik{transition:none!important;}}

/* ================= 02.11 AUDYT AGENTÓW (T80) — poprawki po przeglądzie żywej v35c ================= */
/* „+ Odkryj” ma pokazać to, co strona chowa: opisy, „Efekt”, listę cen, drugi akapit „Skąd”, pełną odpowiedź i „Teraz”.
   Reguły wyglądu v3 (html[data-wyglad="2"] …) chowały to silniejszym selektorem niż .w-pop … */
html[data-wyglad] .w-pop .w-pop-tr .gxf-p,html[data-wyglad] .w-pop .w-pop-tr .gxf-wynik,html[data-wyglad] .w-pop .w-pop-tr .w-skad-r,
html[data-wyglad] .w-pop .w-pop-tr .w-teraz-p,html[data-wyglad] .w-pop .w-pop-tr .w-odp-t,html[data-wyglad] .w-pop .w-pop-tr .w-ciche{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;max-height:none!important;}
html[data-wyglad] .w-pop .w-pop-tr .w-cena-lista,html[data-wyglad] .w-pop .w-pop-tr .w-spis{display:block!important;}
html[data-wyglad] .w-pop .w-pop-tr .w-r-h{white-space:normal;}
/* OPTIMA „Liczby”: wielkie „przed” / „po” w jednej linii (słowo u góry karty, zdanie na dole) */
.w-o-pp .w-o-sz,.w-o-pp .w-o-ja{justify-content:space-between;}
/* OPTIMA cennik: jedna wielkość ceny w całym rzędzie (gdy któraś cena jest długa, wszystkie jak długa) */
.w-o-cen-l:has(.w-o-cen-dl) .w-o-cen-c b{font-size:min(10cqi,52px);}
@media(max-width:860px){
  .w-o-cen-l:has(.w-o-cen-dl) .w-o-cen-c b{font-size:clamp(19px,5.6vw,24px);}
  
  .js .w-montaz.in .w-mt-c:first-child,.js .w-montaz.in .w-mt-c:last-child{transform:none;}
  
  html[lang="nl"] .w-af-m .w-af-h{font-size:clamp(19px,5.4vw,24px);}
  
  html[lang="en"] .w-af-l .w-af-h{line-height:1.04;}
  /* SITE „Z innej strony”: tekst bez „Odkryj” nie może być ucięty */
  html[data-wyglad="2"] .w-mowi-q .w-ciche{-webkit-line-clamp:8;}
}
@media(max-width:860px) and (max-height:760px){html[data-wyglad="2"] .w-mowi-q .w-ciche{-webkit-line-clamp:8;}}
/* PRINT wejście: podpis sceny ma stałą wysokość (3 wiersze) — przyciski pod nim nie skaczą przy zmianie rzeczy */
.zn-cap{min-height:calc(20.5px + 4.5em);}
/* PRINT: szew na kółku logo w Chrome — kreska 101 na obwodzie 100 zachodzi na swój początek */
@keyframes znRys2{from{stroke-dashoffset:101;}to{stroke-dashoffset:0;}}
.js .zn .zn-ring,.js .w-co-print .zn-ring,.js .w-mowi-print .zn-ring{stroke-dasharray:101;stroke-dashoffset:101;}
.js .zn.rys .zn-ring{animation-name:znRys2;stroke-dashoffset:0;}
.js .w-co-print.in .zn-ring,.js .w-mowi-print.in .zn-ring{stroke-dashoffset:0;}
@media(prefers-reduced-motion:reduce){.js .zn .zn-ring,.js .w-co-print .zn-ring,.js .w-mowi-print .zn-ring{stroke-dashoffset:0!important;}}
/* SAAS: rozdzielnica, cennik i listwa ruszają, gdy kulka dojdzie do węzła sekcji (.w-zas), a nie gdy sekcja wjedzie na ekran */
.js .gxf-saas .w-s-rozd:not(.w-zas) .w-s-roz::before{transform:scaleX(0);}
.js .gxf-saas .w-s-rozd:not(.w-zas) .w-s-mod::before{transform:scaleY(0);}
.js .gxf-saas .w-s-rozd:not(.w-zas) .w-s-roz-dz i{transform:translateY(18px);background:#48484A;}
.js .gxf-saas .w-s-cennik:not(.w-zas) .w-s-cen-k::before{transform:scaleY(0);}
.js .gxf-saas .w-s-cennik:not(.w-zas) .w-s-cen-k::after,.js .gxf-saas .w-s-cennik:not(.w-zas) .w-s-cen-wej{transform:scaleX(0);}
/* cennik: każdy obwód zapala się, gdy kulka dojdzie do jego karty */
.js .gxf-saas .w-s-cen-l.w-sc .w-s-cen-k:not(.w-zas)::before{transform:scaleY(0);}
.js .gxf-saas .w-s-cen-l.w-sc .w-s-cen-k:not(.w-zas)::after,.js .gxf-saas .w-s-cen-l.w-sc .w-s-cen-k:not(.w-zas) .w-s-cen-wej{transform:scaleX(0);}
.js .gxf-saas .w-s-cen-l.w-sc .w-s-cen-k.w-zas::before,.js .gxf-saas .w-s-cen-l.w-sc .w-s-cen-k.w-zas::after,.js .gxf-saas .w-s-cen-l.w-sc .w-s-cen-k.w-zas .w-s-cen-wej{transform:none;transition-delay:0s;}
/* telefon: rozdzielnica za kulką — szyna rośnie do kulki, dźwignia modułu przeskakuje na ON, gdy kulka do niego dojdzie */
.js .gxf-saas .w-s-roz-lista.w-sc::before{transform:scaleY(var(--kp,0))!important;transition:none;}
.js .gxf-saas .w-s-roz-lista.w-sc .w-s-mod .w-s-roz-dz i{transition-delay:0s;}
.js .gxf-saas .w-s-roz-lista.w-sc .w-s-mod:not(.w-zas) .w-s-roz-dz i{transform:translateY(18px);background:#48484A;}
.js .gxf-saas .w-s-roz-lista.w-sc .w-s-mod.w-zas .w-s-roz-dz i{transform:none;background:var(--acc);}
@media(min-width:861px){
  /* PC: listwa „Jak to idzie” — zaciski wjeżdżają, gdy przewód do nich dojdzie (przewód rysuje się 1,5 s od .3 s) */
  .js .gxf-saas .w-s-jak:not(.w-zas) .w-s-zac::after{transform:scaleX(0);}
  .js .gxf-saas .w-s-jak:not(.w-zas) .w-s-zac-i{opacity:0;transform:translateY(12px);}
  .js .gxf-saas .w-s-jak:not(.w-zas) .w-s-zac-n{color:rgba(255,255,255,.2);}
  .js .gxf-saas .w-s-jak:not(.w-zas) .w-s-zac-lamp{background:#000;}
  .js .gxf-saas .w-s-jak .w-s-zac-i,.js .gxf-saas .w-s-jak .w-s-zac-n{transition-delay:calc(.3s + (var(--i,0) + .5) * 1.5s / var(--n,4));}
  /* PC: węzeł „Teraz w robocie” na przewodzie — etykieta nad wielką datą, a nie w drugiej kolumnie */
  html[data-wyglad="2"] .gxf-saas .w-teraz-t>.gxf-k{grid-column:1/-1;grid-row:1;}
  html[data-wyglad="2"] .gxf-saas .w-teraz-in>.w-data{grid-row:2/span 4;}
}
@media(max-width:860px){
  /* telefon: szyna rozdzielnicy i przewód zacisków podłączone do przewodu głównego (jak wejście cennika) */
  /* 6s+ (05.11, Dawid 06:3x: „W SAAS są podobne miejsca że ta kreska leży na czymś … w „co robię” i leży na „asystent ai na twoją stronę””):
     szyna rozdzielnicy nad modułem 01 (przerwa = odstęp między modułami), szyna startuje od górnej krawędzi odnogi, odnoga kończy się na prawej krawędzi szyny */
  .gxf-saas .w-s-roz-lista{--ro:calc(clamp(8px,1.4vh,12px) + 1px);}
  .gxf-saas .w-s-roz-lista::before{top:calc(-1 * var(--ro) - 1px);}
  .gxf-saas .w-s-roz-lista::after{content:"";position:absolute;top:calc(-1 * var(--ro));left:calc(-1 * var(--s-od) - 1px);width:calc(var(--s-od) + 30px);height:2px;margin-top:-1px;background:var(--acc);transform-origin:left;transition:transform .35s var(--s-ez);}
  .js .gxf-saas .w-s-rozd .w-s-roz-lista.w-sc:not(.w-odn)::after{transform:scaleX(0);}   /* 6s+: odnoga szyny zapala się, gdy kulka do niej dojdzie */
  /* 6s (05.11, Dawid 06:17 z iPhone'a: „niebieska … przy kwadratach z cyframi … dosłownie na nich leży a powinna być wyżej trochę”):
     odnoga zacisków nad kaflem 1 (przerwa = odstęp między kaflami), pion startuje od górnej krawędzi odnogi, odnoga kończy się na prawej krawędzi pionu — róg bez dziury */
  .gxf-saas .w-s-zac{--zo:calc(clamp(12px,1.6vh,14px) + 1px);}
  .gxf-saas .w-s-zac::before,.gxf-saas .w-s-zac::after{top:calc(-1 * var(--zo) - 1px);}
  .gxf-saas .w-s-zac>.w-s-zac-l::after{content:"";position:absolute;top:calc(-1 * var(--zo));left:calc(-1 * var(--s-od) - 1px);width:calc(var(--s-od) + var(--zh) / 2 + 2px);height:2px;margin-top:-1px;background:var(--acc);transform-origin:left;transition:transform .35s var(--s-ez);}
  .js .gxf-saas .w-s-rozd:not(.w-zas) .w-s-roz-lista::after,.js .gxf-saas .w-s-jak:not(.w-zas) .w-s-zac>.w-s-zac-l::after{transform:scaleX(0);}
  .js .gxf-saas .w-s-jak .w-s-zac.w-sc:not(.w-odn)>.w-s-zac-l::after{transform:scaleX(0);}   /* 6s: odnoga zapala się, gdy kulka do niej dojdzie */
  /* 6s+: pion zacisków nie prześwituje przez wyblakłe kafle (kafel 22 % → szara kreska przez cyfrę) — maska z pozycji kafli (JS: --zmask);
     rośnie za kulką przez przycięcie zamiast skali (skala przesuwałaby maskę razem z kreską) */
  .js .gxf-saas .w-s-jak .w-s-zac.w-sc::before,.js .gxf-saas .w-s-jak .w-s-zac.w-sc::after{-webkit-mask-image:var(--zmask,none);mask-image:var(--zmask,none);}
  .js .gxf-saas .w-s-jak .w-s-zac.w-sc::after{transform:none;-webkit-clip-path:inset(0 0 calc(100% - var(--zp,0) * 100%) 0);clip-path:inset(0 0 calc(100% - var(--zp,0) * 100%) 0);}
  /* telefon: dźwignia nie nadgryza numeru modułu */
  .gxf-saas .w-s-mod .w-s-roz-nr{font-size:18px!important;}
}
/* okienko „Odkryj”: obwódka fokusu przycisku ✕ była ucinana krawędzią przewijanego okna */
.w-pop-x:focus-visible{outline-offset:-4px;}

/* === 02.11 PACZKA (Dawid: „Dawaj paczkę”, pkt 10) — okienko „Odkryj” przy cenniku pokazuje plakietkę „Polecam” nad nazwą pakietu === */
html .w-pop .w-bil-b,html .w-pop .w-s-cen-b,html .w-pop .w-o-cen-b{display:inline-flex;position:static;margin:0 0 10px;height:22px;padding:0 10px;font-size:9px;background:#fff;color:#000;}