/* =========================================================
   Animowane sceny w hero podstron usług
   Jednostki cqw: 1cqw = 1% szerokości sceny. Obszar treści: 100 × 71 cqw.
   Stan bazowy = stan końcowy animacji (dla prefers-reduced-motion i braku JS).
   ========================================================= */

.scene {
  position: relative; width: 100%; max-width: 540px; margin-inline: auto; aspect-ratio: 5 / 4;
  container-type: inline-size;
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 85% 0%, rgb(var(--accent-2-rgb) / .09), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-strong);
  box-shadow: 0 50px 100px -40px rgb(0 0 0 / .85), 0 0 90px -30px rgb(var(--accent-rgb) / .35);
  transform: perspective(1400px) rotateY(-8deg) rotateX(4deg);
  transition: transform .8s var(--ease);
}
.scene:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.scene.is-paused, .scene.is-paused * { animation-play-state: paused !important; }

.scene__bar { display: flex; align-items: center; gap: 1.4cqw; height: 9cqw; padding: 0 3.5cqw; border-bottom: 1px solid var(--border); }
.scene__bar i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--border-strong); }
.scene__bar i:nth-child(1) { background: #ff6b6b; }
.scene__bar i:nth-child(2) { background: #ffd166; }
.scene__bar i:nth-child(3) { background: #7cf29c; }
.scene__bar b { margin-left: auto; font: 400 2.2cqw/1 var(--font-mono); color: var(--muted); }
.scene__body { position: absolute; inset: 9cqw 0 0; font-size: 2.4cqw; line-height: 1.35; color: var(--text); }
.scene__body svg { overflow: visible; }

/* Wspólne elementy */
.sc-cursor { position: absolute; left: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; pointer-events: none; }
.sc-cursor__arrow {
  width: 4.6cqw; height: 4.6cqw; fill: var(--text); stroke: var(--bg); stroke-width: 1.4;
  filter: drop-shadow(0 .6cqw 1cqw rgb(0 0 0 / .5));
}
.sc-cursor span {
  margin: 3.6cqw 0 0 -1cqw; padding: .5cqw 1.2cqw; border-radius: 1cqw;
  background: var(--accent-2); color: #04121c; font: 600 1.8cqw/1.2 var(--font-body);
}
@keyframes sc-pop { from { opacity: 0; transform: scale(.94); } }
@keyframes sc-fade { from { opacity: 0; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(2.5cqw); } }
@keyframes sc-grow-y { from { transform: scaleY(0); } }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* ---------- 1. Strony WWW: makieta składa się w stronę ---------- */
.sc-web__url {
  position: absolute; left: 5cqw; right: 5cqw; top: 3.5cqw; height: 6cqw;
  display: flex; align-items: center; gap: 1.5cqw; padding: 0 2.5cqw;
  border-radius: 99px; background: var(--bg); border: 1px solid var(--border);
  font: 400 2.2cqw/1 var(--font-mono); color: var(--muted);
}
.sc-web__url svg { width: 2.6cqw; height: 2.6cqw; fill: none; stroke: var(--accent); stroke-width: 2.2; }
.sc-web__page { position: absolute; left: 5cqw; right: 5cqw; top: 12.5cqw; bottom: 4cqw; }
.wf { position: absolute; border: 1px dashed var(--border-strong); border-radius: 1.2cqw; }
.wf::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: var(--fill, rgb(233 236 243 / .08)); transform-origin: left;
}
.wf--nav { left: 0; right: 0; top: 0; height: 7%; --fill: rgb(233 236 243 / .07); }
.wf--h1 { left: 0; top: 14%; width: 50%; height: 8%; --fill: rgb(233 236 243 / .88); }
.wf--h2 { left: 0; top: 25%; width: 38%; height: 8%; --fill: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.wf--p { left: 0; top: 38%; width: 46%; height: 3.5%; --fill: rgb(154 163 181 / .45); }
.wf--p2 { left: 0; top: 44%; width: 36%; height: 3.5%; --fill: rgb(154 163 181 / .45); }
.wf--btn { left: 0; top: 53%; width: 20%; height: 8%; border-radius: 99px; --fill: var(--accent); }
.wf--btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  border: 2px solid var(--accent); opacity: 0;
}
.wf--img {
  right: 0; top: 14%; width: 42%; height: 47%;
  --fill: radial-gradient(circle at 30% 30%, rgb(var(--accent-2-rgb) / .6), transparent 60%), linear-gradient(135deg, rgb(var(--accent-rgb) / .4), rgb(var(--accent-2-rgb) / .2));
}
.wf--c1, .wf--c2, .wf--c3 { top: 70%; width: 31%; height: 30%; }
.wf--c1 { left: 0; } .wf--c2 { left: 34.5%; } .wf--c3 { left: 69%; }
.scene.is-run .wf { animation: sc-pop .5s var(--ease) calc(var(--d) * .08s) both; }
.scene.is-run .wf::after { animation: sc-fill .6s var(--ease) calc(1.3s + var(--d) * .28s) both; }
.scene.is-run .wf--btn::before { animation: sc-ripple .8s ease-out 4.1s both; }
@keyframes sc-fill { from { transform: scaleX(0); opacity: 0; } }
@keyframes sc-ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

.sc-web__badge {
  position: absolute; right: 3cqw; bottom: 2.5cqw; display: flex; align-items: center; gap: 1.6cqw;
  padding: 1.4cqw 2.6cqw 1.4cqw 1.4cqw; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  box-shadow: 0 2cqw 4cqw -1cqw rgb(0 0 0 / .6); font-size: 1.9cqw; color: var(--muted); line-height: 1.2;
}
.sc-web__badge b {
  display: grid; place-items: center; width: 7.5cqw; height: 7.5cqw; border-radius: 50%;
  border: .6cqw solid var(--accent); color: var(--accent); font: 700 2.8cqw/1 var(--font-display);
}
.scene.is-run .sc-web__badge { animation: sc-badge .6s cubic-bezier(.3, 1.6, .5, 1) 4.6s both; }
@keyframes sc-badge { from { opacity: 0; transform: scale(.4) translateY(4cqw); } }

.sc-web__cursor { transform: translate(60cqw, 32cqw); }
.scene.is-run .sc-web__cursor { animation: sc-web-cursor 5.2s ease-in-out 1.6s both; }
@keyframes sc-web-cursor {
  0% { transform: translate(82cqw, 62cqw); }
  45% { transform: translate(14cqw, 43.6cqw); }
  50% { transform: translate(14cqw, 43.6cqw) scale(.8); }
  56% { transform: translate(14cqw, 43.6cqw) scale(1); }
  100% { transform: translate(60cqw, 32cqw); }
}

/* ---------- 2. Sklep: produkty lecą do koszyka ---------- */
.sc-shop__top { position: absolute; left: 5cqw; right: 5cqw; top: 3cqw; height: 7cqw; display: flex; align-items: center; gap: 3cqw; }
.sc-shop__logo { font: 700 3cqw/1 var(--font-display); }
.sc-shop__logo b { color: var(--accent); }
.sc-shop__search { flex: 1; height: 4.6cqw; border-radius: 99px; background: var(--bg); border: 1px solid var(--border); }
.sc-shop__cart { position: relative; display: grid; place-items: center; width: 6cqw; height: 6cqw; }
.sc-shop__cart svg { width: 4.4cqw; height: 4.4cqw; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-shop__count {
  position: absolute; top: -.6cqw; right: -1cqw; width: 3.4cqw; height: 3.4cqw; overflow: hidden;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); text-align: center;
  font: 700 2cqw/3.4cqw var(--font-mono);
}
.sc-shop__count > span { display: block; transform: translateY(-10.2cqw); }
.sc-shop__count i { display: block; height: 3.4cqw; font-style: normal; }
.scene.is-run .sc-shop__count > span { animation: sc-count 6s linear both; }
.scene.is-run .sc-shop__cart { animation: sc-bump 6s linear both; }
@keyframes sc-count {
  0%, 22% { transform: translateY(0); }
  23%, 49% { transform: translateY(-3.4cqw); }
  50%, 76% { transform: translateY(-6.8cqw); }
  77%, 100% { transform: translateY(-10.2cqw); }
}
@keyframes sc-bump {
  0%, 21%, 26%, 48%, 53%, 75%, 80%, 100% { transform: none; }
  23%, 50%, 77% { transform: scale(1.2) rotate(-8deg); }
}

.sc-shop__grid { position: absolute; left: 5cqw; right: 5cqw; top: 13cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5cqw; }
.sc-prod { padding: 1.6cqw; border-radius: 1.6cqw; background: var(--bg); border: 1px solid var(--border); display: grid; gap: 1cqw; }
.sc-prod i, .sc-fly {
  height: 13cqw; border-radius: 1.1cqw;
  background: radial-gradient(circle at 35% 35%, rgb(255 255 255 / .35), transparent 45%), linear-gradient(135deg, #7cf29c, #5cc8ff);
  filter: hue-rotate(var(--h));
}
.sc-prod b { height: 1.5cqw; width: 85%; border-radius: 1cqw; background: rgb(233 236 243 / .6); }
.sc-prod s { height: 1.2cqw; width: 55%; border-radius: 1cqw; background: rgb(154 163 181 / .35); }
.sc-prod em { font: 600 2.1cqw/1 var(--font-mono); font-style: normal; color: var(--accent); }
.sc-fly { position: absolute; left: calc(var(--x) * 1cqw); top: 18.1cqw; width: 6cqw; height: 6cqw; opacity: 0; z-index: 3; }
.scene.is-run .sc-fly { animation: sc-fly .9s cubic-bezier(.55, 0, .75, .2) var(--t) both; }
@keyframes sc-fly {
  0% { opacity: 0; transform: none; }
  15% { opacity: 1; transform: scale(1.15); }
  100% { opacity: .2; transform: translate(calc(var(--tx) * 1cqw), -14.6cqw) scale(.25); }
}

.sc-shop__sales {
  position: absolute; left: 5cqw; bottom: 4cqw; width: 42cqw; height: 25cqw; padding: 2.4cqw 2.6cqw;
  display: flex; flex-direction: column; border-radius: 2cqw; background: var(--bg); border: 1px solid var(--border);
}
.sc-shop__sales span { font-size: 1.9cqw; color: var(--muted); }
.sc-shop__sales b { font: 700 4.4cqw/1.2 var(--font-display); }
.sc-bars { flex: 1; display: flex; align-items: flex-end; gap: 1.1cqw; margin-top: 1.2cqw; }
.sc-bars i {
  flex: 1; height: calc(var(--v) * 1%); border-radius: .6cqw .6cqw .2cqw .2cqw; transform-origin: bottom;
  background: linear-gradient(180deg, var(--accent), rgb(var(--accent-rgb) / .25));
}
.scene.is-run .sc-bars i { animation: sc-grow-y .8s var(--ease) calc(.4s + var(--i) * .12s) both; }

.sc-toast {
  position: absolute; right: 5cqw; bottom: 4cqw; width: 44cqw; display: flex; align-items: center; gap: 2cqw;
  padding: 2.4cqw; border-radius: 2cqw; background: var(--surface-2); border: 1px solid rgb(var(--accent-rgb) / .4);
  box-shadow: 0 2cqw 5cqw -1cqw rgb(0 0 0 / .6), 0 0 6cqw -2cqw rgb(var(--accent-rgb) / .5);
  font-size: 2.2cqw;
}
.sc-toast > svg, .sc-audit__done svg, .sc-srv__ok svg, .sc-code__badge svg {
  flex-shrink: 0; width: 1.4em; height: 1.4em; padding: .2em; border-radius: 50%;
  background: var(--accent); fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.sc-toast > svg { width: 5cqw; height: 5cqw; padding: 1cqw; }
.sc-toast small { display: block; font-size: 1.8cqw; color: var(--muted); }
.scene.is-run .sc-toast { animation: sc-slide .6s var(--ease) 5s both; }
@keyframes sc-slide { from { opacity: 0; transform: translateX(8cqw); } }

/* ---------- 3. Landing: lejek konwersji ---------- */
.sc-funnel__shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-funnel__body { fill: rgb(var(--accent-2-rgb) / .06); stroke: var(--border-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sc-funnel__tier { fill: none; stroke: var(--border-strong); stroke-width: 1px; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sc-funnel__lbl {
  position: absolute; left: 38cqw; top: calc(var(--y) * 1cqw); transform: translateX(-50%);
  font: 400 1.8cqw/1 var(--font-mono); color: var(--muted); white-space: nowrap;
}
.sc-drop {
  position: absolute; left: 38cqw; top: 3cqw; width: 1.5cqw; height: 1.5cqw; margin-left: -.75cqw; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 1.4cqw rgb(var(--accent-2-rgb) / .8);
  opacity: 0; animation: sc-drop 3.2s cubic-bezier(.45, 0, .6, 1) var(--d) infinite;
}
.sc-drop--lost { background: var(--muted); box-shadow: none; animation-name: sc-drop-lost; }
@keyframes sc-drop {
  0% { opacity: 0; transform: translate(calc(var(--x) * 1cqw), 0); }
  8% { opacity: 1; }
  88% { opacity: 1; transform: translate(0, 42cqw); background: var(--accent); }
  100% { opacity: 0; transform: translate(0, 45cqw); background: var(--accent); }
}
@keyframes sc-drop-lost {
  0% { opacity: 0; transform: translate(calc(var(--x) * 1cqw), 0); }
  8% { opacity: .8; }
  50% { opacity: 0; transform: translate(calc(var(--x) * 1.35cqw), 17cqw); }
  100% { opacity: 0; }
}
.sc-funnel__cta {
  position: absolute; left: 38cqw; top: 46.5cqw; transform: translateX(-50%);
  padding: 1.8cqw 4.4cqw; border-radius: 99px; white-space: nowrap;
  background: var(--accent); color: var(--accent-ink); font: 700 2.4cqw/1 var(--font-body);
  animation: sc-pulse 1.05s ease-out infinite;
}
@keyframes sc-pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .6); } 100% { box-shadow: 0 0 0 3.2cqw rgb(var(--accent-rgb) / 0); } }
.sc-funnel__stat, .sc-funnel__ab {
  position: absolute; right: 4cqw; width: 26cqw; padding: 2.2cqw 2.4cqw;
  border-radius: 2cqw; background: var(--bg); border: 1px solid var(--border);
}
.sc-funnel__stat { top: 4cqw; }
.sc-funnel__stat span, .sc-funnel__ab span { font-size: 1.8cqw; color: var(--muted); }
.sc-funnel__stat b { display: block; font: 700 5.2cqw/1.15 var(--font-display); color: var(--accent); }
.sc-funnel__stat svg { width: 100%; height: 7cqw; margin-top: 1cqw; }
.sc-funnel__stat path { fill: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 160; stroke-dashoffset: 0; }
.scene.is-run .sc-funnel__stat path { animation: sc-draw 2.4s var(--ease) .3s both; }
@keyframes sc-draw { from { stroke-dashoffset: 160; } }
.sc-funnel__ab { top: 34cqw; display: grid; gap: 1.2cqw; }
.sc-funnel__ab p { display: grid; grid-template-columns: 2.4cqw 1fr 6cqw; align-items: center; gap: 1.2cqw; font-size: 1.9cqw; }
.sc-funnel__ab b { font-family: var(--font-mono); color: var(--muted); }
.sc-funnel__ab i { height: 1.6cqw; width: var(--w); border-radius: 1cqw; background: var(--border-strong); transform-origin: left; }
.sc-funnel__ab em { font: 600 1.9cqw/1 var(--font-mono); font-style: normal; color: var(--muted); text-align: right; }
.sc-funnel__ab .is-win i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.sc-funnel__ab .is-win em, .sc-funnel__ab .is-win b { color: var(--accent); }
.scene.is-run .sc-funnel__ab i { animation: sc-grow-x 1.6s var(--ease) .6s both; }
@keyframes sc-grow-x { from { transform: scaleX(0); } }

/* ---------- 4. Audyt: wskaźnik z czerwonego na zielony ---------- */
.sc-audit__gauge { position: absolute; left: 50%; top: 3cqw; width: 50cqw; transform: translateX(-50%); }
.sc-audit__gauge svg { display: block; width: 100%; }
.sc-audit__track, .sc-audit__arc { fill: none; stroke-width: 14; stroke-linecap: round; }
.sc-audit__track { stroke: var(--border); }
.sc-audit__arc { stroke: url(#sc-audit-grad); stroke-dasharray: 100; stroke-dashoffset: 2; filter: drop-shadow(0 0 4px rgb(var(--accent-rgb) / .4)); }
.sc-audit__needle { fill: var(--text); transform-box: view-box; transform-origin: 100px 106px; transform: rotate(86.4deg); }
.sc-audit__needle circle { fill: var(--surface-2); stroke: var(--text); stroke-width: 3; }
.scene.is-run .sc-audit__arc { animation: sc-arc 2.6s cubic-bezier(.3, .7, .2, 1) .5s both; }
.scene.is-run .sc-audit__needle { animation: sc-needle 2.6s cubic-bezier(.3, .7, .2, 1) .5s both; }
@keyframes sc-arc { from { stroke-dashoffset: 62; } }
@keyframes sc-needle { from { transform: rotate(-21.6deg); } 70% { transform: rotate(92deg); } }
.sc-audit__score { position: absolute; left: 0; right: 0; top: calc(100% + .6cqw); text-align: center; }
.sc-audit__score b { display: inline; font: 700 6.4cqw/1 var(--font-display); color: var(--accent); }
.sc-audit__score span { margin-left: 1.4cqw; }
.sc-audit__score span { font-size: 2cqw; color: var(--muted); }
.sc-audit__metrics { position: absolute; left: 8cqw; right: 8cqw; top: 42cqw; display: grid; gap: 2cqw; }
.sc-audit__metrics li { display: grid; grid-template-columns: 7cqw 1fr 12cqw; align-items: center; gap: 2.4cqw; }
.sc-audit__metrics span { font: 600 2.1cqw/1 var(--font-mono); color: var(--muted); }
.sc-audit__metrics i { position: relative; height: 1.8cqw; border-radius: 1cqw; background: var(--border); overflow: hidden; }
.sc-audit__metrics i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--to); border-radius: inherit; background: var(--accent); }
.sc-audit__metrics b { font: 600 2.3cqw/1 var(--font-mono); text-align: right; color: var(--accent); }
.scene.is-run .sc-audit__metrics i::after { animation: sc-metric 2.6s cubic-bezier(.3, .7, .2, 1) .5s both; }
.scene.is-run .sc-audit__metrics b { animation: sc-metric-text 2.6s linear .5s both; }
@keyframes sc-metric { from { width: var(--from); background: #ff6b6b; } 55% { background: #ffd166; } to { width: var(--to); background: var(--accent); } }
@keyframes sc-metric-text { from { color: #ff6b6b; } 55% { color: #ffd166; } }
.sc-audit__done {
  position: absolute; left: 50%; bottom: 3.5cqw; transform: translateX(-50%); white-space: nowrap;
  display: flex; align-items: center; gap: 1.4cqw; padding: 1.4cqw 2.6cqw; border-radius: 99px;
  background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .35);
  font-size: 2.1cqw; color: var(--accent);
}
.scene.is-run .sc-audit__done { animation: sc-rise .6s var(--ease) 3.3s both; }

/* ---------- 5. UX/UI: edytor projektu ---------- */
.scene--ux .scene__body {
  background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.2px);
  background-size: 3cqw 3cqw;
}
.sc-ux__layers {
  position: absolute; left: 4cqw; top: 4cqw; bottom: 4cqw; width: 22cqw; padding: 2cqw;
  border-radius: 1.6cqw; background: var(--bg); border: 1px solid var(--border);
}
.sc-ux__layers p { font: 500 1.7cqw/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 1.6cqw; }
.sc-ux__layers li { display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw 1.2cqw; border-radius: .8cqw; font-size: 1.9cqw; color: var(--muted); }
.sc-ux__layers li::before { content: ""; width: 1.6cqw; height: 1.6cqw; border: 1px solid currentColor; border-radius: .3cqw; }
.sc-ux__layers .is-btn { background: rgb(var(--accent-2-rgb) / .16); color: var(--text); }
.scene.is-run .sc-ux__layers .is-btn { animation: sc-fade .3s ease 1.2s both; }

.sc-ux__board { position: absolute; left: 31cqw; top: 6cqw; width: 32cqw; height: 58cqw; border-radius: 1.6cqw; background: #f4f6fb; box-shadow: 0 2cqw 5cqw -1cqw rgb(0 0 0 / .6); }
.sc-ux__label { position: absolute; left: 0; top: -3.4cqw; font: 400 1.8cqw/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.sc-ux__board > i { position: absolute; left: 8%; border-radius: .8cqw; }
.sc-ux__img { right: 8%; top: 6%; height: 34%; background: linear-gradient(135deg, #5cc8ff, #b46eff); }
.sc-ux__t1 { top: 45%; width: 70%; height: 4.5%; background: #1b2030; }
.sc-ux__t2 { top: 52%; width: 55%; height: 4.5%; background: #1b2030; }
.sc-ux__t3 { top: 60%; width: 62%; height: 3%; background: #9aa3b5; }
.scene.is-run .sc-ux__board > i { animation: sc-pop .5s var(--ease) calc(.2s + var(--i) * .12s) both; }
.sc-ux__btn { position: absolute; left: 8%; top: 70%; width: 70%; height: 9%; border-radius: 99px; background: var(--accent); }
.scene.is-run .sc-ux__btn { animation: sc-ux-w 1.4s cubic-bezier(.5, 0, .3, 1) 1.6s both, sc-ux-c .5s ease 4.4s both; }
@keyframes sc-ux-w { from { width: 40%; } }
@keyframes sc-ux-c { from { background: #c9cfdc; } }
.sc-ux__sel { position: absolute; inset: -.8cqw; border: 1px solid var(--accent-2); border-radius: .4cqw; }
.sc-ux__sel i { position: absolute; width: 1.4cqw; height: 1.4cqw; background: #fff; border: 1px solid var(--accent-2); }
.sc-ux__sel i:nth-child(1) { left: -.7cqw; top: -.7cqw; }
.sc-ux__sel i:nth-child(2) { right: -.7cqw; top: -.7cqw; }
.sc-ux__sel i:nth-child(3) { left: -.7cqw; bottom: -.7cqw; }
.sc-ux__sel i:nth-child(4) { right: -.7cqw; bottom: -.7cqw; }
.sc-ux__sel em {
  position: absolute; left: 50%; top: calc(100% + 1.2cqw); transform: translateX(-50%); white-space: nowrap;
  padding: .4cqw 1cqw; border-radius: .6cqw; background: var(--accent-2); color: #04121c;
  font: 600 1.7cqw/1.2 var(--font-mono); font-style: normal;
}
.scene.is-run .sc-ux__sel { animation: sc-fade .3s ease 1.2s both; }
.sc-ux__swatches { position: absolute; left: 87cqw; top: 8cqw; display: grid; gap: 2cqw; }
.sc-ux__swatches li { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--c); }
.sc-ux__swatches .is-pick { box-shadow: 0 0 0 .6cqw var(--surface), 0 0 0 1cqw var(--c); }
.scene.is-run .sc-ux__swatches .is-pick { animation: sc-ring .5s ease 4.4s both; }
@keyframes sc-ring { from { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; } }
.sc-ux__pen { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-ux__pen path { fill: none; stroke: var(--accent-2); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 60; stroke-dashoffset: 0; }
.sc-ux__pen circle { fill: #fff; stroke: var(--accent-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.scene.is-run .sc-ux__pen path { animation: sc-pen 1.3s ease-in-out 5.2s both; }
.scene.is-run .sc-ux__pen circle:last-of-type { animation: sc-fade .2s ease 6.4s both; }
@keyframes sc-pen { from { stroke-dashoffset: 60; } }
.sc-ux__cursor { transform: translate(72cqw, 40cqw); }
.scene.is-run .sc-ux__cursor { animation: sc-ux-cursor 5.4s ease-in-out .8s both; }
@keyframes sc-ux-cursor {
  0% { transform: translate(75cqw, 60cqw); }
  15% { transform: translate(46.4cqw, 52cqw); }
  41% { transform: translate(56cqw, 52cqw); }
  67% { transform: translate(89cqw, 16.6cqw); }
  70% { transform: translate(89cqw, 16.6cqw) scale(.85); }
  74% { transform: translate(89cqw, 16.6cqw) scale(1); }
  82% { transform: translate(66cqw, 63cqw); }
  100% { transform: translate(72cqw, 40cqw); }
}

/* ---------- 6. Serwery: szafa + wykresy na żywo ---------- */
.sc-srv__rack { position: absolute; left: 5cqw; top: 4cqw; width: 38cqw; display: grid; gap: 2cqw; }
.sc-srv__rack li {
  position: relative; display: flex; align-items: center; gap: 1.2cqw; height: 10.5cqw; padding: 0 2.4cqw;
  border-radius: 1.4cqw; background: linear-gradient(180deg, #1f2536, var(--bg)); border: 1px solid var(--border);
}
.sc-srv__rack li::after {
  content: ""; position: absolute; right: 2.4cqw; top: 50%; width: 9cqw; height: 3.4cqw; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--border-strong) 0 .4cqw, transparent .4cqw 1.1cqw);
}
.sc-srv__rack b { font: 500 2.1cqw/1 var(--font-mono); margin-left: 1cqw; }
.sc-srv__rack i { position: absolute; left: 2.4cqw; right: 2.4cqw; bottom: 1.3cqw; height: .7cqw; border-radius: 1cqw; background: var(--border); }
.sc-srv__rack i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--l); border-radius: inherit; background: var(--accent-2); }
.led { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 1.2cqw var(--accent); animation: sc-blink 1.1s steps(2) var(--b, 0s) infinite; }
@keyframes sc-blink { 50% { opacity: .25; } }
.scene.is-run .is-db .led { animation: sc-blink 1.1s steps(2) var(--b, 0s) infinite, sc-led-warn 3.6s linear 1.2s both; }
.scene.is-run .is-db i::after { animation: sc-db-fill 3.6s linear 1.2s both; }
@keyframes sc-led-warn { 0%, 100% { background: var(--accent); box-shadow: 0 0 1.2cqw var(--accent); } 4%, 96% { background: var(--warn); box-shadow: 0 0 1.6cqw var(--warn); } }
@keyframes sc-db-fill { 0% { width: var(--l); } 10%, 85% { width: 86%; background: var(--warn); } 100% { width: 41%; } }
.is-db i::after { width: 41%; }

.sc-srv__chart {
  position: absolute; left: 48cqw; right: 5cqw; top: 4cqw; height: 22cqw; padding: 2cqw 2.4cqw;
  display: flex; flex-direction: column; border-radius: 1.6cqw; background: var(--bg); border: 1px solid var(--border);
}
.sc-srv__chart--ram { top: 29cqw; }
.sc-srv__chart header { display: flex; justify-content: space-between; font-size: 2cqw; color: var(--muted); }
.sc-srv__chart header b { font: 600 2.4cqw/1 var(--font-mono); color: var(--accent); }
.sc-srv__chart--ram header b { color: var(--accent-2); }
.sc-srv__chart svg { flex: 1; width: 100%; margin-top: 1cqw; }
.sc-srv__chart .line { fill: none; stroke: var(--accent); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sc-srv__chart .area { fill: rgb(var(--accent-rgb) / .12); }
.sc-srv__chart--ram .line { stroke: var(--accent-2); }
.sc-srv__chart--ram .area { fill: rgb(var(--accent-2-rgb) / .12); }
.sc-srv__status { position: absolute; left: 5cqw; bottom: 4.5cqw; display: flex; align-items: center; gap: 1.2cqw; font-size: 2cqw; color: var(--muted); }
.sc-srv__status i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
.sc-srv__alert { position: absolute; right: 5cqw; bottom: 3cqw; width: 47cqw; display: grid; }
.sc-srv__alert > span {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw 2cqw; border-radius: 1.4cqw;
  font-size: 1.95cqw; background: var(--surface-2);
}
.sc-srv__warn { border: 1px solid rgb(255 209 102 / .5); color: var(--warn); opacity: 0; }
.sc-srv__ok { border: 1px solid rgb(var(--accent-rgb) / .4); color: var(--accent); }
.scene.is-run .sc-srv__warn { animation: sc-warn 3.6s ease 1.2s both; }
.scene.is-run .sc-srv__ok { animation: sc-rise .5s var(--ease) 4.8s both; }
@keyframes sc-warn { 0% { opacity: 0; transform: translateY(2cqw); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 7. Rozwiązania dedykowane: kod + aplikacja ---------- */
.sc-code__editor {
  position: absolute; left: 4cqw; top: 4cqw; width: 66cqw; height: 46cqw; overflow: hidden;
  border-radius: 1.6cqw; background: #0d1017; border: 1px solid var(--border);
}
.sc-code__tabs { display: flex; border-bottom: 1px solid var(--border); }
.sc-code__tabs span { padding: 1.4cqw 2.4cqw; font: 400 1.8cqw/1 var(--font-mono); color: var(--muted); border-right: 1px solid var(--border); }
.sc-code__tabs .is-active { color: var(--text); background: var(--surface); box-shadow: inset 0 2px 0 var(--accent); }
.sc-code__src { margin: 0; padding: 2cqw 2.4cqw; font: 400 1.95cqw/1.75 var(--font-mono); color: var(--text); white-space: pre; counter-reset: ln; }
.sc-code__src .ln { display: block; }
.sc-code__src .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 3.4cqw; color: #3b4458; }
.sc-code__caret { display: inline-block; width: .9cqw; height: 2.4cqw; margin-left: 3.4cqw; vertical-align: middle; background: var(--accent); animation: blink 1s steps(1) infinite; }
.tk-kw { color: #c792ea; } .tk-fn { color: #82aaff; } .tk-str { color: #c3e88d; } .tk-cm { color: #5c6680; font-style: italic; } .tk-num { color: #f78c6c; }
.sc-code__app {
  position: absolute; right: 4cqw; bottom: 4cqw; width: 50cqw; padding: 2.2cqw 2.4cqw;
  border-radius: 1.8cqw; background: var(--surface-2); border: 1px solid var(--border-strong);
  box-shadow: 0 3cqw 6cqw -1cqw rgb(0 0 0 / .7);
}
.sc-code__app header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4cqw; font-size: 2.2cqw; }
.sc-code__badge { display: flex; align-items: center; gap: .8cqw; padding: .7cqw 1.4cqw; border-radius: 99px; background: rgb(var(--accent-rgb) / .12); color: var(--accent); font: 500 1.7cqw/1 var(--font-mono); }
.sc-code__app ul { display: grid; gap: .8cqw; }
.sc-code__app li {
  display: grid; grid-template-columns: 9cqw 1fr auto; align-items: center; gap: 1.4cqw;
  padding: 1cqw 1.4cqw; border-radius: 1cqw; background: var(--bg); font-size: 1.9cqw;
}
.sc-code__app li span { font-family: var(--font-mono); color: var(--muted); }
.sc-code__app li em { justify-self: start; padding: .3cqw 1cqw; border-radius: 99px; font-style: normal; font-size: 1.6cqw; background: rgb(var(--accent-2-rgb) / .14); color: var(--accent-2); }
.sc-code__app li em.is-paid { background: rgb(var(--accent-rgb) / .14); color: var(--accent); }
.sc-code__app li b { font: 600 1.9cqw/1 var(--font-mono); }
.scene--code:not(.is-built) .sc-code__app { opacity: .35; filter: saturate(.3); }
.scene--code:not(.is-built) .sc-code__app li, .scene--code:not(.is-built) .sc-code__badge { opacity: 0; }
.sc-code__app { transition: opacity .5s, filter .5s; }
.scene--code.is-built .sc-code__app li { animation: sc-rise .5s var(--ease) calc(.2s + var(--i) * .15s) both; }
.scene--code.is-built .sc-code__badge { animation: sc-pop .4s var(--ease) .9s both; }

/* ---------- 8. Integracje: przepływ danych przez API ---------- */
.sc-int__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-int__lines path { fill: none; stroke: var(--border-strong); stroke-width: 1.5px; vector-effect: non-scaling-stroke; stroke-dasharray: 5 5; animation: sc-dash 1.2s linear infinite; }
@keyframes sc-dash { to { stroke-dashoffset: -10; } }
.sc-int__lines .pk { fill: var(--accent); filter: drop-shadow(0 0 1.2px var(--accent)); }
.sc-int__lines .pk--b { fill: var(--accent-2); filter: drop-shadow(0 0 1.2px var(--accent-2)); }
.sc-int__node {
  position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 1.2cqw; padding: 1.6cqw 2.2cqw; border-radius: 1.6cqw; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border-strong); box-shadow: 0 2cqw 4cqw -1cqw rgb(0 0 0 / .6);
  font-size: 2.2cqw;
}
.sc-int__node svg { width: 3.4cqw; height: 3.4cqw; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-int__hub {
  position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: 13cqw; height: 13cqw; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 3.4cqw;
  background: linear-gradient(145deg, rgb(var(--accent-rgb) / .25), rgb(var(--accent-2-rgb) / .2)), var(--surface-2);
  border: 1px solid rgb(var(--accent-rgb) / .5);
  font: 700 3.2cqw/1 var(--font-mono); color: var(--accent);
  animation: sc-hub 2s ease-in-out infinite;
}
@keyframes sc-hub { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .35), 0 0 5cqw -1cqw rgb(var(--accent-rgb) / .6); } 50% { box-shadow: 0 0 0 2.4cqw rgb(var(--accent-rgb) / 0), 0 0 7cqw -1cqw rgb(var(--accent-rgb) / .8); } }
.sc-int__log { position: absolute; left: 50%; top: 2.6cqw; width: 40cqw; transform: translateX(-50%); }
.sc-int__log p {
  display: grid; grid-template-columns: auto 1fr; column-gap: 1.2cqw; padding: 1.3cqw 2cqw; border-radius: 1.4cqw;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 1.9cqw;
  animation: sc-rise .4s var(--ease) both;
}
.sc-int__log p > span { grid-row: span 2; align-self: center; color: var(--accent); }
.sc-int__log small { font: 400 1.6cqw/1.3 var(--font-mono); color: var(--muted); }

/* ---------- 9. Wsparcie IT: radar Lublina + zgłoszenia ---------- */
.sc-sup__radar { position: absolute; left: 3cqw; top: 5.5cqw; width: 60cqw; height: 60cqw; }
.sc-sup__ring {
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); transform: translate(-50%, -50%);
  border-radius: 50%; border: 1px solid var(--border-strong);
}
.sc-sup__ring:first-child { background: radial-gradient(circle, rgb(var(--accent-2-rgb) / .06), transparent 70%); }
.sc-sup__radar::before, .sc-sup__radar::after { content: ""; position: absolute; background: var(--border); }
.sc-sup__radar::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.sc-sup__radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.sc-sup__sweep {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(var(--accent-rgb) / .28), rgb(var(--accent-rgb) / 0) 70deg, transparent 360deg);
  animation: sc-spin 5s linear infinite reverse;
}
.sc-sup__town {
  position: absolute; left: calc(50% + var(--x) * 1cqw); top: calc(50% + var(--y) * 1cqw); z-index: 1;
  display: flex; align-items: center; gap: .9cqw; transform: translate(-.7cqw, -50%); white-space: nowrap;
  font: 400 1.75cqw/1 var(--font-mono); color: var(--muted); transition: color .3s;
}
.sc-sup__town::before {
  content: ""; width: 1.4cqw; height: 1.4cqw; flex-shrink: 0; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 1cqw rgb(var(--accent-2-rgb) / .7); transition: background .3s, box-shadow .3s;
}
.sc-sup__town::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 1.4cqw; height: 1.4cqw; margin-top: -.7cqw; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
}
.sc-sup__town.is-active { color: var(--text); }
.sc-sup__town.is-active::before { background: var(--accent); box-shadow: 0 0 1.6cqw var(--accent); }
.sc-sup__town.is-active::after { animation: sc-ping 1.2s ease-out infinite; }
@keyframes sc-ping { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(4.5); } }
.sc-sup__town.is-main { font: 700 2.4cqw/1 var(--font-display); color: var(--text); transform: translate(-1.1cqw, -50%); }
.sc-sup__town.is-main::before { width: 2.2cqw; height: 2.2cqw; background: var(--accent); box-shadow: 0 0 0 .8cqw rgb(var(--accent-rgb) / .2), 0 0 2cqw var(--accent); }
.sc-sup__town.is-main::after { width: 2.2cqw; height: 2.2cqw; margin-top: -1.1cqw; }

.sc-sup__tickets { position: absolute; left: 65cqw; right: 3.5cqw; top: 4cqw; bottom: 4cqw; display: flex; flex-direction: column; gap: 1.4cqw; overflow: hidden; }
.sc-sup__head { display: flex; align-items: center; gap: 1.2cqw; font: 500 1.8cqw/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sc-sup__head i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; }
.sc-sup__tickets ul { display: grid; gap: 1.4cqw; }
.sc-sup__tickets li {
  padding: 1.6cqw 1.8cqw; border-radius: 1.4cqw; background: var(--bg); border: 1px solid var(--border);
  font-size: 1.9cqw; animation: sc-ticket .5s var(--ease) both;
}
.sc-sup__tickets li b { display: block; font-weight: 600; }
.sc-sup__tickets li small { display: block; margin: .5cqw 0 1cqw; font: 400 1.6cqw/1.3 var(--font-mono); color: var(--muted); }
.sc-sup__tickets li em {
  display: inline-flex; align-items: center; gap: .6cqw; padding: .4cqw 1.1cqw; border-radius: 99px;
  font-size: 1.6cqw; font-style: normal; transition: background .3s, color .3s;
}
.sc-sup__tickets .st-new { background: rgb(255 209 102 / .14); color: var(--warn); }
.sc-sup__tickets .st-work { background: rgb(var(--accent-2-rgb) / .14); color: var(--accent-2); }
.sc-sup__tickets .st-done { background: rgb(var(--accent-rgb) / .14); color: var(--accent); }
@keyframes sc-ticket { from { opacity: 0; transform: translateY(-3cqw) scale(.96); } }

/* ---------- 10. DevOps: pipeline + blue-green deploy ---------- */
.sc-dev__track { position: absolute; left: 14cqw; right: 14cqw; top: 9.5cqw; height: .6cqw; border-radius: 1cqw; background: var(--border); }
.sc-dev__track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 1) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .5s var(--ease); }
.sc-dev__pipe { position: absolute; left: 4cqw; right: 4cqw; top: 3cqw; display: grid; grid-template-columns: repeat(4, 1fr); }
.sc-dev__pipe li { display: grid; justify-items: center; gap: 1.4cqw; font: 500 2cqw/1 var(--font-mono); color: var(--muted); transition: color .3s; }
.sc-dev__pipe li > i {
  position: relative; display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 50%;
  background: var(--accent); border: .5cqw solid var(--accent); transition: background .3s, border-color .3s;
}
.sc-dev__pipe li > i svg { width: 3.6cqw; height: 3.6cqw; fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s; }
.sc-dev__pipe li { color: var(--text); }
.sc-dev__pipe.is-reset li { color: var(--muted); }
.sc-dev__pipe.is-reset li > i { background: var(--surface); border-color: var(--border-strong); }
.sc-dev__pipe.is-reset li > i svg { opacity: 0; }
.sc-dev__pipe li.is-running { color: var(--text); }
.sc-dev__pipe li.is-running > i { border-color: var(--border-strong); border-top-color: var(--accent-2); animation: sc-spin .8s linear infinite; }
.sc-dev__pipe li.is-done > i { background: var(--accent); border-color: var(--accent); animation: sc-done .35s cubic-bezier(.3, 1.6, .5, 1); }
.sc-dev__pipe li.is-done > i svg { opacity: 1; }
.sc-dev__pipe li.is-done { color: var(--text); }
@keyframes sc-done { from { transform: scale(.7); } }

.sc-dev__traffic { position: absolute; left: 5cqw; right: 5cqw; top: 24cqw; padding: 2cqw 2.4cqw; border-radius: 1.6cqw; background: var(--bg); border: 1px solid var(--border); }
.sc-dev__traffic header { display: flex; justify-content: space-between; margin-bottom: 1.4cqw; font-size: 1.9cqw; color: var(--muted); }
.sc-dev__traffic header b { font: 600 1.9cqw/1 var(--font-mono); color: var(--accent); }
.sc-dev__bar { display: flex; height: 5cqw; border-radius: 1cqw; overflow: hidden; font: 600 1.8cqw/5cqw var(--font-mono); }
.sc-dev__bar i { font-style: normal; text-align: center; white-space: nowrap; overflow: hidden; transition: flex-basis 1.6s var(--ease); }
.sc-dev__bar .old { flex: 0 0 0%; background: rgb(var(--accent-2-rgb) / .8); color: #04121c; }
.sc-dev__bar .new { flex: 1 1 auto; background: var(--accent); color: var(--accent-ink); }
.sc-dev__bar:not(.is-switched) .old { flex-basis: 100%; }
.sc-dev__bar.no-anim i { transition: none; }

.sc-dev__history { position: absolute; left: 5cqw; right: 5cqw; top: 43cqw; display: grid; gap: 1.2cqw; }
.sc-dev__history li {
  display: grid; grid-template-columns: 8cqw 1fr auto auto; align-items: center; gap: 2cqw;
  padding: 1.3cqw 2cqw; border-radius: 1.2cqw; background: var(--bg); border: 1px solid var(--border);
  font: 400 1.9cqw/1 var(--font-mono); color: var(--muted);
}
.sc-dev__history li:first-child { border-color: rgb(var(--accent-rgb) / .4); color: var(--text); animation: sc-ticket .5s var(--ease) both; }
.sc-dev__history li em { font-style: normal; color: var(--accent); }
.sc-dev__history li:not(:first-child) em { color: var(--muted); }

/* ---------- Responsywność ---------- */
@media (max-width: 1000px) {
  .scene, .scene:hover { transform: none; max-width: 520px; }
}