/* ============ TOKENS ============ */
:root{
  --bg:#000000;
  --bg-2:#0a0a0a;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.1);
  --border-strong:rgba(255,255,255,.18);
  --ink:#fcfcfb;
  --muted:#949494;
  --accent:#a3d1ff;
  --accent-hover:#92bce6;
  --accent-soft:rgba(163,209,255,.1);
  --accent-rgb:163,209,255;
  --blue:#a3d1ff;
  --violet:#92bce6;
  --cyan:#a3d1ff;
  --grad:linear-gradient(135deg,#a3d1ff,#92bce6);
  --grad-text:linear-gradient(100deg,#fcfcfb 0%,#a3d1ff 55%,#92bce6 100%);
  --radius:18px;
  --font-d:'Space Grotesk',sans-serif;
  --font-b:'Manrope',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16.5px;
  line-height:1.65;
  /* no overflow on body! html{overflow-x:clip} handles horizontal clipping;
     any overflow value here would turn body into a scroll container and
     break position:sticky (the pinned scroll films). */
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(163,209,255,.45)}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.028;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
h1,h2,h3,.stat b{font-family:var(--font-d);letter-spacing:-.02em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:104px 0;position:relative}
/* clip stray horizontal overflow (pre-reveal slide-in elements, decor orbs)
   per-block; clip = no scroll container, so position:sticky keeps working */
section,.page-hero,footer{overflow-x:clip}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:18px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--cyan);display:inline-block}

/* meta-row: identyczny wzorzec jak "SEKCJA · X ——— Y" na stronie głównej */
.meta-row{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.meta-label{font-size:11px;font-family:monospace;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.meta-line{height:1px;width:60px;background:var(--border);flex-shrink:0}
h2{font-size:clamp(28px,4.2vw,44px);font-weight:700;line-height:1.12;margin-bottom:16px}
.sub{color:var(--muted);max-width:640px;font-size:17.5px}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* word-by-word reveal for big headings */
.wsplit .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.wsplit.in .w{opacity:1;transform:none}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.zoom{transform:translateY(0) scale(.92)}
.reveal.zoom.in{transform:scale(1)}
.reveal.slide-l{transform:translateX(-40px)}
.reveal.slide-r{transform:translateX(40px)}
.reveal.slide-l.in,.reveal.slide-r.in{transform:none}

/* ============ NAV — 1:1 z mainem (SiteNav) ============ */
nav.site{
  position:sticky;top:0;left:0;right:0;z-index:200;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(0,0,0,.72);
  border-bottom:1px solid transparent;
  transition:border-color .25s;
}
nav.site.scrolled{border-bottom-color:var(--border)}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  min-height:auto;height:auto;
  display:flex;align-items:center;justify-content:space-between;
  position:relative;
}
.logo{
  font-family:'Oswald',var(--font-d),sans-serif;
  font-weight:700;font-size:20px;letter-spacing:-.01em;
  color:var(--ink);line-height:1.15;
}
.logo em{font-style:normal;color:var(--accent,#a3d1ff)}
.logo span{color:var(--accent,#a3d1ff)}
.logo .dot{color:rgba(252,252,251,.7);font-weight:500}
.logo small{
  display:block;
  font-family:'Poppins',var(--font-b),sans-serif;
  font-weight:500;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(252,252,251,.7);margin-top:2px;
}
.nav-links{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:'Poppins',var(--font-b),sans-serif;
  font-size:14px;font-weight:500;letter-spacing:.35px;
  color:rgba(252,252,251,.7);transition:color .25s;position:relative;
  text-decoration:none;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:2px;border-radius:2px;background:var(--accent,#a3d1ff);
}
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  padding:13px 26px;border-radius:12px;font-weight:700;font-size:15px;
  font-family:'Poppins',var(--font-b),sans-serif;cursor:pointer;border:none;
  transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s var(--ease);
  text-decoration:none;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 26px rgba(163,209,255,.21)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(163,209,255,.30)}
/* CTA jak na mainie — biały, bez niebieskiej poświaty */
.btn-primary.btn-main,
.nav-links a.btn-primary.btn-main{
  background:#fcfcfb;color:#000;border-radius:16px;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  box-shadow:none;padding:12px 20px;gap:8px;
}
.btn-primary.btn-main::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#34d399;flex-shrink:0;
}
.btn-primary.btn-main:hover{
  background:var(--accent,#a3d1ff);color:#000;transform:none;box-shadow:none;
}
.btn-primary.btn-main.active{outline:1px solid var(--accent,#a3d1ff);outline-offset:2px}
.btn-primary.btn-main.active::after{display:none}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}
.btn-nav{padding:10px 20px;font-size:14px}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.3s}

.nav-item-drop{position:relative}
.nav-drop-toggle{
  display:inline-flex;align-items:center;gap:6px;background:none;border:none;
  color:rgba(252,252,251,.7);font-size:14px;font-weight:500;letter-spacing:.35px;
  font-family:'Poppins',var(--font-b),sans-serif;cursor:pointer;padding:0;
}
.nav-drop-toggle:hover{color:var(--ink)}
.nav-drop-toggle .chev{
  width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .25s;margin-top:-3px;flex-shrink:0;
}
.nav-drop-toggle[aria-expanded="true"] .chev{transform:rotate(-135deg);margin-top:3px}
.nav-drop{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:250px;background:#0a0a0a;border:1px solid var(--border);border-radius:16px;
  padding:8px;list-style:none;margin:0;box-shadow:0 20px 50px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;z-index:10;
}
.nav-item-drop.open .nav-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-drop li{list-style:none;border-bottom:none !important}
.nav-drop li+li{margin-top:2px}
.nav-drop a{display:block;padding:10px 12px;border-radius:10px;font-size:13.5px;color:var(--muted)}
.nav-drop a:hover{background:rgba(163,209,255,.08);color:var(--ink)}

/* ============ HERO (home) ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:150px 0 90px;overflow:hidden}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-glow{
  position:absolute;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(163,209,255,.16),transparent 65%);
  pointer-events:none;z-index:1;transform:translate(-50%,-50%);
  transition:opacity .5s;
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:700;line-height:1.08;margin-bottom:22px}
.typed-wrap{display:inline-block;position:relative;color:var(--cyan);min-width:2ch}
.caret{display:inline-block;width:3px;height:.95em;background:var(--cyan);margin-left:2px;vertical-align:-.12em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-sub{color:var(--muted);font-size:18.5px;max-width:520px;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.stats{display:flex;gap:38px;flex-wrap:wrap}
.stat b{display:block;font-size:26px;font-weight:700;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{color:var(--muted);font-size:13.5px;font-weight:600}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:700;
}
.scroll-hint::after{
  content:"";width:1.5px;height:38px;background:linear-gradient(var(--cyan),transparent);
  animation:drip 1.8s var(--ease) infinite;
}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* browser demo */
.browser{
  border-radius:16px;border:1px solid var(--border-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(163,209,255,.06),0 0 90px rgba(163,209,255,.14);
  overflow:hidden;transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);
  transition:transform .8s var(--ease);
}
.browser:hover{transform:perspective(1200px) rotateY(-2deg) rotateX(1deg)}
.browser-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.03)}
.b-dot{width:10px;height:10px;border-radius:50%}
.b-dot:nth-child(1){background:#ff5f57}.b-dot:nth-child(2){background:#febc2e}.b-dot:nth-child(3){background:#28c840}
.b-url{
  flex:1;margin-left:8px;background:rgba(0,0,0,.3);border:1px solid var(--border);
  border-radius:8px;padding:5px 12px;font-size:12px;color:var(--muted);
  font-family:var(--font-d);white-space:nowrap;overflow:hidden;
}
.b-url em{font-style:normal;color:var(--cyan)}
.browser-body{padding:22px;min-height:330px;transition:background .8s}
.demo-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.demo-logo{font-family:var(--font-d);font-weight:700;font-size:15px;transition:color .6s}
.demo-menu{display:flex;gap:10px}
.demo-menu i{display:block;width:34px;height:7px;border-radius:4px;background:rgba(255,255,255,.14)}
.demo-hero-title{height:16px;border-radius:6px;margin-bottom:10px;width:75%;transition:background .6s}
.demo-hero-sub{height:9px;border-radius:5px;background:rgba(255,255,255,.13);margin-bottom:7px}
.demo-hero-sub.s2{width:62%}
.demo-cta{width:96px;height:26px;border-radius:8px;margin:16px 0 22px;transition:background .6s;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.demo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.demo-card{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;padding:12px}
.demo-card i{display:block;width:26px;height:26px;border-radius:8px;margin-bottom:10px;transition:background .6s;opacity:.9}
.demo-card b{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.16);margin-bottom:6px}
.demo-card s{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.09);width:70%}
.demo-badge{
  position:absolute;right:18px;bottom:16px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);
  background:rgba(163,209,255,.1);border:1px solid rgba(163,209,255,.3);
  padding:5px 11px;border-radius:99px;backdrop-filter:blur(4px);
}
.browser-wrap{position:relative}

/* ============ SCROLLY — generic pinned film section ============ */
.scrolly{position:relative}
.scrolly .stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.scrolly-progress{
  position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:5;
  display:flex;gap:10px;
}
.scrolly-progress i{
  width:34px;height:4px;border-radius:3px;background:rgba(255,255,255,.14);
  overflow:hidden;position:relative;display:block;
}
.scrolly-progress i::after{
  content:"";position:absolute;inset:0;background:var(--grad);
  transform:scaleX(var(--fill,0));transform-origin:left;
}

/* ============ INDUSTRIES film (home) ============ */
.industries .stage .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:100%}
.ind-copy h2{margin-bottom:10px}
.ind-list{list-style:none;margin-top:30px}
.ind-list li{
  padding:14px 0 14px 26px;border-left:2px solid var(--border);
  color:var(--muted);font-weight:600;font-size:17px;
  transition:color .4s,border-color .4s,transform .4s var(--ease);position:relative;
}
.ind-list li.on{color:var(--ink);border-left-color:var(--cyan);transform:translateX(8px)}
.ind-list li.on::before{
  content:"";position:absolute;left:-5px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 14px var(--cyan);
}
.ind-list li small{display:block;font-weight:500;font-size:13.5px;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s,max-height .4s}
.ind-list li.on small{opacity:.8;max-height:50px}

/* ============ PROCESS film ============ */
.process-film{background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(146,188,230,.12),transparent)}
.process-film .stage{flex-direction:column}
.film-head{position:absolute;top:9svh;left:0;right:0;text-align:center;z-index:4;padding:0 24px}
.film-head .eyebrow{justify-content:center;display:inline-flex}
.scene{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;padding:0 24px;
}
.scene-in{display:grid;grid-template-columns:auto auto;gap:64px;align-items:center;max-width:960px}
.scene-copy{max-width:380px}
.scene-copy .num{
  font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--cyan);
  letter-spacing:.2em;display:block;margin-bottom:12px;
}
.scene-copy h3{font-size:clamp(24px,3vw,34px);margin-bottom:12px;line-height:1.15}
.scene-copy p{color:var(--muted);font-size:16.5px}
.scene-art{width:min(360px,38vw);aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center}

