/* ==========================================================================
   NexoSite: sceny (animowane ilustracje oferty) zbudowane z komponentów systemu.
   Każda scena: [data-scene] → klasa .play, gdy jest w widoku (pętle startują od zera).
   ========================================================================== */

/* ── HERO: kompozycja strona + telefon + plakietka + statusy ───────────── */
.stage .s-frame  { left:0; top:6%; width:88%; transform:translateZ(0); }
.stage .s-phone  { right:0; bottom:0; width:29%; transform:translateZ(90px); }
.stage .s-phone .device { width:100%; }
.stage .s-plaque { right:-2%; bottom:0; transform:translateZ(140px) rotate(6deg); }
.stage .s-plaque .plaque { --pw: clamp(110px, 12vw, 160px); }
.stage .s-chip1  { right:8%; top:0; transform:translateZ(160px); }
.stage .s-chip2  { left:-5%; top:38%; transform:translateZ(190px); }
.stage .s-chip3  { right:21%; bottom:5%; transform:translateZ(230px); }
.js .stage .s-frame  { transform:translateZ(0) translateY(40px) scale(.94); }
.js .stage .s-phone  { transform:translateZ(90px) translateY(60px) scale(.9); }
.js .stage .s-plaque { transform:translateZ(140px) translateY(40px) rotate(16deg) scale(.85); }
.js .stage .s-chip1, .js .stage .s-chip2, .js .stage .s-chip3 { transform:translateZ(160px) translateY(24px) scale(.85); }
.stage.play .s-frame  { transform:translateZ(0); transition-delay:.15s; }
.stage.play .s-phone  { transform:translateZ(90px); transition-delay:.75s; }
.stage.play .s-plaque { transform:translateZ(140px) rotate(6deg); transition-delay:.9s; }
.stage.play .s-chip1  { transform:translateZ(160px); transition-delay:1.35s; }
.stage.play .s-chip2  { transform:translateZ(190px); transition-delay:1.5s; }
.stage.play .s-chip3  { transform:translateZ(230px); transition-delay:1.65s; }
.stage .s-frame .ms { font-size:clamp(5.4px, .82vw, 10.5px); }
.stage .float-a { animation:bob 7s ease-in-out infinite; }
.stage .float-b { animation:bob 8s ease-in-out -3s infinite; }
.stage .float-c { animation:bob 6.5s ease-in-out -1.5s infinite; }
@keyframes bob { 50% { translate:0 -10px; } }
.stage .chip .stars svg { width:13px; height:13px; }
@media (max-width: 980px) {
  .stage { width:min(calc(100% - 28px), 620px); margin:1.25rem auto 0; }
  .stage .s-plaque { right:0; }
}
@media (max-width: 560px) {
  .stage .chip { padding:.5rem .7rem .5rem .5rem; gap:.5rem; }
  .stage .chip .ico.sm { width:26px; height:26px; font-size:.85rem; }
  .stage .chip-k { font-size:.62rem; } .stage .chip-v { font-size:.76rem; }
  .stage .s-chip3 { right:16%; }
}

