/* ================================================================
   oferta-cosmos.css - Oferta w designie Orbita (templates/page-oferta-neural.php)
   1. Hero: układ orbitalny usług (pozycje satelitów z oferta-cosmos.js)
   2. Scrollytelling: przyklejony ekran z 8 scenami (animacje startują,
      gdy scena dostaje .is-on - każde wejście odtwarza je od nowa)
   3. Konfigurator ekosystemu (konstelacja + suma cen "od")
   4. Cennik, narzędzia, hub linków
   Wszystko na transform/opacity; przy prefers-reduced-motion stany końcowe.
   ================================================================ */

/* ── 1. HERO / ORBITA ── */
.of-hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.of-orbit{position:relative;justify-self:end;width:100%;max-width:660px;aspect-ratio:1/.92;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--cz-ease);will-change:transform}
.of-orbit__rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.of-orbit__ring{fill:none;stroke:rgba(165,180,252,.42);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:3 5;animation:ofRing 40s linear infinite}
.of-orbit__ring[data-ring="1"]{stroke:rgba(34,211,238,.38);animation-duration:55s;animation-direction:reverse}
.of-orbit__ring[data-ring="2"]{stroke:rgba(232,121,249,.34);animation-duration:70s}
@keyframes ofRing{to{stroke-dashoffset:-200}}
.of-orbit__core{position:absolute;left:50%;top:46%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:50}
.of-orbit__halo{position:absolute;inset:-34%;border-radius:50%;background:conic-gradient(from 0deg,rgba(99,102,241,.0),rgba(99,102,241,.35),rgba(34,211,238,.28),rgba(232,121,249,.22),rgba(99,102,241,0));filter:blur(22px);animation:ofHalo 22s linear infinite}
@keyframes ofHalo{to{transform:rotate(360deg)}}
.of-orbit__planet{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;
	background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 26%),radial-gradient(circle at 70% 75%,rgba(34,211,238,.55),transparent 55%),radial-gradient(circle at 50% 50%,#4F46E5 0%,#312E81 58%,#0B1033 100%);
	box-shadow:inset -14px -18px 40px rgba(5,6,15,.7),inset 10px 10px 30px rgba(165,180,252,.25),0 0 60px -6px rgba(99,102,241,.75),0 0 0 1px rgba(165,180,252,.35)}
.of-orbit__planet::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px);mix-blend-mode:overlay;animation:ofBands 30s linear infinite}
@keyframes ofBands{to{background-position:200px 0}}
.of-orbit__planet img{position:relative;z-index:1;width:72%;height:auto;filter:drop-shadow(0 2px 10px rgba(5,6,15,.6))}
.of-orbit__sats{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.of-sat{position:absolute;left:0;top:0;will-change:transform,opacity;transition:filter .3s}
.of-sat a{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;border-radius:999px;white-space:nowrap;text-decoration:none;color:#fff;font:600 .78rem/1 var(--cz-body);
	background:rgba(9,12,30,.86);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 10%,transparent),0 10px 24px -12px rgba(0,0,0,.8);transition:background .3s,box-shadow .3s,transform .35s var(--cz-ease)}