/* scene art pieces — driven by --sp (0..1 scene progress) */
.art-disc{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(163,209,255,.25),rgba(146,188,230,.12) 60%,transparent 75%);
  border:1px solid var(--border);
}
.art-phone{
  width:120px;height:210px;border-radius:26px;background:#1b1b1b;
  border:2px solid var(--border-strong);position:relative;z-index:2;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center;font-size:44px;
  transform:rotate(calc((1 - var(--sp,0)) * -14deg));
}
.art-phone::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.15)}
.ring{
  position:absolute;border:1.5px solid rgba(163,209,255,.5);border-radius:50%;
  width:150px;height:150px;z-index:1;opacity:0;
}
.scene.on .ring{animation:ring 2s var(--ease) infinite}
.scene.on .ring.r2{animation-delay:.5s}
.scene.on .ring.r3{animation-delay:1s}
@keyframes ring{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.art-bubbles{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;width:250px}
.bubble{
  padding:13px 18px;border-radius:16px;font-size:14px;font-weight:600;max-width:210px;
  opacity:calc(var(--sp,0) * 2);transform:translateY(calc((1 - var(--sp,0)) * 18px));
  transition:opacity .2s,transform .2s;
}
.bubble.q{background:var(--surface-2);border:1px solid var(--border-strong);align-self:flex-start;border-bottom-left-radius:4px}
.bubble.a{background:var(--grad);align-self:flex-end;border-bottom-right-radius:4px;box-shadow:0 10px 26px rgba(163,209,255,.35)}
.bubble.b2{opacity:calc((var(--sp,0) - .25) * 2)}
.bubble.b3{opacity:calc((var(--sp,0) - .5) * 2)}
.art-build{
  width:280px;border-radius:14px;border:1px solid var(--border-strong);
  background:#1b1b1b;z-index:2;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.art-build .bb{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--border)}
.art-build .bb i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.art-build .bod{padding:16px}
.blk{border-radius:7px;margin-bottom:9px;background:linear-gradient(90deg,rgba(163,209,255,.7),rgba(146,188,230,.55));transform-origin:left;height:14px}
.blk.b1{width:70%;transform:scaleX(clamp(0, calc(var(--sp,0) * 5), 1))}
.blk.b2{width:100%;height:8px;background:rgba(255,255,255,.14);transform:scaleX(clamp(0, calc((var(--sp,0) - .2) * 5), 1))}
.blk.b3{width:85%;height:8px;background:rgba(255,255,255,.1);transform:scaleX(clamp(0, calc((var(--sp,0) - .35) * 5), 1))}
.blk-row{display:flex;gap:9px;margin-top:12px}
.blk-row .cell{
  flex:1;aspect-ratio:1.4;border-radius:8px;background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  opacity:calc((var(--sp,0) - .5) * 4);
  transform:translateY(calc((1 - var(--sp,0)) * 20px));
}
.blk-row .cell:nth-child(2){opacity:calc((var(--sp,0) - .62) * 4)}
.blk-row .cell:nth-child(3){opacity:calc((var(--sp,0) - .74) * 4)}
.art-swatches{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;align-items:center}
.cursor-dot{
  width:18px;height:18px;position:absolute;z-index:3;
  top:calc(20% + var(--sp,0) * 55%);left:calc(15% + var(--sp,0) * 60%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
.cursor-dot::before{
  content:"";display:block;width:0;height:0;
  border-left:9px solid #fff;border-bottom:14px solid transparent;
  border-top:3px solid transparent;transform:rotate(-8deg);
}
.sw-row{display:flex;gap:12px}
.sw{
  width:44px;height:44px;border-radius:12px;border:2px solid transparent;
  transition:transform .3s var(--ease),border-color .3s;
}
.sw.s1{background:#a3d1ff}.sw.s2{background:#92bce6}.sw.s3{background:#a3d1ff}.sw.s4{background:#f72585}
.scene.on .sw.pick{border-color:#fff;transform:scale(1.18)}
.check-list{list-style:none;font-size:14px;font-weight:600;color:var(--muted)}
.check-list li{padding:6px 0;opacity:calc((var(--sp,0) - .3) * 3)}
.check-list li::before{content:"✓ ";color:var(--cyan);font-weight:800}
.art-rocket{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}
.rocket{
  font-size:74px;
  transform:translateY(calc((1 - var(--sp,0)) * 70px));
  filter:drop-shadow(0 20px 40px rgba(163,209,255,.5));
}
.rocket-url{
  background:rgba(0,0,0,.4);border:1px solid rgba(163,209,255,.4);border-radius:10px;
  padding:8px 18px;font-family:var(--font-d);font-size:14px;color:var(--cyan);
  opacity:calc((var(--sp,0) - .4) * 3);
}
.rocket-url::before{content:"🔒 ";font-size:12px}
.art-care{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:20px}
.shield{font-size:64px;filter:drop-shadow(0 14px 34px rgba(146,188,230,.55))}
.pulse-line{width:230px;height:56px}
.pulse-line polyline{
  fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:420;stroke-dashoffset:calc(420 - var(--sp,0) * 420);
  filter:drop-shadow(0 0 8px rgba(163,209,255,.8));
}

/* ============ JOURNEY (photo scroll-timeline) ============ */
.journey{position:relative;padding:92px 0;overflow:hidden;background:radial-gradient(ellipse 90% 55% at 50% 22%,rgba(146,188,230,.12),transparent 70%)}
.j-atmos{position:absolute;inset:0;pointer-events:none;z-index:0}
.j-orb{position:absolute;border-radius:50%}
.j-orb.a{width:600px;height:600px;background:radial-gradient(circle,rgba(163,209,255,.16),transparent 68%);top:-140px;left:-8%}
.j-orb.b{width:520px;height:520px;background:radial-gradient(circle,rgba(146,188,230,.15),transparent 68%);bottom:-160px;right:-6%}
.j-orb.c{display:none}
.j-stage{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 24px}
.j-head{text-align:center;margin-bottom:60px}
.j-head .eyebrow{justify-content:center;display:inline-flex;margin-bottom:12px}
.j-head .meta-row{display:inline-flex}
.j-head h2{font-size:clamp(26px,3.8vw,42px)}

.j-track{position:relative;display:flex;flex-direction:column;gap:clamp(46px,7vw,84px)}
/* central spine connecting the steps */
.j-track::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:2px;transform:translateX(-1px);
  background:linear-gradient(var(--blue),var(--violet),var(--cyan));opacity:.3}

.jstation{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center;
  opacity:0;transform:translateY(42px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.jstation.on{opacity:1;transform:none}
.jcard{display:contents}
.jstation:nth-child(even) .jphoto{order:2}
.jghost{position:absolute;top:-46px;font-family:var(--font-d);font-weight:700;font-size:clamp(90px,13vw,170px);
  line-height:1;color:#fff;opacity:.045;z-index:0;pointer-events:none;user-select:none}
.jstation:nth-child(odd) .jghost{right:1%}
.jstation:nth-child(even) .jghost{left:1%}

.jphoto{position:relative;aspect-ratio:4/3;z-index:1}
.jphoto-inner{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;border:1px solid var(--border-strong);
  box-shadow:0 30px 70px rgba(0,0,0,.5)}
.jphoto-inner img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform 1.1s var(--ease)}
.jstation.on .jphoto-inner img{transform:scale(1.06)}
.jphoto-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 45%,rgba(0,0,0,.42));pointer-events:none}
.jbadge{position:absolute;z-index:3;width:66px;height:66px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;
  background:linear-gradient(rgba(10,10,10,.9),rgba(10,10,10,.9)) padding-box,var(--grad) border-box;border:1.5px solid transparent;
  box-shadow:0 16px 36px rgba(163,209,255,.4);top:-22px;left:-22px}
.jstation.on .jbadge{animation:badgeFloat 3.6s ease-in-out infinite}
@keyframes badgeFloat{50%{transform:translateY(-9px)}}
.jbadge .ring2{position:absolute;inset:-6px;border-radius:22px;border:1.5px solid rgba(163,209,255,.4);opacity:0}
.jstation.on .jbadge .ring2{animation:jring 2.6s var(--ease) infinite}
@keyframes jring{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.jtext{position:relative;z-index:1}
.jtext .num{font-family:var(--font-d);font-weight:700;font-size:13.5px;letter-spacing:.2em;color:var(--cyan);display:block;margin-bottom:12px}
.jtext h3{font-size:clamp(22px,2.6vw,32px);line-height:1.12;margin-bottom:12px}
.jtext p{color:var(--muted);font-size:clamp(15px,1.3vw,17px)}
.jtext .say{margin-top:16px;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--border-strong);padding:10px 16px;border-radius:99px}
.jtext .say b{color:var(--cyan)}
.j-rail,.j-hint{display:none}

/* ============ COMPARE ============ */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px}
.compare-col{border-radius:var(--radius);padding:34px;border:1px solid var(--border);background:var(--surface)}
.compare-col.us{
  border:1px solid transparent;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--grad) border-box;
  box-shadow:0 20px 60px rgba(163,209,255,.18);
}
.compare-col h3{font-size:20px;margin-bottom:22px;display:flex;align-items:center;gap:10px}
.compare-col ul{list-style:none}
.compare-col li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--border);font-size:15.5px;color:var(--muted)}
.compare-col.us li{color:var(--ink)}
.compare-col li:first-of-type{border-top:none}
.mark{flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:2px}
.mark.x{background:rgba(255,95,87,.14);color:#ff5f57}
.mark.v{background:rgba(40,200,64,.16);color:#3fdb5c}
.tag{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.tag.old{background:rgba(255,255,255,.07);color:var(--muted)}
.tag.new{background:rgba(163,209,255,.12);color:var(--cyan)}

/* ============ CARDS ============ */
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 26px;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.card:hover{transform:translateY(-7px);border-color:rgba(163,209,255,.35);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(163,209,255,.12)}
.card .ico{
  width:48px;height:48px;border-radius:13px;background:var(--grad);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  font-size:21px;box-shadow:0 10px 26px rgba(163,209,255,.35);
}
.card .ico svg{width:22px;height:22px;color:#fff;stroke-width:2.1}
.card h3{font-size:18.5px;margin-bottom:10px}
.card p{color:var(--muted);font-size:14.8px}

/* ============ PRICING ============ */
.pricing-bg{background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(146,188,230,.1),transparent)}
/* ---- przełącznik: strona / sklep ---- */
.ptype{
  display:inline-flex;gap:6px;padding:5px;flex-wrap:wrap;
  border-radius:99px;background:var(--surface);border:1px solid var(--border-strong);
}
.pt{
  padding:12px 28px;border-radius:99px;border:none;background:transparent;color:var(--muted);
  font-family:var(--font-b);font-weight:800;font-size:15px;cursor:pointer;
  transition:color .3s,background .3s,box-shadow .3s;
}
.pt:hover{color:var(--ink)}
.pt.on{background:rgba(255,255,255,.94);color:#0a0a0a;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.plans.three{grid-template-columns:repeat(3,1fr)}
.plans[hidden]{display:none}

/* ---- billing switch (3 tryby rozliczenia) ---- */
.billing{
  display:inline-flex;gap:4px;padding:5px;margin-top:30px;flex-wrap:wrap;
  border-radius:99px;background:var(--surface);border:1px solid var(--border-strong);
}
.bill{
  display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:99px;
  border:none;background:transparent;color:var(--muted);cursor:pointer;
  font-family:var(--font-b);font-weight:700;font-size:14.5px;
  transition:color .3s,background .3s,box-shadow .3s;
}
.bill:hover{color:var(--ink)}
.bill.on{background:var(--grad);color:#fff;box-shadow:0 8px 24px rgba(163,209,255,.21)}
.bill em{
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(163,209,255,.16);color:var(--cyan);padding:3px 9px;border-radius:99px;
}
.bill.on em{background:rgba(255,255,255,.22);color:#fff}
.bill-hint{color:var(--muted);font-size:14.5px;margin-top:16px;max-width:720px}
.bill-hint b{color:var(--ink)}
.p-save{font-size:12.5px;font-weight:700;color:#6fe3a3;margin-top:9px;min-height:19px}
.p-save.neutral{color:var(--muted);font-weight:600}
.price{transition:opacity .22s}
.plans.swap .price{opacity:.2}
.plans[data-mode="o"] .sub-only{display:none}
.plans[data-mode="o"] .price{font-size:34px}
.plans[data-mode="o"] .price small{display:block;margin-top:2px}
.pro-strip.dimmed{opacity:.55}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;align-items:stretch}
.plan{
  position:relative;border-radius:20px;padding:32px 26px;display:flex;flex-direction:column;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.plan:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(0,0,0,.65)}
.plan.featured{
  border:1px solid transparent;
  background:linear-gradient(rgba(27,27,27,.92),rgba(27,27,27,.92)) padding-box,var(--grad) border-box;
  box-shadow:0 24px 70px rgba(163,209,255,.3);
}
.plan .ribbon{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:99px;
  box-shadow:0 8px 20px rgba(146,188,230,.4);white-space:nowrap;
}
.plan h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.plan.featured h3{color:var(--cyan)}
.price{font-family:var(--font-d);font-size:42px;font-weight:700;line-height:1}
.price small{font-size:15px;color:var(--muted);font-weight:500;font-family:var(--font-b)}
.plan .for{font-size:13.5px;color:var(--muted);margin:10px 0 22px;min-height:40px}
.plan ul{list-style:none;flex:1;margin-bottom:26px}
.plan li{padding:8px 0 8px 26px;font-size:14.3px;color:var(--muted);position:relative;border-top:1px solid var(--border)}
.plan li:first-child{border-top:none}
.plan li::before{content:"✓";position:absolute;left:2px;color:var(--cyan);font-weight:800}
.plan .btn{width:100%}
.pro-strip{
  margin-top:26px;border-radius:18px;padding:26px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(163,209,255,.12),rgba(146,188,230,.12));
  border:1px solid var(--border-strong);
}
.pro-strip b{font-family:var(--font-d);font-size:19px}
.pro-strip p{color:var(--muted);font-size:14.5px;max-width:640px}
.pricing-note{text-align:center;color:var(--muted);font-size:14px;margin-top:30px}
.pricing-note b{color:var(--ink)}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;counter-reset:step}
.step{position:relative;padding:34px 28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-d);font-weight:700;font-size:52px;line-height:1;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:18px;opacity:.9;
}
.step h3{font-size:19px;margin-bottom:10px}
.step p{color:var(--muted);font-size:14.8px}
.step .dur{display:inline-block;margin-top:16px;font-size:12px;font-weight:700;color:var(--cyan);background:rgba(163,209,255,.1);border:1px solid rgba(163,209,255,.25);padding:4px 12px;border-radius:99px}

/* ============ SERVICES ============ */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.service{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px 28px;transition:transform .4s var(--ease),border-color .4s;
}
.service:hover{transform:translateY(-5px);border-color:rgba(163,209,255,.35)}
.service h3{font-size:17px;margin-bottom:6px}
.service p{color:var(--muted);font-size:13.8px}
.service .pr{font-family:var(--font-d);font-weight:700;font-size:22px;color:var(--cyan);white-space:nowrap}
.service .pr small{font-size:12px;color:var(--muted);display:block;text-align:right;font-family:var(--font-b)}
/* rozwijany opis usługi (hover / focus) */
.service{position:relative;align-items:stretch}
.service .s-txt{display:flex;flex-direction:column}
.service .s-more{
  color:var(--muted);font-size:13.6px;line-height:1.58;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease),opacity .4s,margin .5s var(--ease);
}
.service:hover .s-more,.service:focus-within .s-more{max-height:520px;opacity:1;margin-top:11px}
.service .s-go{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--cyan);
  opacity:0;transform:translateY(6px);max-height:0;overflow:hidden;
  transition:opacity .4s var(--ease),transform .4s var(--ease),max-height .45s var(--ease),margin .4s;
}
.service:hover .s-go,.service:focus-within .s-go{opacity:1;transform:none;max-height:30px;margin-top:12px}
.s-new{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#6fe3a3;background:rgba(111,227,163,.13);border:1px solid rgba(111,227,163,.3);
  padding:2px 8px;border-radius:99px;
}
.net-note{
  display:flex;align-items:center;gap:10px;justify-content:center;
  color:var(--muted);font-size:13.5px;margin-top:22px;text-align:center;
}
.net-note b{color:var(--ink)}
.oneoff-note{
  max-width:720px;margin:28px auto 0;padding:14px 18px;text-align:center;
  border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);
  color:var(--muted);font-size:13.5px;line-height:1.55;
}
.oneoff-note b{color:var(--ink)}

/* ============ CTA BAND ============ */
.cta-band{
  border-radius:26px;padding:64px 48px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(rgba(10,10,10,.94),rgba(10,10,10,.94)) padding-box,var(--grad) border-box;
  border:1px solid transparent;
}
.cta-band::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:560px;height:280px;background:radial-gradient(closest-side,rgba(163,209,255,.22),transparent);
  pointer-events:none;
}
.cta-band h2{margin-bottom:14px}
.cta-band .sub{margin:0 auto 32px}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;margin-top:52px}
form{display:grid;gap:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{font-size:13px;font-weight:700;color:var(--ink);display:block;margin-bottom:7px;letter-spacing:.03em}
input,select,textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--border-strong);
  border-radius:12px;padding:13px 16px;color:var(--ink);font-family:var(--font-b);
  font-size:15px;transition:border-color .25s,box-shadow .25s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(163,209,255,.22)}