/* ── OFERTA ─────────────────────────────────────────────────────────────── */
.offer-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; }
.offer { display:flex; flex-direction:column; }
.offer.p { --accent:var(--purple); --on-accent:#0b0d26; }
.offer-viz { position:relative; height:clamp(260px, 26vw, 320px); overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.offer-viz::before { content:''; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask:radial-gradient(70% 80% at 50% 50%, #000, transparent); mask:radial-gradient(70% 80% at 50% 50%, #000, transparent); }
.offer-body { flex:1; display:flex; flex-direction:column; gap:1.05rem; padding:clamp(1.6rem, 3vw, 2.5rem); }
.offer-body .body { max-width:46ch; }
.offer-body .ticks { margin:.35rem 0 1.5rem; }
.offer-body .btn { margin-top:auto; align-self:flex-start; }
@media (max-width: 900px) { .offer-grid { grid-template-columns:1fr; } }

/* Scena: wyszukiwanie → Twoja firma wskakuje na pierwsze miejsce (pętla 8 s) */
.sc-search { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(9px, 1vw, 11.5px); }
.sc-search .box { position:relative; width:33em; }
.sc-q { display:flex; align-items:center; gap:.9em; height:4.4em; padding:0 1.2em; border-radius:var(--r-pill); font-size:1.15em;
  background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border:1px solid var(--line-2); box-shadow:var(--glass-hi), 0 20px 50px -20px rgba(0,0,0,.8); }
.sc-q > .ph { color:var(--ink-3); font-size:1.25em; }
.sc-q-text { position:relative; display:inline-block; overflow:hidden; white-space:nowrap; font-weight:500; color:var(--ink); max-width:0; vertical-align:middle; }
.sc-q-caret { width:2px; height:1.3em; background:var(--green); margin-left:-.6em; animation:caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity:0; } }
.play .sc-q-text { animation:type 8s steps(22) infinite; }
@keyframes type { 0% { max-width:0; } 26%, 94% { max-width:20em; } 100% { max-width:0; } }
.sc-res { position:relative; height:16.4em; margin-top:1em; }
.sc-res .row { position:absolute; left:0; right:0; top:0; height:3.6em; font-size:1em; opacity:0; transform:translateY(var(--b)); will-change:transform; }
.sc-res .row .ico { width:2.2em; height:2.2em; border-radius:.7em; font-size:1.1em; }
.sc-res .row-n { width:1.6em; font-family:var(--mono); font-size:.9em; color:var(--ink-4); text-align:center; }
.sc-res .r0 { --a:0em;   --b:4.2em; } .sc-res .r1 { --a:4.2em; --b:8.4em; } .sc-res .you { --a:8.4em; --b:0em; } .sc-res .r3 { --a:12.6em; --b:12.6em; }
.play .sc-res .row { animation:res 8s var(--ease) infinite; }
.play .sc-res .r1 { animation-delay:.08s; } .play .sc-res .you { animation-name:res-you; animation-delay:.16s; } .play .sc-res .r3 { animation-delay:.24s; }
@keyframes res { 0%, 28% { transform:translateY(calc(var(--a) + 12px)); opacity:0; } 36%, 52% { transform:translateY(var(--a)); opacity:1; }
  62%, 92% { transform:translateY(var(--b)); opacity:1; } 98%, 100% { transform:translateY(var(--b)); opacity:0; } }
@keyframes res-you { 0%, 28% { transform:translateY(calc(var(--a) + 12px)); opacity:0; } 36%, 52% { transform:translateY(var(--a)); opacity:1; }
  57% { transform:translateY(calc((var(--a) + var(--b)) / 2)) scale(1.04); } 62%, 92% { transform:translateY(var(--b)) scale(1.02); opacity:1; } 98%, 100% { transform:translateY(var(--b)) scale(1.02); opacity:0; } }
.sc-res .you { z-index:2; background:linear-gradient(160deg, rgba(74,222,128,.16), rgba(74,222,128,.04)); border-color:rgba(74,222,128,.45); }
.play .sc-res .you { animation:res-you 8s var(--ease) .16s infinite; }
.sc-res .you::after, .mv-rank .you::after { content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0; box-shadow:0 0 0 1px rgba(74,222,128,.35), 0 18px 50px -12px rgba(74,222,128,.55); }
.play .sc-res .you::after { animation:glow 8s var(--ease) .16s infinite; }
@keyframes glow { 0%, 55% { opacity:0; } 64%, 90% { opacity:1; } 100% { opacity:0; } }
.sc-you-t { flex:1; display:grid; gap:.2em; line-height:1.2; }
.sc-you-t b { font-size:1.05em; font-weight:600; letter-spacing:-.015em; }
.sc-you-t span { font-family:var(--mono); font-size:.82em; color:var(--green); }
.sc-res .you .stars svg { width:1em; height:1em; }
.sc-res .you .row-n { color:var(--green); }

/* Scena: telefon dotyka plakietki → ekran z oceną (pętla 6 s) */
.sc-tap { position:absolute; inset:0; display:grid; place-items:center; }
.sc-tap .rig { position:relative; width:330px; height:240px; }
.sc-tap .plaque { --pw:128px; position:absolute; left:40px; top:28px; transform:rotate(-6deg); }
.sc-tap .device { position:absolute; width:116px; left:178px; top:4px; padding:5px; border-radius:24px; }
.sc-tap .device-screen { border-radius:20px; }
.sc-tap .device-screen::before { top:6px; height:12px; border-radius:12px; }
.play .sc-tap .device { animation:tap 6s var(--spring) infinite; }
@keyframes tap { 0%, 8% { transform:translate(40px, 10px) rotate(12deg); } 30%, 62% { transform:translate(-58px, 20px) rotate(-4deg); } 82%, 100% { transform:translate(40px, 10px) rotate(12deg); } }
.sc-tap .plaque .ripple { animation:none; opacity:0; }
.play .sc-tap .plaque .ripple { animation:tap-ripple 6s var(--ease) infinite; }
.play .sc-tap .plaque .ripple:nth-child(2) { animation-delay:.25s; } .play .sc-tap .plaque .ripple:nth-child(3) { animation-delay:.5s; }
@keyframes tap-ripple { 0%, 28% { transform:scale(.7); opacity:0; } 30% { opacity:.95; transform:scale(.8); } 52%, 100% { transform:scale(3); opacity:0; } }
.rv { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px;
  background:radial-gradient(80% 60% at 50% 30%, rgba(129,140,248,.35), transparent 70%), #08090c; }
.rv-ok { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:20px; color:#0b0d26; background:var(--purple); box-shadow:0 0 24px rgba(129,140,248,.7); }
.rv .stars svg { width:13px; height:13px; }
.rv-l { width:70%; height:5px; border-radius:4px; background:rgba(255,255,255,.18); }
.rv-l + .rv-l { width:50%; background:rgba(255,255,255,.1); }
.sc-tap .rv, .sc-tap .rv-ok, .sc-tap .rv .stars svg { opacity:0; }
.play .sc-tap .rv { animation:rv 6s var(--ease) infinite; }
.play .sc-tap .rv-ok { animation:rv-ok 6s var(--pop) infinite; }
.play .sc-tap .rv .stars svg { transform:none; animation:rv-star 6s var(--pop) infinite; }
.play .sc-tap .rv .stars svg:nth-child(2) { animation-delay:.08s; } .play .sc-tap .rv .stars svg:nth-child(3) { animation-delay:.16s; }
.play .sc-tap .rv .stars svg:nth-child(4) { animation-delay:.24s; } .play .sc-tap .rv .stars svg:nth-child(5) { animation-delay:.32s; }
@keyframes rv { 0%, 31% { opacity:0; } 36%, 84% { opacity:1; } 92%, 100% { opacity:0; } }
@keyframes rv-ok { 0%, 34% { opacity:0; transform:scale(.3); } 42%, 84% { opacity:1; transform:none; } 92%, 100% { opacity:0; } }
@keyframes rv-star { 0%, 40% { opacity:0; transform:scale(0) rotate(-45deg); } 48%, 84% { opacity:1; transform:none; } 92%, 100% { opacity:0; } }

/* ── STATYSTYKI ─────────────────────────────────────────────────────────── */
.stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; }
.stat { display:flex; flex-direction:column; gap:.55rem; padding:clamp(1.6rem, 3vw, 2.3rem); }
.stat-viz { position:relative; height:118px; margin-bottom:1rem; display:flex; align-items:center; }
.stat-num { font-size:clamp(3.4rem, 6.5vw, 5.4rem); font-weight:700; letter-spacing:-.06em; line-height:.92; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg, #fff 30%, rgba(255,255,255,.5)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat:first-child .stat-num { background-image:linear-gradient(180deg, var(--green) 20%, rgba(74,222,128,.45)); }
.stat-label { color:var(--ink-3); font-size:.98rem; max-width:24ch; }
/* porównanie cen */
.cmp { width:100%; display:grid; gap:.9rem; }
.cmp-r { display:grid; grid-template-columns:5.6rem 1fr; align-items:center; gap:.8rem; font-size:.78rem; color:var(--ink-3); }
.cmp-r b { height:12px; border-radius:var(--r-pill); width:0; transition:width 1.6s var(--spring); }
.cmp-r:first-child b { background:rgba(255,255,255,.2); }
.cmp-r:last-child { color:var(--ink); font-weight:600; }
.cmp-r:last-child b { background:var(--grad); box-shadow:0 0 18px rgba(74,222,128,.45); }
.play .cmp-r:first-child b { width:100%; transition-delay:.2s; }
.play .cmp-r:last-child b { width:50%; transition-delay:.55s; }
/* pierścień 100% */
.ring { width:118px; height:118px; }
.ring circle { fill:none; stroke-width:9; }
.ring .tr { stroke:rgba(255,255,255,.08); }
.ring .pr { stroke:url(#ringGrad); stroke-linecap:round; stroke-dasharray:302; stroke-dashoffset:302; transform:rotate(-90deg); transform-origin:center; transition:stroke-dashoffset 2s var(--ease-io) .3s; }
.play .ring .pr { stroke-dashoffset:0; }
.ring-wrap { position:relative; }
.ring-wrap .ico { position:absolute; inset:0; margin:auto; width:46px; height:46px; }
/* tarcza 24/7 */
.dial { position:relative; width:118px; height:118px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.05), transparent 70%); }
.dial i { position:absolute; left:50%; top:50%; width:2px; height:9px; margin:-4.5px 0 0 -1px; border-radius:2px; background:rgba(255,255,255,.14); transform:rotate(calc(var(--k) * 15deg)) translateY(-50px); }
.play .dial i { animation:dial 6s steps(1) infinite; animation-delay:calc(var(--k) * .25s); }
@keyframes dial { 0% { background:var(--green); box-shadow:0 0 8px var(--green); } 4.16%, 100% { background:rgba(255,255,255,.14); box-shadow:none; } }
.dial-hand { position:absolute; left:50%; top:50%; width:2px; height:40px; margin-left:-1px; transform-origin:50% 0; border-radius:2px; background:var(--green); transform:rotate(180deg); }
.play .dial-hand { animation:hand 6s linear infinite; }
@keyframes hand { to { transform:rotate(540deg); } }
.dial-c { position:absolute; inset:0; margin:auto; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--green); }
@media (max-width: 900px) { .stats { grid-template-columns:1fr; } }

/* ── OPINIE ─────────────────────────────────────────────────────────────── */
.reviews { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:1.25rem; }
.review { display:flex; flex-direction:column; gap:1.4rem; padding:clamp(1.6rem, 3vw, 2.4rem); }
.review.big { grid-row:span 2; justify-content:space-between; background:radial-gradient(90% 70% at 0% 0%, rgba(74,222,128,.12), transparent 60%), var(--glass-bg); }
.review:nth-child(2) { --accent:var(--purple); }
.review:nth-child(3) { --accent:var(--blue); }
.review .author { margin-top:auto; padding-top:1.4rem; border-top:1px solid var(--line); }
.review-q { font-size:1.08rem; color:var(--ink-2); line-height:1.6; letter-spacing:-.01em; text-wrap:pretty; }
.review.big .review-q { font-size:clamp(1.55rem, 2.8vw, 2.35rem); color:var(--ink); font-weight:500; letter-spacing:-.035em; line-height:1.24; }
.reviews-cta { margin-top:2rem; }
@media (max-width: 900px) { .reviews { grid-template-columns:1fr; } .review.big { grid-row:auto; } }

/* ── CENNIK ─────────────────────────────────────────────────────────────── */
.pricing-head .callout { display:inline-flex; align-items:center; gap:.55rem; flex-wrap:wrap; justify-content:center; padding:.6rem 1.1rem; border-radius:var(--r-pill);
  font-size:.87rem; color:var(--green); background:rgba(74,222,128,.07); border:1px solid rgba(74,222,128,.22); }
.pricing-head .callout strong { font-weight:600; }
.prices { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1.25rem; max-width:1060px; margin-inline:auto; }
.price { display:flex; flex-direction:column; padding:clamp(1.8rem, 3.4vw, 2.8rem); }
.price.g { background:radial-gradient(110% 60% at 0% 0%, rgba(74,222,128,.13), transparent 60%), var(--glass-bg); border-color:rgba(74,222,128,.2); }
.price.p { --accent:var(--purple); --on-accent:#0b0d26; background:radial-gradient(110% 60% at 100% 0%, rgba(129,140,248,.16), transparent 60%), var(--glass-bg); border-color:rgba(129,140,248,.22); }
.price-head { display:flex; align-items:center; gap:.85rem; margin-bottom:1.7rem; }
.price-name { font-size:1.02rem; font-weight:600; letter-spacing:-.02em; }
.price-amt { font-size:clamp(3rem, 5.4vw, 4.4rem); font-weight:700; letter-spacing:-.055em; line-height:1; font-variant-numeric:tabular-nums; }
.price.p .price-amt { color:var(--purple); }
.price-per { margin:.5rem 0 1.4rem; color:var(--ink-3); font-size:.94rem; }
.price-desc { margin-bottom:1.75rem; padding-bottom:1.75rem; border-bottom:1px solid var(--line); color:var(--ink-3); font-size:.96rem; line-height:1.7; }
.price .ticks { flex:1; margin-bottom:2.2rem; }
.price .seg { margin-bottom:1.6rem; }
@media (max-width: 900px) { .prices { grid-template-columns:1fr; } }

/* ── KONTAKT ────────────────────────────────────────────────────────────── */
.contact-row { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:2.25rem; }
.contact { display:inline-flex; align-items:center; gap:.75rem; height:58px; padding:0 1.4rem 0 .55rem; border-radius:var(--r-pill); font-size:1.02rem; font-weight:500; letter-spacing:-.01em;
  background:var(--glass-bg); border:1px solid var(--line-2); box-shadow:var(--glass-hi);
  transition:translate .9s var(--pop), border-color .4s, background .4s; }
.contact .ico { width:44px; height:44px; border-radius:50%; font-size:1.15rem; }
.contact:hover { translate:0 -3px; border-color:rgba(74,222,128,.45); }
.contact-sub { display:block; margin-top:.75rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.03em; color:var(--ink-2); }

/* ── PODSTRONY: kafelki korzyści (bento) ───────────────────────────────── */
.bento { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:1.25rem; }
.tile { display:flex; flex-direction:column; min-height:400px; }
.tile-a { grid-column:span 7; } .tile-b { grid-column:span 5; } .tile-c { grid-column:span 5; } .tile-d { grid-column:span 7; }
.tile-viz { position:relative; flex:1; min-height:240px; overflow:hidden; }
.tile-body { display:grid; gap:.6rem; padding:0 clamp(1.5rem, 2.8vw, 2.2rem) clamp(1.5rem, 2.8vw, 2.2rem); }
.tile-body .body { max-width:46ch; }
.tile.t-green { --accent:var(--green); } .tile.t-blue { --accent:var(--blue); } .tile.t-purple { --accent:var(--purple); } .tile.t-star { --accent:var(--star); }
.tile-viz::before { content:''; position:absolute; inset:0; background:radial-gradient(70% 80% at 50% 60%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
@media (max-width: 900px) { .bento { grid-template-columns:1fr; } .tile-a, .tile-b, .tile-c, .tile-d { grid-column:auto; } .tile { min-height:0; } .tile-viz { min-height:220px; } }

/* mikro-scena: miejsce w wynikach (strzałka w górę) */
.mv-rank { position:absolute; inset:0; display:grid; place-items:center; font-size:10px; }
.mv-rank .stack { position:relative; width:30em; display:grid; gap:.7em; }
.mv-rank .row { height:3.6em; }
.mv-rank .row .ico { width:2.2em; height:2.2em; border-radius:.7em; font-size:1.1em; }
.mv-rank .you { order:3; background:linear-gradient(160deg, rgba(74,222,128,.16), rgba(74,222,128,.04)); border-color:rgba(74,222,128,.45); }
.play .mv-rank .you { animation:rank 6s var(--spring) infinite; }
@keyframes rank { 0%, 25% { transform:translateY(0); } 45%, 88% { transform:translateY(-8.6em); } 100% { transform:translateY(0); } }
.mv-rank .you { position:relative; }
.play .mv-rank .you::after { animation:rank-glow 6s var(--spring) infinite; }
@keyframes rank-glow { 0%, 25% { opacity:0; } 45%, 88% { opacity:1; } 100% { opacity:0; } }
.play .mv-rank .row:not(.you) { animation:rank-o 6s var(--spring) infinite; }
@keyframes rank-o { 0%, 25% { transform:translateY(0); } 45%, 88% { transform:translateY(4.3em); } 100% { transform:translateY(0); } }
/* mikro-scena: wykres wzrostu */
.mv-chart { position:absolute; inset:10% 8% 0; }
.mv-chart svg { width:100%; height:100%; overflow:visible; }
.mv-chart .grid line { stroke:rgba(255,255,255,.06); }
.mv-chart .ln { vector-effect:non-scaling-stroke; fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; filter:drop-shadow(0 0 8px rgba(56,189,248,.7)); }
.mv-chart .ar { fill:url(#chartGrad); opacity:0; }
.mv-chart .dt { fill:var(--blue); opacity:0; transform-box:fill-box; transform-origin:center; }
.play .mv-chart .ln { animation:draw 6s var(--ease-io) infinite; }
.play .mv-chart .ar { animation:area 6s var(--ease) infinite; }
.play .mv-chart .dt { animation:dot 6s var(--pop) infinite; }
@keyframes draw { 0% { stroke-dashoffset:900; } 45%, 88% { stroke-dashoffset:0; } 100% { stroke-dashoffset:0; opacity:0; } }
@keyframes area { 0%, 30% { opacity:0; } 50%, 85% { opacity:1; } 100% { opacity:0; } }
@keyframes dot { 0%, 44% { opacity:0; transform:scale(0); } 52%, 85% { opacity:1; transform:none; } 100% { opacity:0; } }
/* mikro-scena: klucz własności */
.mv-own { position:absolute; inset:0; display:grid; place-items:center; }
.mv-own .key { position:relative; width:150px; height:150px; display:grid; place-items:center; }
.mv-own .key .ico { width:84px; height:84px; border-radius:26px; font-size:2.4rem; }
.mv-own .orbit { position:absolute; inset:0; border-radius:50%; border:1px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.mv-own .orbit + .orbit { inset:-28px; border-style:solid; border-color:rgba(255,255,255,.06); }
.play .mv-own .orbit { animation:rot 18s linear infinite; }
.play .mv-own .orbit + .orbit { animation-duration:28s; animation-direction:reverse; }
.mv-own .sat { position:absolute; top:-6px; left:50%; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); }
.mv-own .orbit + .orbit .sat { background:var(--green); box-shadow:0 0 14px var(--green); top:50%; left:-6px; margin:-6px 0 0; }
@keyframes rot { to { transform:rotate(360deg); } }
/* mikro-scena: ta sama strona na trzech ekranach */
.mv-devices { position:absolute; inset:0; }
.mv-devices > * { position:absolute; }
.mv-devices .frame { left:6%; top:30px; width:66%; border-radius:14px; }
.mv-devices .frame-bar { height:24px; } .mv-devices .frame-bar > i { width:7px; height:7px; } .mv-devices .frame-url { display:none; }
.mv-devices .frame .ms { font-size:clamp(4.4px, .5vw, 6px); }
.mv-devices .tab { left:60%; top:64px; width:21%; aspect-ratio:3 / 4; padding:5px; border-radius:16px; background:linear-gradient(150deg, #34363d, #121317); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -20px rgba(0,0,0,.9); }
.mv-devices .tab .ms { height:100%; border-radius:12px; font-size:3.6px; }
.mv-devices .device { left:79%; top:92px; width:14%; padding:4px; border-radius:18px; }
.mv-devices .device-screen { border-radius:15px; } .mv-devices .device-screen::before { height:8px; top:5px; }
.mv-devices .device .ms { font-size:3.2px; }
.js .mv-devices > * { opacity:0; transform:translateY(40px); transition:opacity .7s var(--ease), transform 1.2s var(--spring); }
.play .mv-devices > * { opacity:1; transform:none; }
.play .mv-devices > :nth-child(2) { transition-delay:.15s; } .play .mv-devices > :nth-child(3) { transition-delay:.3s; }

/* mikro-sceny NFC: bez aplikacji / wodoodporna / płacisz raz */
.mv-noapp { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:1.25rem; }
.mv-noapp .ico { width:72px; height:72px; border-radius:22px; font-size:2rem; position:relative; }
.mv-noapp .ico::after { content:''; position:absolute; left:14%; right:14%; top:50%; height:3px; border-radius:2px; background:#ff6b6b; box-shadow:0 0 10px rgba(255,107,107,.7); transform:rotate(-40deg) scaleX(0); transition:transform .8s var(--pop); }
.play .mv-noapp .ico::after { transform:rotate(-40deg) scaleX(1); }
.play .mv-noapp .ico:nth-child(2)::after { transition-delay:.25s; }
.mv-noapp .plus { font-size:1.5rem; color:var(--ink-4); }
.mv-drops { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.mv-drops .plaque { --pw:110px; }
.mv-drops .drop { position:absolute; top:-10%; width:3px; height:18px; border-radius:3px; background:linear-gradient(transparent, var(--blue)); opacity:0; }
.play .mv-drops .drop { animation:drop 1.6s linear infinite; }
@keyframes drop { 0% { transform:translateY(0); opacity:0; } 15% { opacity:.9; } 100% { transform:translateY(340px); opacity:0; } }
.mv-pay { position:absolute; inset:0; display:grid; place-items:center; }
.mv-pay .rcpt { width:210px; padding:1.1rem 1.2rem; border-radius:20px; display:grid; gap:.6rem; }
.mv-pay .rcpt-l { display:flex; justify-content:space-between; font-size:.8rem; color:var(--ink-3); }
.mv-pay .rcpt-l b { color:var(--ink); font-weight:600; }
.mv-pay .rcpt-x { font-family:var(--mono); font-size:.72rem; color:var(--ink-4); text-decoration:line-through; }
.mv-pay .stamp { justify-self:start; display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:var(--r-pill); font-family:var(--mono); font-size:.72rem; color:var(--on-accent); background:var(--accent);
  transform:scale(1.6) rotate(-8deg); opacity:0; transition:transform .9s var(--pop), opacity .3s; }
.play .mv-pay .stamp { transform:rotate(-4deg); opacity:1; transition-delay:.4s; }

/* ── PODSTRONY: kroki procesu (linia napełnia się po wejściu w widok) ───── */
.steps { position:relative; list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; counter-reset:step; }
.steps::before { content:''; position:absolute; top:31px; left:calc(100% / 6); right:calc(100% / 6); height:2px; border-radius:2px; background:rgba(255,255,255,.08); }
.steps::after { content:''; position:absolute; top:31px; left:calc(100% / 6); right:calc(100% / 6); height:2px; border-radius:2px; background:var(--grad); transform:scaleX(0); transform-origin:0 50%; transition:transform 2.2s var(--ease-io) .3s; box-shadow:0 0 14px rgba(74,222,128,.5); }
.steps.play::after { transform:scaleX(1); }
.step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem; }
.step-n { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin-bottom:.6rem; font-family:var(--mono); font-size:.9rem; color:var(--ink-3);
  background:var(--bg-2); border:1px solid var(--line-2); box-shadow:var(--glass-hi); transition:color .5s, border-color .5s, box-shadow .8s var(--ease), background-color .5s; }
.steps.play .step-n { color:var(--on-accent); background:var(--accent); border-color:transparent; box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 10px 30px -8px var(--accent); }
.steps.play .step:nth-child(1) .step-n { transition-delay:.3s; } .steps.play .step:nth-child(2) .step-n { transition-delay:1.35s; } .steps.play .step:nth-child(3) .step-n { transition-delay:2.4s; }
.step .body { max-width:30ch; }
@media (max-width: 800px) {
  .steps { grid-template-columns:1fr; gap:2.25rem; }
  .steps::before, .steps::after { top:32px; bottom:32px; left:31px; right:auto; width:2px; height:auto; transform:scaleY(0); transform-origin:50% 0; }
  .steps.play::after { transform:scaleY(1); }
  .step { flex-direction:row; align-items:flex-start; text-align:left; gap:1.25rem; }
  .step-n { margin:0; flex-shrink:0; }
  .step > div { display:grid; gap:.5rem; padding-top:.9rem; }
}
@media (min-width: 801px) { .step > div { display:grid; gap:.7rem; justify-items:center; } }

/* ── PODSTRONY: hero ze sceną warstw / plakietką ───────────────────────── */
.layers { position:relative; aspect-ratio:1 / .82; perspective:1800px; --rx:0deg; --ry:0deg; }
.layers-rig { position:absolute; inset:6% 4%; transform-style:preserve-3d; transform:rotateX(calc(52deg + var(--rx))) rotateZ(calc(-34deg + var(--ry))); transition:transform 1.2s var(--spring); }
.layer { position:absolute; inset:0; border-radius:20px; transform-style:preserve-3d; }
.layer-plate { background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); box-shadow:0 60px 80px -30px rgba(0,0,0,.9); }
.layer .ms { position:absolute; inset:0; border-radius:20px; font-size:clamp(5.5px, .85vw, 10px); }
.layer .ms > * { visibility:hidden; }
.layer.l-nav   .ms > .ms-nav   { visibility:visible; }
.layer.l-hero  .ms > .ms-hero  { visibility:visible; }
.layer.l-cards .ms > .ms-cards { visibility:visible; }
.layer:not(.layer-plate) .ms { background:none; }
.layer-tag { position:absolute; right:-8px; top:-14px; transform:rotateZ(34deg) rotateX(-52deg); transform-origin:100% 100%; }
.js .layer { transition:transform 1.6s var(--spring), opacity .8s var(--ease); opacity:0; }
.js .layer.l-base { transform:translateZ(0); }
.layers.play .layer { opacity:1; }
.layers.play .l-base  { transform:translateZ(0); }
.layers.play .l-cards { transform:translateZ(60px); transition-delay:.3s; }
.layers.play .l-hero  { transform:translateZ(120px); transition-delay:.5s; }
.layers.play .l-nav   { transform:translateZ(180px); transition-delay:.7s; }
.layers.play.flat .layer { transform:translateZ(0); }
.layer-tag .tagx { display:inline-flex; align-items:center; gap:.35rem; height:26px; padding:0 .7rem; border-radius:var(--r-pill); font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--on-accent); background:var(--accent); white-space:nowrap; box-shadow:0 10px 24px -8px var(--accent); }

.nfc-hero { position:relative; aspect-ratio:1 / .9; display:grid; place-items:center; perspective:1400px; --rx:0deg; --ry:0deg; }
.nfc-rig { position:relative; width:min(100%, 520px); aspect-ratio:1 / .9; transform-style:preserve-3d; transform:rotateX(calc(8deg + var(--rx))) rotateY(calc(-14deg + var(--ry))); transition:transform 1.2s var(--spring); }
.nfc-rig .plaque { --pw:clamp(170px, 20vw, 250px); position:absolute; left:8%; top:10%; transform:translateZ(0) rotate(-5deg); }
.nfc-rig .plaque .ripple { inset:-10%; }
.nfc-rig .device { position:absolute; right:6%; top:6%; width:clamp(118px, 13vw, 168px); transform:translateZ(120px) rotate(10deg); }
.nfc-rig .chip { position:absolute; left:-2%; bottom:6%; transform:translateZ(200px); }
.nfc-hero.play .device { animation:hero-tap 6.5s var(--spring) infinite; }
@keyframes hero-tap { 0%, 10% { transform:translateZ(120px) translate(0, 0) rotate(10deg); } 32%, 60% { transform:translateZ(150px) translate(-38%, 22%) rotate(-2deg); } 84%, 100% { transform:translateZ(120px) translate(0, 0) rotate(10deg); } }
.nfc-hero .rv { opacity:0; }
.nfc-hero.play .rv { animation:rv 6.5s var(--ease) infinite; }
.nfc-hero .rv-ok { opacity:0; }
.nfc-hero.play .rv-ok { animation:rv-ok 6.5s var(--pop) infinite; }
.nfc-hero.play .rv .stars svg { transform:none; animation:rv-star 6.5s var(--pop) infinite; }
.nfc-hero .plaque .ripple { animation:none; opacity:0; }
.nfc-hero.play .plaque .ripple { animation:tap-ripple 6.5s var(--ease) infinite; }
.nfc-hero.play .plaque .ripple:nth-child(2) { animation-delay:.25s; } .nfc-hero.play .plaque .ripple:nth-child(3) { animation-delay:.5s; }
.nfc-hero .chip { opacity:0; }
.nfc-hero.play .chip { animation:chip-in 6.5s var(--spring) infinite; }
@keyframes chip-in { 0%, 38% { opacity:0; transform:translateZ(200px) translateY(20px) scale(.9); } 46%, 86% { opacity:1; transform:translateZ(200px); } 94%, 100% { opacity:0; transform:translateZ(200px) translateY(-10px); } }
.nfc-hero .rv-big .stars svg { width:15px; height:15px; }
.nfc-hero .rv-big .rv-ok { width:48px; height:48px; font-size:24px; }

@media (prefers-reduced-motion: reduce) {
  .sc-q-text { max-width:20em !important; }
  .sc-res .row, .sc-tap .rv, .sc-tap .rv-ok, .nfc-hero .rv, .nfc-hero .rv-ok, .nfc-hero .chip { opacity:1 !important; }
  .sc-res .row { transform:translateY(var(--b)) !important; }
  .layers .layer { opacity:1 !important; }
}

/* ekran telefonu w spoczynku: zaproszenie do dotknięcia */
.dv-idle { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(70% 50% at 50% 45%, rgba(129,140,248,.16), transparent 70%), #07080a; }
.dv-idle i { position:relative; font-size:clamp(20px, 2.4vw, 34px); color:var(--purple); opacity:.85; }
.dv-idle .ripple { inset:auto; width:46%; aspect-ratio:1; border-color:rgba(129,140,248,.6); animation:ripple 2.6s var(--ease) infinite; }
@media (max-width: 980px) {
  .layers { width:min(88%, 560px); margin:.5rem auto 0; }
  .nfc-hero { width:min(100%, 520px); margin-inline:auto; }
}