.of-sat a i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);font-size:.7rem}
.of-sat a:hover,.of-sat a:focus-visible,.of-sat.is-hot a{background:color-mix(in srgb,var(--c) 26%,#090C1E);box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 18%,transparent),0 0 28px -4px var(--c);transform:scale(1.08);outline:none}
.of-orbit__readout{position:absolute;left:50%;bottom:0;z-index:60;display:grid;justify-items:center;gap:3px;min-width:240px;padding:12px 20px;border-radius:18px;transform:translateX(-50%);text-align:center;
	background:rgba(9,12,30,.78);border:1px solid rgba(165,180,252,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.of-orbit__readout-k{font:500 .6rem/1 var(--cz-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cz-cyan)}
.of-orbit__readout b{font:600 1.02rem/1.3 var(--cz-display);letter-spacing:-.015em;color:#fff}
.of-orbit__readout>span:last-child{font:600 .78rem/1.2 var(--cz-mono);color:var(--cz-lav)}
.cz-js .of-hero .of-orbit{opacity:0;transform:perspective(1100px) scale(.92)}
.cz-js .of-hero.is-in .of-orbit{opacity:1;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity 1.4s var(--cz-ease) .6s,transform 1.4s var(--cz-ease) .6s}
.of-orbit.is-live{transition:transform .6s var(--cz-ease)}

/* ── 2. SCROLLYTELLING ── */
.of-story__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);align-items:start}
.of-chapters{margin:0;padding:0;list-style:none}
.of-ch{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;min-height:62vh;padding:28px 0;border-top:1px solid var(--cz-line);opacity:.38;transition:opacity .5s var(--cz-ease)}
.of-ch:first-child{border-top:0;padding-top:4px}
.of-ch:last-child{min-height:48vh}
.of-ch.is-on{opacity:1}
.of-ch__n{font:600 .82rem/1.9 var(--cz-mono);color:var(--cz-lav)}
.of-page .of-ch h3{margin:0!important;font:600 clamp(1.3rem,2vw,1.7rem)/1.2 var(--cz-display);letter-spacing:-.02em}
.of-ch h3 a{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.of-ch h3 a i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(99,102,241,.2);color:var(--cz-lav);font-size:.9rem;transition:background .4s,color .4s}
.of-ch.is-on h3 a i{background:linear-gradient(135deg,var(--cz-indigo),var(--cz-cyan));color:#fff}
.of-ch__body>p{margin-top:12px!important;font-size:1rem;line-height:1.7;color:rgba(214,219,238,.86)}
.of-ch__pts{display:grid;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.of-ch__pts li{position:relative;padding-left:22px;font-size:.92rem;color:rgba(232,234,246,.9)}
.of-ch__pts li::before{content:"\f00c";position:absolute;left:0;top:1px;font:900 .7rem/1.6 "Font Awesome 7 Free","Font Awesome 6 Free";color:var(--cz-cyan)}
.of-ch__foot{display:flex;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:18px}
.of-ch__price{padding:8px 14px;border-radius:999px;background:#EEF0FF;color:var(--cz-ink-text);font:600 .82rem/1 var(--cz-mono)}
.of-ch__links{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.of-ch__links a{padding:6px 11px;border-radius:999px;border:1px solid rgba(165,180,252,.22);font-size:.78rem;color:rgba(232,234,246,.86);text-decoration:none;transition:background .3s,color .3s}
.of-ch__links a:hover{background:#EEF0FF;color:var(--cz-ink-text)}

.of-stage-wrap{position:sticky;top:max(96px,calc(50vh - 250px))}
.of-stage{position:relative;border-radius:22px;overflow:hidden;background:#0A0F1E;border:1px solid rgba(165,180,252,.2);box-shadow:0 60px 120px -60px rgba(0,0,0,.95),0 0 80px -40px rgba(99,102,241,.6)}
.of-stage__bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#10152E;border-bottom:1px solid rgba(165,180,252,.14)}
.of-stage__bar i{width:10px;height:10px;border-radius:50%}
.of-stage__bar i:nth-child(1){background:#F87171}.of-stage__bar i:nth-child(2){background:#FBBF24}.of-stage__bar i:nth-child(3){background:#34D399}
.of-stage__bar span{flex:1;max-width:360px;margin:0 auto;padding:4px 12px;border-radius:8px;background:rgba(255,255,255,.05);font:500 .72rem/1.3 var(--cz-mono);color:rgba(232,234,246,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.of-stage__screen{position:relative;aspect-ratio:16/11;container-type:inline-size;background:#F4F6FB;overflow:hidden}
.of-stage__dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.of-stage__dots i{width:8px;height:8px;border-radius:999px;background:rgba(165,180,252,.25);transition:width .4s var(--cz-ease),background .4s}
.of-stage__dots i.is-on{width:26px;background:var(--cz-cyan)}

.of-scene{position:absolute;inset:0;padding:5cqw;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s;color:#1E2640;font-size:2.2cqw}
.of-scene.is-on{opacity:1;visibility:visible;transition:opacity .45s ease .1s,visibility 0s}
.of-demo{position:absolute;right:3cqw;top:3cqw;padding:.6cqw 1.4cqw;border-radius:999px;background:#FEF3C7;color:#92400E;font:600 1.4cqw/1 var(--cz-mono);letter-spacing:.06em;text-transform:uppercase}
@keyframes ofIn{from{opacity:0;transform:translate3d(0,2cqw,0)}to{opacity:1;transform:none}}
@keyframes ofPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
@keyframes ofGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* scena 1: strona */
.of-scene--strony{background:linear-gradient(180deg,#fff,#F4F6FB)}
.sc-nav{display:flex;align-items:center;gap:2.4cqw;height:6cqw;padding:0 2cqw;border-radius:1.4cqw;background:#fff;box-shadow:0 1cqw 3cqw -1.5cqw rgba(30,38,64,.3)}
.sc-nav b{width:9cqw;height:2.4cqw;border-radius:1cqw;background:linear-gradient(90deg,#4F46E5,#22D3EE)}
.sc-nav span{width:7cqw;height:1.2cqw;border-radius:1cqw;background:#DADFEC}
.sc-nav em{margin-left:auto;width:11cqw;height:3.4cqw;border-radius:999px;background:#1E2640}
.sc-hero{position:relative;display:grid;gap:1.6cqw;margin-top:4cqw;padding-right:40cqw}
.sc-h1{display:block;height:4.6cqw;width:92%;border-radius:1cqw;background:#1E2640;transform-origin:left}
.sc-h1--b{width:64%;background:linear-gradient(90deg,#4F46E5,#22D3EE)}
.sc-p{display:block;height:1.4cqw;width:80%;border-radius:1cqw;background:#C7CDE0;transform-origin:left;box-shadow:0 2.6cqw 0 #C7CDE0}
.sc-btn{display:block;width:16cqw;height:4.4cqw;margin-top:3.4cqw;border-radius:999px;background:#4F46E5}
.sc-img{position:absolute;right:0;top:0;width:36cqw;height:24cqw;border-radius:2cqw;background:radial-gradient(circle at 30% 30%,#A5B4FC,transparent 60%),linear-gradient(135deg,#6366F1,#22D3EE)}
.sc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:4cqw}
.sc-cards span{height:13cqw;border-radius:1.6cqw;background:#fff;box-shadow:0 1cqw 3cqw -1.5cqw rgba(30,38,64,.35);border:1px solid #E3E7F1}
.sc-checks{position:absolute;left:5cqw;bottom:4cqw;display:flex;gap:1.6cqw}
.sc-checks span{display:inline-flex;align-items:center;gap:1cqw;padding:1cqw 2cqw;border-radius:999px;background:#D1FAE5;color:#047857;font:600 1.8cqw/1 var(--cz-body)}
.of-scene--strony.is-on .sc-nav{animation:ofIn .6s var(--cz-ease) both}
.of-scene--strony.is-on .sc-h1{animation:ofGrowX .7s var(--cz-ease) .4s both}
.of-scene--strony.is-on .sc-h1--b{animation-delay:.6s}
.of-scene--strony.is-on .sc-p{animation:ofGrowX .7s var(--cz-ease) .85s both}
.of-scene--strony.is-on .sc-btn{animation:ofPop .5s var(--cz-ease) 1.2s both}
.of-scene--strony.is-on .sc-img{animation:ofIn .8s var(--cz-ease) .7s both}
.of-scene--strony.is-on .sc-cards span{animation:ofIn .6s var(--cz-ease) both}
.of-scene--strony.is-on .sc-cards span:nth-child(1){animation-delay:1.4s}.of-scene--strony.is-on .sc-cards span:nth-child(2){animation-delay:1.55s}.of-scene--strony.is-on .sc-cards span:nth-child(3){animation-delay:1.7s}
.of-scene--strony.is-on .sc-checks span{animation:ofPop .5s var(--cz-ease) both}
.of-scene--strony.is-on .sc-checks span:nth-child(1){animation-delay:2.1s}.of-scene--strony.is-on .sc-checks span:nth-child(2){animation-delay:2.3s}.of-scene--strony.is-on .sc-checks span:nth-child(3){animation-delay:2.5s}

/* scena 2: sklep */
.of-scene--sklepy{background:linear-gradient(160deg,#fff,#EEF2FF)}
.sk-prod{position:absolute;left:6cqw;top:6cqw;display:grid;gap:1.2cqw;width:34cqw;padding:2.4cqw;border-radius:2.4cqw;background:#fff;box-shadow:0 2cqw 5cqw -2.4cqw rgba(30,38,64,.4)}
.sk-img{display:grid;place-items:center;height:22cqw;border-radius:1.6cqw;background:linear-gradient(135deg,#6366F1,#22D3EE);color:#fff;font-size:8cqw}
.sk-prod b{font:600 2.4cqw/1.2 var(--cz-display)}
.sk-prod em{font-style:normal;font-weight:700;font-size:2.4cqw;color:#4F46E5}
.sk-add{display:grid;place-items:center;height:5cqw;border-radius:1.2cqw;background:#1E2640;color:#fff;font-weight:600;font-size:2cqw}
.sk-cart{position:absolute;right:6cqw;top:5cqw;display:grid;place-items:center;width:8cqw;height:8cqw;border-radius:50%;background:#fff;box-shadow:0 1cqw 3cqw -1cqw rgba(30,38,64,.4);font-size:3.2cqw;color:#1E2640}
.sk-count{position:absolute;right:-1cqw;top:-1cqw;display:grid;place-items:center;width:3.6cqw;height:3.6cqw;border-radius:50%;background:#F43F5E;color:#fff;font-size:1.8cqw;opacity:0}
.sk-pay{position:absolute;right:6cqw;top:18cqw;display:grid;justify-items:center;gap:2cqw;width:40cqw;padding:3cqw;border-radius:2.4cqw;background:#fff;box-shadow:0 2cqw 5cqw -2.4cqw rgba(30,38,64,.4);opacity:0}
.sk-blik{padding:1cqw 2.4cqw;border-radius:1cqw;background:#1E2640;color:#fff;font:800 2.6cqw/1 var(--cz-display);letter-spacing:.08em}
.sk-code{display:flex;gap:1.2cqw}
.sk-code i{width:4.2cqw;height:5.4cqw;border-radius:1cqw;border:2px solid #DADFEC;background:#F4F6FB}
.sk-done{position:absolute;left:50%;bottom:5cqw;display:flex;align-items:center;gap:2cqw;padding:2cqw 3cqw;border-radius:2cqw;background:#ECFDF5;border:1px solid #A7F3D0;transform:translateX(-50%);opacity:0;font-size:1.9cqw;color:#065F46;white-space:nowrap}
.sk-done i{font-size:4cqw;color:#10B981}
.sk-done b{display:block;font-size:2.2cqw;color:#064E3B}
.sk-cursor{position:absolute;left:62cqw;top:60cqw;font-size:4cqw;color:#1E2640;filter:drop-shadow(0 .6cqw .6cqw rgba(0,0,0,.25));opacity:0}
.of-scene--sklepy.is-on .sk-prod{animation:ofIn .6s var(--cz-ease) both}
.of-scene--sklepy.is-on .sk-cursor{animation:skCursor 1.6s var(--cz-ease) .5s both}
@keyframes skCursor{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}75%{opacity:1;transform:translate(-40cqw,-16cqw)}85%{transform:translate(-40cqw,-16cqw) scale(.8)}100%{opacity:0;transform:translate(-40cqw,-16cqw) scale(1)}}
.of-scene--sklepy.is-on .sk-add{animation:skPress .3s ease 1.8s both}
@keyframes skPress{50%{transform:scale(.94);background:#4F46E5}}
.of-scene--sklepy.is-on .sk-count{animation:ofPop .45s var(--cz-ease) 2s both}
.of-scene--sklepy.is-on .sk-pay{animation:ofIn .6s var(--cz-ease) 2.4s both}
.of-scene--sklepy.is-on .sk-code i{animation:skDigit .2s ease both}
.of-scene--sklepy.is-on .sk-code i:nth-child(1){animation-delay:2.9s}.of-scene--sklepy.is-on .sk-code i:nth-child(2){animation-delay:3.05s}.of-scene--sklepy.is-on .sk-code i:nth-child(3){animation-delay:3.2s}.of-scene--sklepy.is-on .sk-code i:nth-child(4){animation-delay:3.35s}.of-scene--sklepy.is-on .sk-code i:nth-child(5){animation-delay:3.5s}.of-scene--sklepy.is-on .sk-code i:nth-child(6){animation-delay:3.65s}
@keyframes skDigit{to{background:radial-gradient(circle,#1E2640 32%,#fff 36%);border-color:#4F46E5}}
.of-scene--sklepy.is-on .sk-done{animation:skDone .6s var(--cz-ease) 4.1s both}
@keyframes skDone{from{opacity:0;transform:translate(-50%,3cqw)}to{opacity:1;transform:translate(-50%,0)}}

/* scena 3: wtyczka */
.of-scene--wtyczki{background:#0E1430;color:#C7D2FE}
.wt-code{margin:0;padding:3cqw;border-radius:2cqw;background:#070A18;border:1px solid rgba(165,180,252,.18);font:500 2.2cqw/1.9 var(--cz-mono);white-space:pre;overflow:hidden}
.wt-code span{display:block;width:0;overflow:hidden}
.wt-code i{font-style:normal;color:#F472B6}.wt-code b{font-weight:500;color:#22D3EE}.wt-code em{font-style:normal;color:#FBBF24}
.wt-plugin{display:flex;align-items:center;gap:2.4cqw;margin-top:4cqw;padding:2.4cqw 3cqw;border-radius:2cqw;background:#fff;color:#1E2640;opacity:0}
.wt-ic{display:grid;place-items:center;width:6cqw;height:6cqw;border-radius:1.4cqw;background:linear-gradient(135deg,#2271B1,#7F54B3);color:#fff;font-size:2.8cqw}
.wt-plugin b{display:block;font:600 2.4cqw/1.2 var(--cz-display)}
.wt-plugin span:nth-child(2){font-size:1.8cqw;color:#6B7490}
.wt-toggle{position:relative;margin-left:auto;width:9cqw;height:5cqw;border-radius:999px;background:#DADFEC;transition:background .3s}
.wt-toggle i{position:absolute;left:.6cqw;top:.6cqw;width:3.8cqw;height:3.8cqw;border-radius:50%;background:#fff;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.25)}
.of-scene--wtyczki.is-on .wt-code span{animation:wtType .7s steps(28) both}
.of-scene--wtyczki.is-on .wt-code span:nth-child(1){animation-delay:.3s}.of-scene--wtyczki.is-on .wt-code span:nth-child(2){animation-delay:.9s}.of-scene--wtyczki.is-on .wt-code span:nth-child(3){animation-delay:1.5s}.of-scene--wtyczki.is-on .wt-code span:nth-child(4){animation-delay:2.1s}.of-scene--wtyczki.is-on .wt-code span:nth-child(5){animation-delay:2.7s}
@keyframes wtType{from{width:0}to{width:100%}}
.of-scene--wtyczki.is-on .wt-plugin{animation:ofIn .6s var(--cz-ease) 3.3s both}
.of-scene--wtyczki.is-on .wt-toggle{animation:wtOn .3s ease 4s both}
.of-scene--wtyczki.is-on .wt-toggle i{animation:wtKnob .3s ease 4s both}
@keyframes wtOn{to{background:#10B981}}
@keyframes wtKnob{to{transform:translateX(4cqw)}}

/* scena 4: CRM */
.of-scene--crm{background:#F4F6FB}
.cr-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;height:100%}
.cr-cols>div{display:grid;align-content:start;gap:1.6cqw;padding:2cqw;border-radius:2cqw;background:#E9ECF4}
.cr-cols small{font:600 1.7cqw/1 var(--cz-mono);letter-spacing:.06em;text-transform:uppercase;color:#4B5470}
.cr-cols span{height:9cqw;border-radius:1.4cqw;background:#fff;border:1px solid #E3E7F1}
.cr-card{position:absolute;left:calc(5cqw + (100cqw - 10cqw - 4.8cqw) / 3 + 2.4cqw + 2cqw);top:calc(5cqw + 2cqw + 1.7cqw + 1.6cqw + 11cqw);width:calc((100cqw - 10cqw - 4.8cqw) / 3 - 4cqw);display:grid;gap:.8cqw;padding:1.8cqw 2cqw;border-radius:1.4cqw;background:#fff;border:2px solid #4F46E5;box-shadow:0 2cqw 4cqw -2cqw rgba(79,70,229,.6);font-size:1.9cqw}
.cr-card b{font:600 2.2cqw/1.2 var(--cz-display)}
.cr-card em{font-style:normal;font-weight:700;color:#4F46E5}
.cr-toast{position:absolute;left:50%;bottom:5cqw;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 3cqw;border-radius:999px;background:#1E2640;color:#fff;font-size:1.9cqw;white-space:nowrap;transform:translateX(-50%);opacity:0}
.cr-toast i{color:#FBBF24}
.of-scene--crm.is-on .cr-cols>div{animation:ofIn .5s var(--cz-ease) both}
.of-scene--crm.is-on .cr-cols>div:nth-child(2){animation-delay:.12s}.of-scene--crm.is-on .cr-cols>div:nth-child(3){animation-delay:.24s}
.of-scene--crm.is-on .cr-card{animation:crMove 1.4s var(--cz-ease) .8s both}
@keyframes crMove{0%{opacity:0;transform:none}15%{opacity:1;transform:none}40%{transform:translate(0,-1cqw) rotate(-3deg) scale(1.04)}100%{opacity:1;transform:translate(calc((100cqw - 10cqw - 4.8cqw) / 3 + 2.4cqw),-11cqw) rotate(0)}}
.of-scene--crm.is-on .cr-card{border-color:#4F46E5}
.of-scene--crm.is-on .cr-toast{animation:skDone .6s var(--cz-ease) 2.6s both}

/* scena 5: AI */
.of-scene--ai{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;align-items:center;background:linear-gradient(160deg,#fff,#ECFDF5)}
.ai-doc{position:relative;display:grid;gap:2cqw;align-content:start;height:52cqw;padding:3cqw;border-radius:2cqw;background:#fff;border:1px dashed #CBD2E3;overflow:hidden}
.ai-doc b{font:700 2.4cqw/1.2 var(--cz-display)}
.ai-doc span:not(.ai-scan){height:1.6cqw;border-radius:1cqw;background:#E3E7F1}
.ai-doc span:nth-of-type(2){width:70%}.ai-doc span:nth-of-type(3){width:85%}
.ai-scan{position:absolute;left:0;right:0;top:0;height:6cqw;background:linear-gradient(180deg,rgba(16,185,129,0),rgba(16,185,129,.35),rgba(16,185,129,0));border-bottom:2px solid #10B981}
.ai-fields{display:grid;gap:2cqw}
.ai-fields>div{display:flex;justify-content:space-between;align-items:center;padding:2cqw 2.4cqw;border-radius:1.6cqw;background:#fff;border:1px solid #E3E7F1;font-size:2cqw;opacity:0}
.ai-fields small{color:#6B7490;font:600 1.5cqw/1 var(--cz-mono);text-transform:uppercase;letter-spacing:.06em}
.ai-fields b{font-weight:700}
.ai-ok{background:#D1FAE5!important;border-color:#A7F3D0!important;color:#047857;font-weight:600;justify-content:flex-start!important;gap:1.4cqw}
.of-scene--ai.is-on .ai-scan{animation:aiScan 1.6s ease-in-out .3s 2 both}
@keyframes aiScan{from{transform:translateY(0)}to{transform:translateY(46cqw)}}
.of-scene--ai.is-on .ai-fields>div{animation:ofIn .5s var(--cz-ease) both}
.of-scene--ai.is-on .ai-fields>div:nth-child(1){animation-delay:1s}.of-scene--ai.is-on .ai-fields>div:nth-child(2){animation-delay:1.6s}.of-scene--ai.is-on .ai-fields>div:nth-child(3){animation-delay:2.2s}.of-scene--ai.is-on .ai-fields>div:nth-child(4){animation-delay:3.2s}

/* scena 6: SEO / GEO */
.of-scene--seo{background:#fff}
.se-search{display:flex;align-items:center;gap:2cqw;height:7cqw;padding:0 3cqw;border-radius:999px;border:1px solid #DADFEC;box-shadow:0 1cqw 3cqw -1.6cqw rgba(30,38,64,.35);font-size:2.3cqw;color:#1E2640}
.se-search i{color:#6B7490}
.se-q{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid #4F46E5}
.se-res{position:relative;margin:4cqw 0 0;padding:0;list-style:none;height:40cqw}
.se-res li{position:absolute;left:0;right:0;display:grid;gap:1cqw;padding:1.6cqw 2cqw;border-radius:1.6cqw;transition:none}
.se-res li:nth-child(1){top:0}.se-res li:nth-child(2){top:10cqw}.se-res li:nth-child(3){top:20cqw}.se-res li:nth-child(4){top:30cqw}
.se-res b{font:600 2.2cqw/1.2 var(--cz-body);color:#1A0DAB}
.se-res span{height:1.4cqw;width:80%;border-radius:1cqw;background:#E3E7F1}
.se-you{background:#EEF2FF;border:1px solid #C7D2FE}
.se-ai{position:absolute;left:5cqw;right:5cqw;bottom:4cqw;display:flex;gap:2cqw;align-items:center;padding:2.2cqw 3cqw;border-radius:2cqw;background:linear-gradient(135deg,#F5F3FF,#ECFEFF);border:1px solid #DDD6FE;font-size:2cqw;opacity:0}
.se-ai i{font-size:3cqw;color:#8B5CF6}
.of-scene--seo.is-on .se-q{animation:seType 1s steps(15) .3s both}
@keyframes seType{to{width:21cqw}}
.of-scene--seo.is-on .se-res li{animation:ofIn .4s var(--cz-ease) both}
.of-scene--seo.is-on .se-res li:nth-child(1){animation-delay:1.3s}.of-scene--seo.is-on .se-res li:nth-child(2){animation-delay:1.4s}.of-scene--seo.is-on .se-res li:nth-child(4){animation-delay:1.6s}
.of-scene--seo.is-on .se-res li.se-you{animation:seClimb 1.4s var(--cz-ease) 1.5s both}
@keyframes seClimb{0%{opacity:0;transform:none}20%{opacity:1;transform:none}100%{opacity:1;transform:translateY(-20cqw)}}
.of-scene--seo.is-on .se-res li:nth-child(1),.of-scene--seo.is-on .se-res li:nth-child(2){animation:ofIn .4s var(--cz-ease) 1.3s both,seDown 1.1s var(--cz-ease) 1.8s forwards}
@keyframes seDown{to{transform:translateY(10cqw)}}
.of-scene--seo.is-on .se-ai{animation:ofIn .6s var(--cz-ease) 3.2s both}

/* scena 7: reklama */
.of-scene--ads{background:#fff}
.ad-top{display:flex;justify-content:space-between;align-items:center}
.ad-top small{display:block;font:600 1.5cqw/1 var(--cz-mono);text-transform:uppercase;letter-spacing:.06em;color:#6B7490}
.ad-top b{font:600 2.6cqw/1.3 var(--cz-display)}
.ad-live{display:inline-flex;align-items:center;gap:1cqw;margin-right:22cqw;padding:1cqw 2cqw;border-radius:999px;background:#D1FAE5;color:#047857;font-weight:600;font-size:1.8cqw}
.ad-live i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#10B981}
.ad-chart{display:block;width:100%;height:30cqw;margin-top:3cqw}
.ad-area{fill:rgba(99,102,241,.12);opacity:0}
.ad-line{fill:none;stroke:#4F46E5;stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1600;stroke-dashoffset:1600}
.ad-bars{display:grid;grid-template-columns:repeat(6,1fr);gap:2cqw;align-items:end;height:16cqw;margin-top:3cqw}
.ad-bars span{height:var(--h);border-radius:1cqw 1cqw .4cqw .4cqw;background:linear-gradient(180deg,#22D3EE,#6366F1);transform:scaleY(0);transform-origin:bottom}
.of-scene--ads.is-on .ad-line{animation:adDraw 1.6s var(--cz-ease) .3s forwards}
@keyframes adDraw{to{stroke-dashoffset:0}}
.of-scene--ads.is-on .ad-area{animation:adFade .8s ease 1.4s forwards}
@keyframes adFade{to{opacity:1}}
.of-scene--ads.is-on .ad-bars span{animation:adBar .6s var(--cz-ease) both}
.of-scene--ads.is-on .ad-bars span:nth-child(1){animation-delay:1s}.of-scene--ads.is-on .ad-bars span:nth-child(2){animation-delay:1.1s}.of-scene--ads.is-on .ad-bars span:nth-child(3){animation-delay:1.2s}.of-scene--ads.is-on .ad-bars span:nth-child(4){animation-delay:1.3s}.of-scene--ads.is-on .ad-bars span:nth-child(5){animation-delay:1.4s}.of-scene--ads.is-on .ad-bars span:nth-child(6){animation-delay:1.5s}
@keyframes adBar{to{transform:scaleY(1)}}

/* scena 8: opieka */
.of-scene--opieka{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:auto 1fr;gap:3cqw 4cqw;background:#0E1430;color:#E8EAF6}
.op-pulse{grid-column:1/3;width:100%;height:18cqw;padding:2cqw;border-radius:2cqw;background:#070A18;border:1px solid rgba(165,180,252,.18)}
.op-pulse path{fill:none;stroke:#34D399;stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-dasharray:1600;stroke-dashoffset:1600;filter:drop-shadow(0 0 4px rgba(52,211,153,.8))}
.op-list{display:grid;gap:2cqw;margin:0;padding:0;list-style:none;align-content:start}
.op-list li{display:flex;align-items:center;gap:1.6cqw;padding:2cqw 2.4cqw;border-radius:1.6cqw;background:rgba(255,255,255,.05);border:1px solid rgba(165,180,252,.16);font-size:2.1cqw;opacity:0}
.op-list i{color:#34D399}
.op-shield{display:grid;place-items:center;align-self:center;justify-self:center;width:26cqw;height:26cqw;border-radius:50%;background:radial-gradient(circle,rgba(52,211,153,.3),transparent 65%);font-size:13cqw;color:#34D399}
.of-scene--opieka.is-on .op-pulse path{animation:opBeat 2.6s linear .2s infinite}
@keyframes opBeat{0%{stroke-dashoffset:1600;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.of-scene--opieka.is-on .op-list li{animation:ofIn .5s var(--cz-ease) both}
.of-scene--opieka.is-on .op-list li:nth-child(1){animation-delay:.6s}.of-scene--opieka.is-on .op-list li:nth-child(2){animation-delay:.9s}.of-scene--opieka.is-on .op-list li:nth-child(3){animation-delay:1.2s}.of-scene--opieka.is-on .op-list li:nth-child(4){animation-delay:1.5s}
.of-scene--opieka.is-on .op-shield{animation:ofPop .8s var(--cz-ease) 1.9s both}

/* ── 3. KONFIGURATOR ── */
.of-build{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.8fr);gap:18px;align-items:stretch}
.of-build__pick{display:grid;gap:8px;align-content:start}
.of-chip{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid rgba(11,16,32,.12);background:#fff;color:var(--cz-ink-text);font:500 .9rem/1.2 var(--cz-body);text-align:left;cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--cz-ease)}
.of-chip i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#EEF0FF;color:var(--cz-indigo-deep);transition:background .3s,color .3s}
.of-chip em{font-style:normal;font:600 .7rem/1 var(--cz-mono);color:var(--cz-muted-l)}
.of-chip:hover{border-color:var(--cz-indigo-deep);transform:translateX(3px)}
.of-chip[aria-pressed="true"]{background:var(--cz-ink-text);border-color:transparent;color:#fff}
.of-chip[aria-pressed="true"] i{background:linear-gradient(135deg,var(--cz-indigo),var(--cz-cyan));color:#fff}
.of-chip[aria-pressed="true"] em{color:var(--cz-lav)}
.of-chip:focus-visible{outline:2px solid var(--cz-indigo-deep);outline-offset:2px}
.of-build__map{position:relative;min-height:420px;border-radius:26px;overflow:hidden;
	background:radial-gradient(circle at 50% 50%,rgba(99,102,241,.3),transparent 55%),radial-gradient(rgba(165,180,252,.14) 1px,transparent 1.4px) 0 0/18px 18px,linear-gradient(180deg,#0F1433,#070A18);border:1px solid rgba(165,180,252,.2)}
.of-build__lines{position:absolute;inset:0;width:100%;height:100%}
.of-build__lines line{stroke:rgba(34,211,238,.75);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:900;stroke-dashoffset:900;animation:ofLine .7s var(--cz-ease) forwards;filter:drop-shadow(0 0 3px rgba(34,211,238,.8))}
.of-build__lines line.is-link{stroke:rgba(165,180,252,.35);stroke-width:1;filter:none}
@keyframes ofLine{to{stroke-dashoffset:0}}
.of-build__core{position:absolute;z-index:2;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;transform:translate(-50%,-50%);text-align:center;font:600 .78rem/1.2 var(--cz-display);color:#fff;
	background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.4),transparent 30%),radial-gradient(circle,#4F46E5,#1E1B4B 80%);box-shadow:0 0 50px -6px rgba(99,102,241,.9),0 0 0 1px rgba(165,180,252,.4)}
.of-node{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%) scale(.82);background:rgba(255,255,255,.06);border:1px solid rgba(165,180,252,.22);color:rgba(165,180,252,.5);transition:transform .45s var(--cz-ease),background .4s,color .4s,box-shadow .4s}
.of-node.is-on{transform:translate(-50%,-50%) scale(1.1);background:linear-gradient(135deg,var(--cz-indigo),var(--cz-cyan));border-color:transparent;color:#fff;box-shadow:0 0 26px -2px rgba(34,211,238,.9)}
.of-build__sum{display:grid;align-content:start;gap:12px;padding:22px;border-radius:24px;background:#fff;border:1px solid rgba(11,16,32,.08);box-shadow:0 40px 70px -56px rgba(49,46,129,.5)}
.of-build__sum small{display:block;font:500 .64rem/1 var(--cz-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--cz-muted-l)}
.of-build__sum b{display:block;margin-top:6px;font:600 clamp(1.5rem,2.2vw,1.9rem)/1 var(--cz-display);letter-spacing:-.02em;color:var(--cz-ink-text)}
.of-build__sum p{margin:0!important;font-size:.86rem;line-height:1.5;color:var(--cz-muted-l)}
.of-build__sum .cz-btn[disabled]{opacity:.45;pointer-events:none}
.of-build__note{font-size:.72rem;line-height:1.4;color:var(--cz-muted-l)}

/* ── 4. CENNIK ── */
.of-prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.of-price{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 12px;padding:18px 40px 18px 18px;border-radius:20px;text-decoration:none;color:var(--cz-text);
	background:linear-gradient(180deg,rgba(21,27,56,.7),rgba(8,11,25,.85));border:1px solid rgba(165,180,252,.14);transition:border-color .35s,transform .45s var(--cz-ease),box-shadow .45s}
.of-price:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 20px 40px -26px color-mix(in srgb,var(--c) 70%,transparent)}
.of-price__ic{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
.of-price__name{font-size:.86rem;color:rgba(232,234,246,.86)}
.of-price__val{font:600 1.05rem/1.2 var(--cz-display);letter-spacing:-.015em;color:#fff}
.of-price__go{position:absolute;right:16px;top:50%;font-size:.7rem;color:var(--cz-muted);transform:translateY(-50%);transition:transform .4s var(--cz-ease),color .3s}
.of-price:hover .of-price__go{color:#fff;transform:translate(4px,-50%)}

/* ── 5. NARZĘDZIA + HUB ── */
.of-free{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.of-free__card{position:relative;display:grid;gap:8px;padding:24px;border-radius:24px;text-decoration:none;color:var(--cz-muted);font-size:.9rem;line-height:1.55;
	background:radial-gradient(120% 70% at 100% 0%,rgba(99,102,241,.22),transparent 60%),linear-gradient(180deg,#0F1433,#070A18);border:1px solid rgba(165,180,252,.18);transition:transform .45s var(--cz-ease),border-color .35s}
.of-free__card:hover{transform:translateY(-4px);border-color:rgba(165,180,252,.45)}
.of-free__ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--cz-indigo),var(--cz-cyan));color:#fff;font-size:1.05rem}
.of-free__badge{position:absolute;right:20px;top:22px;padding:5px 10px;border-radius:999px;background:#D1FAE5;color:#047857;font:600 .6rem/1 var(--cz-mono);letter-spacing:.08em;text-transform:uppercase}
.of-free__card b{margin-top:6px;font:600 1.1rem/1.3 var(--cz-display);letter-spacing:-.015em;color:#fff}
.of-free__go{margin-top:4px;color:var(--cz-cyan);transition:transform .4s var(--cz-ease)}
.of-free__card:hover .of-free__go{transform:translateX(5px)}
.of-hub{margin-top:clamp(40px,5vw,64px);padding:clamp(22px,3vw,34px);border-radius:28px;border:1px solid rgba(165,180,252,.16);background:rgba(255,255,255,.02)}
.of-page .of-hub__h{margin:0 0 12px!important;font:600 1.15rem/1.3 var(--cz-display);letter-spacing:-.015em;color:#fff}
.of-hub p{font-size:.95rem;line-height:1.75;color:rgba(214,219,238,.84)}
.of-hub p a{color:var(--cz-lav);text-decoration:underline;text-decoration-color:rgba(165,180,252,.35);text-underline-offset:3px}
.of-hub__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.of-hub__grid a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(165,180,252,.14);font-size:.82rem;color:rgba(232,234,246,.86);text-decoration:none;transition:background .3s,border-color .3s}
.of-hub__grid a i{color:var(--cz-cyan);font-size:.72rem}
.of-hub__grid a:hover{background:rgba(255,255,255,.05);border-color:rgba(165,180,252,.35)}

/* ── RESPONSYWNOŚĆ ── */
@media (max-width:1180px){
	.of-prices,.of-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.of-build{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
	.of-build__sum{grid-column:1/-1}
}
@media (max-width:1080px){
	.of-hero__grid{grid-template-columns:1fr}
	.of-orbit{justify-self:center;max-width:560px;margin-top:6px}
	.of-story__grid{grid-template-columns:1fr}
	.of-stage-wrap{position:sticky;top:70px;z-index:3;order:-1;margin:0 -4px;padding:10px 4px 14px;background:linear-gradient(180deg,#05060F 88%,rgba(5,6,15,0))}
	.of-stage{max-width:560px;margin:0 auto}
	.of-stage__dots{margin-top:10px}
	.of-ch{min-height:0;padding:30px 0 70px;opacity:.5}
	.of-ch:last-child{min-height:0}
}
@media (max-width:720px){
	.of-hero .cz-proof dd{font-size:1.12rem}
	.of-sat a{padding:5px 9px 5px 5px;font-size:.66rem;gap:6px}
	.of-sat a i{width:19px;height:19px;font-size:.58rem}
	.of-orbit__readout{min-width:0;width:86%;padding:10px 14px}
	.of-stage__screen{aspect-ratio:16/10}
	.of-build{grid-template-columns:1fr}
	.of-build__map{min-height:300px;order:-1}
	.of-prices,.of-free,.of-hub__grid{grid-template-columns:1fr}
	.of-ch{grid-template-columns:36px minmax(0,1fr);gap:10px}
}
@media (prefers-reduced-motion:reduce){
	.of-orbit__ring,.of-orbit__halo,.of-orbit__planet::after{animation:none}
	.cz-js .of-hero .of-orbit{opacity:1;transform:none}
	.of-scene *{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
}