select{appearance:none;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%239aa0c3' stroke-width='2' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 16px center}
select option{background:var(--bg-2);color:var(--ink)}
textarea{resize:vertical;min-height:110px}
.form-note{font-size:13px;color:var(--muted)}
.form-ok{
  display:none;background:rgba(40,200,64,.1);border:1px solid rgba(40,200,64,.35);
  color:#7ce89a;border-radius:12px;padding:14px 18px;font-size:14.5px;
}
.form-ok.show{display:block}
.contact-side{display:flex;flex-direction:column;gap:18px}
.c-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px}
.c-item b{font-family:var(--font-d);display:block;margin-bottom:5px;font-size:16px}
.c-item a{color:var(--cyan);font-weight:700;font-size:19px;font-family:var(--font-d)}
.c-item p,.c-item span{color:var(--muted);font-size:14.3px}

/* ============ CALCULATOR ============ */
.calc{border:1px solid var(--border);border-radius:16px;padding:20px 20px 22px;background:rgba(255,255,255,.03)}
.calc>label{margin-bottom:2px}
.calc-hint{font-size:12.5px;font-weight:700;color:var(--ink);margin:16px 0 10px;letter-spacing:.05em;text-transform:uppercase;opacity:.85}
.calc-hint:first-of-type{margin-top:10px}
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.calc-opt{position:relative;cursor:pointer}
.calc-opt input{position:absolute;opacity:0;pointer-events:none}
.calc-opt span{
  display:flex;flex-direction:column;gap:3px;height:100%;
  border:1px solid var(--border-strong);border-radius:12px;padding:12px 14px;
  transition:border-color .3s,background .3s,transform .3s var(--ease),box-shadow .3s;
  background:rgba(255,255,255,.03);
}
.calc-opt b{font-family:var(--font-d);font-size:14.5px;display:flex;align-items:center;gap:6px}
.calc-opt i{font-style:normal;color:var(--muted);font-size:12.5px;font-weight:600}
.calc-opt:hover span{border-color:rgba(163,209,255,.45);transform:translateY(-2px)}
.calc-opt:has(input:checked) span{
  border-color:transparent;
  background:linear-gradient(rgba(27,27,27,.95),rgba(27,27,27,.95)) padding-box,var(--grad) border-box;
  box-shadow:0 8px 24px rgba(163,209,255,.21);
}
.calc-opt:has(input:checked) i{color:var(--cyan)}
.calc-opt:has(input:checked) b::after{content:"✓";margin-left:auto;color:var(--cyan);font-weight:800}
.calc-opt input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.calc-star{font-size:10px;font-weight:800;color:var(--cyan);background:rgba(163,209,255,.12);border:1px solid rgba(163,209,255,.3);padding:1px 7px;border-radius:99px;letter-spacing:.06em}
.calc-total{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding:15px 20px;border-radius:12px;
  background:linear-gradient(90deg,rgba(163,209,255,.15),rgba(146,188,230,.15));
  border:1px solid var(--border-strong);
}
.calc-total small{color:var(--muted);font-size:13px;font-weight:700}
.calc-total b{font-family:var(--font-d);font-size:20px;color:var(--cyan);text-align:right}
.calc-total.pop b{animation:calcPop .4s var(--ease)}
@keyframes calcPop{45%{transform:scale(1.14)}}
.calc-note{font-size:12px;color:var(--muted);margin-top:10px}

/* wizard steps */
.wiz-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.wiz-steps{display:flex;gap:8px}
.wiz-steps i{width:30px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .4s}
.wiz-steps i.on{background:var(--grad)}
.wiz-pane{display:none}
.wiz-pane.on{display:block;animation:wizIn .45s var(--ease)}
@keyframes wizIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.wiz-nav .btn{padding:11px 22px;font-size:14px}
.wiz-nav .btn:disabled{opacity:.35;cursor:default;transform:none}
.wiz-qty{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:13px 16px;border:1px solid var(--border-strong);
  border-radius:12px;background:rgba(255,255,255,.03);
}
.wiz-qty span{font-size:13.8px;font-weight:600}
.wiz-qty small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.wiz-qty-ctrl{display:flex;align-items:center;gap:14px}
.wiz-qty-ctrl button{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--ink);font-size:18px;font-weight:700;cursor:pointer;
  transition:background .25s,border-color .25s;
}
.wiz-qty-ctrl button:hover{background:rgba(163,209,255,.15);border-color:rgba(163,209,255,.4)}
.wiz-qty-ctrl b{font-family:var(--font-d);font-size:18px;min-width:2ch;text-align:center}
.wiz-summary{list-style:none;margin-top:4px}
.wiz-summary li{
  display:flex;align-items:baseline;gap:12px;padding:10px 2px;
  border-bottom:1px solid var(--border);font-size:14.3px;
}
.wiz-summary li:last-child{border-bottom:none}
.wiz-summary small{flex:0 0 86px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wiz-summary span{flex:1}
.wiz-summary b{font-family:var(--font-d);color:var(--cyan);white-space:nowrap}

/* ============ COST DUEL (animated compare bars) ============ */
.duel{
  margin-top:26px;border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 32px;background:var(--surface);display:grid;gap:18px;
}
.duel h3{font-size:17px;margin-bottom:4px}
.duel-row{display:grid;gap:8px}
.duel-row>span{font-size:13.5px;color:var(--muted);font-weight:700}
.duel-track{
  position:relative;height:38px;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.05);display:flex;align-items:center;
}
.duel-fill{
  position:absolute;top:0;bottom:0;left:0;width:0;border-radius:10px;
  transition:width 1.5s var(--ease);
}
.duel-fill.old{background:linear-gradient(90deg,rgba(255,95,87,.65),rgba(255,95,87,.25))}
.duel-fill.new{background:var(--grad);box-shadow:0 0 24px rgba(163,209,255,.4)}
.duel-val{position:relative;z-index:1;margin-left:16px;font-family:var(--font-d);font-weight:700;font-size:16px}
.duel-note{font-size:13px;color:var(--muted)}
.duel-note b{color:var(--cyan)}

/* ============ RECEIPTS (paragon duel) ============ */
.receipts{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:56px;align-items:start}
.receipt{
  position:relative;background:#f6f3ea;color:#22222a;border-radius:8px 8px 0 0;
  padding:28px 26px 40px;font-family:'Courier New',ui-monospace,Consolas,monospace;
  box-shadow:0 30px 70px rgba(0,0,0,.55);transform:rotate(-1.4deg);
}
.receipt.ours{transform:rotate(1.4deg)}
.receipt::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.018) 0 2px,transparent 2px 4px);
}
.receipt::after{ /* jagged torn bottom edge */
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;
  background-image:linear-gradient(45deg,#f6f3ea 50%,transparent 50%),linear-gradient(-45deg,#f6f3ea 50%,transparent 50%);
  background-size:14px 12px;background-repeat:repeat-x;
}
.receipt h3{
  font-family:inherit;font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;
  text-align:center;padding-bottom:12px;margin-bottom:12px;border-bottom:1px dashed #9a9284;
}
.receipt h3 small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.06em;color:#847c6e;margin-top:4px}
.r-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px;
  font-size:13.5px;padding:5.5px 0;
  opacity:0;transform:translateY(9px);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  transition-delay:calc(var(--i,0) * .13s);
}
.receipts.printed .r-line{opacity:1;transform:none}
.r-line .dots{flex:1;border-bottom:1px dotted #9a9284;transform:translateY(-3px)}
.r-line b{font-weight:700;white-space:nowrap}
.r-line .free{color:#0e8f6e;font-weight:700}
.r-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  border-top:1px dashed #55504a;margin-top:12px;padding-top:12px;
  font-weight:700;font-size:17px;
}
.r-total b{font-size:19px}
.r-total b.pop{animation:calcPop .4s var(--ease)}
.r-note{font-size:11px;color:#847c6e;text-align:center;margin-top:16px;line-height:1.5}
.stamp{
  position:absolute;right:20px;bottom:52px;padding:9px 15px;
  border:3px solid;border-radius:8px;font-weight:800;font-size:14.5px;
  letter-spacing:.07em;text-transform:uppercase;font-family:var(--font-d);
  transform:rotate(-12deg) scale(0);opacity:0;pointer-events:none;
  mix-blend-mode:multiply;
}
.stamp.bad{color:#b03028;border-color:#b03028;background:rgba(176,48,40,.06)}
.stamp.good{color:#0e8f6e;border-color:#0e8f6e;background:rgba(14,143,110,.06)}
.receipts.printed .stamp{animation:stampIn .55s 1.15s var(--ease) forwards}
.receipts.printed .receipt.ours .stamp{animation-delay:1.5s}
@keyframes stampIn{
  0%{transform:rotate(-26deg) scale(2.6);opacity:0}
  62%{transform:rotate(-12deg) scale(.93);opacity:.92}
  100%{transform:rotate(-12deg) scale(1);opacity:.9}
}
.incl-badge{
  position:absolute;left:20px;bottom:52px;padding:6px 12px;border-radius:99px;
  background:#0e8f6e;color:#fff;font-family:var(--font-b);font-weight:700;font-size:12px;
  opacity:0;transform:translateY(8px) scale(.8);transition:opacity .3s,transform .3s var(--ease);
}
.incl-badge.show{opacity:1;transform:none}
.add-fix-wrap{text-align:center;margin-top:34px}
.add-fix-wrap p{font-size:13px;color:var(--muted);margin-top:10px}

/* compare rows: staggered entrance + popping marks */
.compare-col li{opacity:0;transform:translateX(-18px)}
.compare-col.us li{transform:translateX(18px)}
.compare-col.in li{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.compare-col.in li:nth-child(1){transition-delay:.05s}
.compare-col.in li:nth-child(2){transition-delay:.15s}
.compare-col.in li:nth-child(3){transition-delay:.25s}
.compare-col.in li:nth-child(4){transition-delay:.35s}
.compare-col.in li:nth-child(5){transition-delay:.45s}
.compare-col.in li:nth-child(6){transition-delay:.55s}
.compare-col .mark{transform:scale(0);transition:transform .5s var(--ease)}
.compare-col.in .mark{transform:scale(1)}
.compare-col.in li:nth-child(1) .mark{transition-delay:.15s}
.compare-col.in li:nth-child(2) .mark{transition-delay:.25s}
.compare-col.in li:nth-child(3) .mark{transition-delay:.35s}
.compare-col.in li:nth-child(4) .mark{transition-delay:.45s}
.compare-col.in li:nth-child(5) .mark{transition-delay:.55s}
.compare-col.in li:nth-child(6) .mark{transition-delay:.65s}
.compare-col.us{position:relative;overflow:hidden}
.compare-col.us::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.06),transparent);
  transform:skewX(-16deg);animation:sheenSweep 5s ease-in-out infinite;pointer-events:none;
}
@keyframes sheenSweep{0%,55%{left:-70%}90%,100%{left:140%}}

/* ============ REVIEWS MARQUEE ============ */
.reviews{position:relative;overflow:hidden;padding:14px 0 6px;margin-top:44px}
.reviews::before,.reviews::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.reviews::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.reviews::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.marquee{display:flex;gap:20px;width:max-content;animation:marq 46s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.review{
  width:330px;flex:0 0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:26px;transition:border-color .3s;
}
.review:hover{border-color:rgba(163,209,255,.35)}
.review .stars{color:#fbbf24;font-size:14px;letter-spacing:3px;margin-bottom:12px}
.review p{font-size:14.3px;line-height:1.6}
.review-foot{margin-top:16px;display:flex;align-items:center;gap:12px}
.review-foot .avat{
  width:38px;height:38px;border-radius:50%;background:var(--grad);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-family:var(--font-d);font-size:14px;
}
.review-foot b{display:block;font-size:14px;font-family:var(--font-d)}
.review-foot small{color:var(--muted);font-size:12.5px}

/* ============ DEMO PHOTO (in browser mockups) ============ */
.demo-photo{
  height:110px;border-radius:10px;margin-bottom:14px;
  background-size:cover;background-position:center;
  border:1px solid var(--border);
  transition:opacity .45s ease;
  box-shadow:inset 0 -40px 40px -20px rgba(0,0,0,.7);
}

/* ============ ORB BACKGROUND (kontakt) ============ */
.orb-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  opacity:.5;
}
.orb-bg canvas{filter:drop-shadow(0 0 3px rgba(163,209,255,.7))}
.has-orb .page-hero,.has-orb section,.has-orb footer{position:relative;z-index:1}

/* ============ 3D TILT ============ */
.tilt{transition:transform .22s ease-out;will-change:transform;transform-style:preserve-3d}
.tilt:hover{transition:transform .06s linear}

/* ============ PHOTO CARDS ============ */
.photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.photo-card{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);aspect-ratio:4/3;display:block;
}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.photo-card:hover img{transform:scale(1.06)}
.photo-card figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:38px 20px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.92));
  font-size:14px;font-weight:700;font-family:var(--font-d);
}
.photo-card figcaption small{display:block;color:var(--muted);font-weight:500;font-size:12.5px;font-family:var(--font-b)}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{
  position:relative;padding:72px 0 90px;overflow:hidden;
  background:radial-gradient(ellipse 60% 55% at 70% 0%,rgba(163,209,255,.14),transparent),
             radial-gradient(ellipse 45% 40% at 15% 15%,rgba(146,188,230,.12),transparent);
}
.page-hero h1{font-size:clamp(34px,5vw,54px);font-weight:700;line-height:1.1;margin-bottom:18px;max-width:800px}
.page-hero .sub{font-size:18px}
.page-hero-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.95fr);
  gap:28px 40px;
  align-items:center;
}
.page-hero-kontakt .page-hero-copy h1{max-width:18ch}
.page-hero-map{
  position:relative;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  background:rgba(0,0,0,.25);
  min-height:340px;
  height:min(48vh,420px);
  cursor:grab;
  touch-action:none;
}
.page-hero-map:active{cursor:grabbing}
.kontakt-map-canvas{width:100%;height:100%;min-height:340px}
.kontakt-map-canvas canvas{display:block;width:100%!important;height:100%!important}
@media (max-width:900px){
  .page-hero-split{grid-template-columns:1fr;gap:22px}
  .page-hero-map{min-height:280px;height:300px}
  .page-hero-kontakt .page-hero-copy h1{max-width:none}
}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:22px;font-weight:600}
.crumbs a{color:var(--cyan)}
.orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.25;pointer-events:none;
  animation:orbFloat 14s ease-in-out infinite alternate;
}
.orb.o1{width:340px;height:340px;background:rgba(163,209,255,.25);top:-80px;right:8%}
.orb.o2{width:260px;height:260px;background:rgba(146,188,230,.22);top:40%;left:-60px;animation-delay:-6s}
@keyframes orbFloat{from{transform:translateY(-18px) scale(1)}to{transform:translateY(22px) scale(1.08)}}

/* ============ FAQ ============ */
.faq{max-width:820px;margin:52px auto 0}
.faq details{
  border:1px solid var(--border);border-radius:14px;background:var(--surface);
  margin-bottom:12px;overflow:hidden;transition:border-color .3s;
}
.faq details[open]{border-color:rgba(163,209,255,.35)}
.faq summary{
  cursor:pointer;padding:20px 24px;font-weight:700;font-size:16.5px;font-family:var(--font-d);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--cyan);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 20px;color:var(--muted);font-size:15px}

/* ============ TIMELINE (jak dzialamy) ============ */
.timeline{position:relative;max-width:760px;margin:60px auto 0;padding-left:40px}
.timeline::before{
  content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--blue),var(--violet),var(--cyan));border-radius:2px;
}
.t-item{position:relative;padding-bottom:44px}
.t-item:last-child{padding-bottom:0}
.t-item::before{
  content:"";position:absolute;left:-36px;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:3px solid var(--cyan);box-shadow:0 0 14px rgba(163,209,255,.6);
}
.t-item h3{font-size:20px;margin-bottom:8px}
.t-item p{color:var(--muted);font-size:15.5px;max-width:600px}
.t-item .dur{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--cyan);background:rgba(163,209,255,.1);border:1px solid rgba(163,209,255,.25);padding:4px 12px;border-radius:99px}

/* ============ LOGO PROPOSALS ============ */
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px}
.logo-card{
  border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--surface);
  transition:transform .4s var(--ease),border-color .4s;
}
.logo-card:hover{transform:translateY(-6px);border-color:rgba(163,209,255,.4)}
.logo-stage{
  display:flex;align-items:center;justify-content:center;padding:56px 24px;min-height:210px;
  background:radial-gradient(ellipse 70% 80% at 50% 30%,rgba(163,209,255,.1),transparent);
}
.logo-meta{padding:22px 26px;border-top:1px solid var(--border)}
.logo-meta b{font-family:var(--font-d);font-size:17px;display:block;margin-bottom:6px}
.logo-meta p{color:var(--muted);font-size:14px}

/* ============ PORTFOLIO ============ */
.pf-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:44px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.filt{
  padding:10px 20px;border-radius:99px;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);
  font-family:var(--font-b);font-weight:700;font-size:14px;
  transition:color .3s,background .3s,border-color .3s,transform .3s var(--ease),box-shadow .3s;
}
.filt:hover{color:var(--ink);background:var(--surface-2);transform:translateY(-2px)}
.filt.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 26px rgba(163,209,255,.21)}
.pf-count{color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap}
.pf-count b{color:var(--ink)}

.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:26px}
.pcard{
  position:relative;display:block;border-radius:22px;overflow:hidden;
  border:1px solid var(--border);background:#0a0a20;isolation:isolate;
  transition:border-color .45s,box-shadow .45s var(--ease),transform .45s var(--ease);
}
.pcard:not(.soon):hover{border-color:rgba(163,209,255,.42);box-shadow:0 26px 60px rgba(0,0,0,.5);transform:translateY(-5px)}
.pcard.hide{display:none}
.pcard.pop{animation:pcard-in .5s var(--ease) both}
@keyframes pcard-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.pshot{position:relative;aspect-ratio:16/10;overflow:hidden}
.pshot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.62) saturate(.85);
  transition:transform 1s var(--ease),filter .6s;
}
.pcard:not(.soon):hover .pshot img{transform:scale(1.08);filter:brightness(.42) saturate(1.05)}
.pshot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.95));
}
.pinfo{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 26px 22px}
.ptag{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.pcard h3{font-size:clamp(19px,2.2vw,23px);margin:9px 0 0}
.pdesc{
  color:var(--muted);font-size:14.5px;line-height:1.5;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s,margin .5s var(--ease);
}
.pcard:hover .pdesc,.pcard:focus-visible .pdesc{max-height:84px;opacity:1;margin-top:9px}
.pgo{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:13.5px;font-weight:800;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:.45s var(--ease);
}
.pcard:hover .pgo,.pcard:focus-visible .pgo{opacity:1;transform:none}
.pbadge{
  position:absolute;top:16px;left:16px;z-index:3;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-strong);padding:6px 13px;border-radius:99px;
  font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.pbadge.demo{color:#ffd479;border-color:rgba(255,212,121,.38)}
.pbadge.soon-b{color:var(--muted)}
.parrow{
  position:absolute;top:14px;right:14px;z-index:3;
  width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:700;
  opacity:0;transform:scale(.6) rotate(-25deg);transition:.45s var(--ease);
}
.pcard:hover .parrow,.pcard:focus-visible .parrow{opacity:1;transform:none}
.pcard.soon{cursor:default}
.pcard.soon .pshot img{filter:grayscale(1) brightness(.4)}
.pnote{
  display:flex;gap:14px;align-items:flex-start;margin-top:34px;
  border:1px dashed var(--border-strong);border-radius:16px;padding:20px 24px;
  background:var(--surface);color:var(--muted);font-size:14.5px;
}
.pnote b{color:var(--ink)}

/* ============ BANER COOKIES ============ */
.cookie-bar{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;
  background:rgba(10,10,10,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-strong);border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  opacity:0;transform:translateY(24px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.cookie-bar.on{opacity:1;transform:none}
.ck-in{
  max-width:var(--maxw);margin:0 auto;padding:22px 26px;
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.ck-txt{flex:1;min-width:280px}
.ck-txt b{font-family:var(--font-d);font-size:16px;display:block;margin-bottom:6px}
.ck-txt p{color:var(--muted);font-size:14px;line-height:1.6;max-width:660px}
.ck-txt a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.ck-cats{display:grid;gap:10px;margin-top:16px;max-width:660px}
.ck-cat{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface)}
.ck-cat input{margin-top:4px;accent-color:var(--blue);width:17px;height:17px;flex-shrink:0}
.ck-cat b{font-size:14px;margin-bottom:2px;font-family:var(--font-b)}
.ck-cat i{font-style:normal;color:var(--muted);font-size:13px;line-height:1.5;display:block}
.ck-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ck-btns .btn{padding:12px 22px;font-size:14px}
.ck-link{background:none;border:none;color:var(--muted);font-family:var(--font-b);
  font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:8px}
.ck-link:hover{color:var(--ink)}
@media (max-width:720px){
  .cookie-bar{left:10px;right:10px;bottom:10px;max-height:86svh;overflow-y:auto}
  .ck-in{padding:18px;gap:16px}
  .ck-btns{width:100%}
  .ck-btns .btn{flex:1}
}

/* ============ LEGAL (polityka prywatności) ============ */
.legal{max-width:820px}
.legal h2{font-size:clamp(21px,2.8vw,28px);margin:46px 0 14px}
.legal h2:first-of-type{margin-top:10px}
.legal h3{font-size:17.5px;margin:26px 0 8px;color:var(--cyan)}
.legal p,.legal li{color:var(--muted);font-size:15.5px;line-height:1.75}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 18px 22px}
.legal li{margin-bottom:9px}
.legal b,.legal strong{color:var(--ink)}
.legal a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.legal table{width:100%;border-collapse:collapse;margin:8px 0 20px}
.legal th,.legal td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--border);font-size:14.3px;color:var(--muted);vertical-align:top}
.legal th{color:var(--ink);font-family:var(--font-d);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
.legal .todo{
  background:rgba(255,212,121,.09);border:1px dashed rgba(255,212,121,.42);
  color:#e9c37e;padding:16px 20px;border-radius:14px;margin-bottom:26px;font-size:14.5px;line-height:1.7;
}
.legal .todo b{color:#ffd479}
.legal .upd{font-size:13.5px;color:var(--muted);font-style:italic}
@media (max-width:620px){
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block;width:100%}
  .legal thead{display:none}
  .legal tr{border:1px solid var(--border);border-radius:12px;padding:6px 10px;margin-bottom:12px}
  .legal td{border-bottom:1px solid var(--border)}
  .legal td:last-child{border-bottom:none}
}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border);padding:44px 0 36px;background:rgba(0,0,0,.25)}
.foot{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start}
.foot .muted{color:var(--muted);font-size:13.5px;max-width:420px}
.foot ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
.foot ul a{color:var(--muted);font-size:13.5px;font-weight:600}
.foot ul a:hover{color:var(--ink)}
.foot-bottom{margin-top:30px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:12.8px}

/* ============ MOBILE ============ */
@media (max-width:1020px){
  .nav-links{gap:20px}
  .nav-links a{font-size:13.8px}
  .btn-nav{padding:9px 15px;font-size:13.5px}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .plans,.plans.three{grid-template-columns:repeat(2,1fr)}
  .services-grid,.cards-3{grid-template-columns:repeat(2,1fr)}
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .browser{transform:none;max-width:560px;margin:0 auto}
  .industries .stage .wrap{grid-template-columns:1fr;gap:26px}
  .industries .browser-wrap{display:none}
  .scene-in{grid-template-columns:1fr;gap:30px;text-align:center;justify-items:center}
  .scene-art{width:min(300px,70vw)}
  .logo-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  section{padding:74px 0}
  .nav-links{
    position:fixed;top:76px;right:0;left:0;flex-direction:column;gap:0;
    background:rgba(0,0,0,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);padding:10px 24px 22px;
    transform:translateY(-130%);transition:transform .4s var(--ease);align-items:stretch;
  }
  .nav-links.open{transform:none}
  .nav-links li{border-bottom:1px solid var(--border)}
  .nav-links li:last-child{border-bottom:none;padding-top:14px}
  .nav-links a{display:block;padding:15px 2px;font-size:16px}
  .nav-links a.active::after{display:none}
  .nav-item-drop{width:100%}
  .nav-drop-toggle{width:100%;justify-content:space-between;padding:15px 2px;font-size:16px}
  .nav-drop{
    position:static;transform:none;opacity:1;visibility:visible;pointer-events:none;
    max-height:0;overflow:hidden;border:none;box-shadow:none;padding:0;margin:0;
    background:none;transition:max-height .3s var(--ease),margin-top .3s;
  }
  .nav-item-drop.open .nav-drop{pointer-events:auto;max-height:280px;margin-top:2px;margin-bottom:10px}
  .nav-drop a{color:var(--muted);font-size:14.5px;padding:9px 4px}
  .burger{display:block}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding-top:120px}
  .hero-sub{font-size:16.5px}
  .stats{gap:22px}
  .stat b{font-size:21px}
  .compare-grid,.contact-grid{grid-template-columns:1fr}
  .cards-4,.plans,.plans.three,.services-grid,.steps,.cards-3{grid-template-columns:1fr}
  .plan.featured{order:-1}
  .f-row{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:repeat(2,1fr)}
  .calc-total b{font-size:17px}
  .review{width:270px;padding:20px}
  .photo-row{grid-template-columns:1fr}
  .demo-photo{height:80px}
  .receipts{grid-template-columns:1fr;gap:30px}
  .receipt,.receipt.ours{transform:none}
  .stamp{right:14px;bottom:46px;font-size:12.5px}
  .duel{padding:22px 18px}
  .duel-val{font-size:13.5px}
  .wiz-summary small{flex-basis:70px}
  .cta-band{padding:46px 26px}
  .demo-cards{grid-template-columns:repeat(2,1fr)}
  .demo-cards .demo-card:nth-child(3){display:none}
  .hero-ctas .btn{width:100%}
  .page-hero{padding:56px 0 66px}
  .scene-copy h3{font-size:22px}
  .scene-copy p{font-size:14.5px}
  .film-head h2{font-size:24px}
  .timeline{padding-left:34px}
  .pgrid{grid-template-columns:1fr;gap:20px}
  .pf-bar{align-items:flex-start}
  .filt{padding:9px 16px;font-size:13.5px}
  .pdesc{max-height:none;opacity:1;margin-top:9px}
  .pgo{opacity:1;transform:none}
  .pcard:not(.soon):hover{transform:none}
}
/* journey → single column on phones */
@media (max-width:820px){
  .j-track::before{left:22px}
  .jstation{grid-template-columns:1fr;gap:18px}
  .jstation:nth-child(even) .jphoto{order:0}
  .jphoto{max-width:520px}
  .jghost{font-size:80px;top:-30px}
  .jstation:nth-child(odd) .jghost,.jstation:nth-child(even) .jghost{right:auto;left:2%}
  .jbadge{width:56px;height:56px;font-size:26px;top:-18px;left:-14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal,.wsplit .w{opacity:1;transform:none}
  .scene{opacity:1;position:relative;inset:auto;margin-bottom:60px}
  .scrolly .stage{position:relative;height:auto;padding:60px 0}
  .jstation{opacity:1 !important;transform:none !important}
  .jphoto img{transform:none !important}
}

/* ikony Lucide w miejsce emoji - wyrownanie w roznych kontekstach */
.jbadge svg{width:30px;height:30px;color:#fff;stroke-width:2}
.jtext .say svg{flex:0 0 16px;width:16px;height:16px;color:var(--cyan);stroke-width:2.2}
.pt svg{width:17px;height:17px;vertical-align:-3px;margin-right:7px;stroke-width:2.2}
.plan .ribbon svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px;stroke-width:2.4}
.c-item b svg{width:17px;height:17px;vertical-align:-3px;margin-right:8px;color:var(--cyan);stroke-width:2.2}
.wiz-opt b svg,.wiz-opt svg{width:17px;height:17px;vertical-align:-3px;margin-right:8px;color:var(--cyan);stroke-width:2.2}

.incl-badge svg{width:14px;height:14px;vertical-align:-2px;margin-right:6px;stroke-width:2.6}

/* ============ OPERATOR — "Jestem [rola]. Jedna osoba." ============ */
.op-section{padding:96px 0}
.op-layout{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:56px;align-items:start}

.op-portrait{position:relative;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--bg-2);padding-left:30px}
.op-side-label{position:absolute;left:8px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:monospace;font-size:9px;letter-spacing:.25em;color:rgba(255,255,255,.6);white-space:nowrap}
.op-photo-top{position:absolute;top:18px;left:30px;right:18px;z-index:2;display:flex;align-items:center;justify-content:space-between}
.op-profile-tag{display:inline-flex;align-items:center;gap:6px;font-family:monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:rgba(0,0,0,.5);border:1px solid var(--border-strong);padding:5px 10px;border-radius:99px}
.op-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.op-founded{font-family:monospace;font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.45);
  background:rgba(0,0,0,.5);border:1px solid var(--border-strong);padding:5px 10px;border-radius:99px}
.op-photo{position:relative;aspect-ratio:3/4;
  background:radial-gradient(120% 90% at 50% 0%,rgba(163,209,255,.08),transparent 60%),linear-gradient(180deg,#17171f,#0a0a0a);
  display:grid;place-items:center}
.op-photo-mono{font-family:var(--font-d);font-weight:700;font-size:clamp(80px,14vw,150px);color:rgba(255,255,255,.06);
  letter-spacing:-.03em;user-select:none}
.op-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.op-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,6,16,.85));pointer-events:none}
.op-photo-bottom{position:absolute;left:30px;right:18px;bottom:18px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.op-role-tag{position:absolute;bottom:100%;left:0;margin-bottom:6px;font-family:monospace;font-size:9px;letter-spacing:.25em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.op-name{font-family:var(--font-d);font-style:italic;font-weight:700;font-size:clamp(18px,2.4vw,24px);color:var(--ink);margin:0}
.op-mono{font-family:var(--font-d);font-style:italic;font-weight:700;font-size:22px;color:rgba(255,255,255,.35)}

.op-h2{font-size:clamp(30px,5vw,52px);font-weight:700;line-height:1.04;letter-spacing:-.02em;margin:0 0 22px;color:var(--ink)}
.op-h2 em{font-style:italic;color:var(--accent)}

.op-roles{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.op-role-btn{appearance:none;cursor:pointer;font-family:monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.5);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 14px;
  transition:color .2s,border-color .2s}
.op-role-btn:hover{color:var(--ink);border-color:var(--border-strong)}
.op-role-btn.on{color:var(--accent);border-color:rgba(163,209,255,.5)}

.op-p{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:58ch;margin:0 0 16px}
.op-stats{display:flex;gap:clamp(24px,5vw,56px);margin:30px 0 34px}
.op-stat-num{display:block;font-family:var(--font-d);font-style:italic;font-weight:700;font-size:clamp(26px,3.6vw,38px);color:var(--ink);line-height:1}
.op-stat-label{display:block;margin-top:6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

.op-ctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.op-link{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--border-strong);padding-bottom:3px}
.op-link:hover{color:var(--accent);border-color:var(--accent)}

@media (max-width:860px){
  .op-layout{grid-template-columns:1fr}
  .op-portrait{max-width:340px;margin:0 auto}
}
#addFix svg{width:16px;height:16px;vertical-align:-3px;margin-right:7px;stroke-width:2.4}