/* Napisownia — intro przy przewijaniu (sekcja #start, ruch w intro.js: GSAP + ScrollTrigger).
   Kadry: ręczny montaż (licznik) → przekreślenie → kurtyna światła i logo → twoja minuta (kursor przeciąga klipy)
   → laptop montuje sam → gotowa rolka z przyciskami.
   Bez skryptów albo przy „ogranicz ruch” (brak klasy reel-on) widać tylko ostatni kadr — zwykłe hero.
   Stany początkowe w CSS to wyłącznie widoczność; przesunięcia i skale ustawia GSAP (inaczej by się sumowały).
   Wydajność (Intel UHD, 144 Hz): bez clip-path na sekcji, bez masek i filtrów na dużych ruchomych warstwach,
   pętle tylko na transform/opacity i wstrzymane poza ekranem (.rl-idle). */

.rl {
  --vh: 1vh;
  --top-pad: clamp(96px, calc(var(--vh) * 13), 136px);
  --dev-top: clamp(244px, calc(var(--vh) * 39), 440px);
  --lt-top: clamp(196px, calc(var(--vh) * 27), 300px);
  --t0: clamp(32px, min(6.3vw, calc(var(--vh) * 8.4)), 100px);
  --t1: clamp(56px, min(12vw, calc(var(--vh) * 15)), 176px);
  --t2: clamp(19px, min(2.5vw, calc(var(--vh) * 3.7)), 36px);
  --t3: clamp(27px, min(4.5vw, calc(var(--vh) * 6.8)), 66px);
  --tw: clamp(50px, min(9vw, calc(var(--vh) * 13)), 150px);
  --rl-len: 602vh;
  --rl-r: clamp(28px, 4vw, 56px);
  position: relative; z-index: 1; isolation: isolate; color: #fff; background: #040a1c;
}
@supports (height: 1svh) { .rl { --vh: 1svh; } }
/* Zaokrąglony dół sekcji: dwa narożniki w kolorze strony nad sceną (clip-path na całej sekcji obciążał kartę graficzną) */
.rl::after { content: ''; position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: var(--rl-r); pointer-events: none;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--rl-r) - .5px), var(--ground) var(--rl-r)) 0 0 / var(--rl-r) var(--rl-r) no-repeat,
    radial-gradient(circle at 0 0, transparent calc(var(--rl-r) - .5px), var(--ground) var(--rl-r)) 100% 0 / var(--rl-r) var(--rl-r) no-repeat; }
.rl-stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.reel-on .rl { height: calc(100vh + var(--rl-len)); height: calc(100svh + var(--rl-len)); }
.reel-on .rl-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }

/* ---------- Tło: siatka, poświaty, ziarno, światło za kursorem ---------- */
.rl-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' opacity='.08'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 50% -10%, #0d2152 0%, rgba(13, 33, 82, 0) 62%),
    radial-gradient(130% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .45) 100%),
    #040a1c;
}
.rl-meshwrap { position: absolute; inset: 0; opacity: .3; }
.rl-glow { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; pointer-events: none; will-change: opacity; }
.rl-warm { top: 72%; width: min(1000px, 150vw); aspect-ratio: 1.3; opacity: .35; background: radial-gradient(closest-side, rgba(255, 96, 48, .5), rgba(255, 96, 48, .16) 45%, transparent 72%); }
.rl-blue { top: 48%; width: min(1100px, 170vw); aspect-ratio: 1.4; opacity: 0; visibility: hidden; background: radial-gradient(closest-side, rgba(31, 91, 255, .55), rgba(31, 91, 255, .16) 48%, transparent 74%); }
.rl-cyan { left: 72%; top: 54%; width: min(900px, 130vw); aspect-ratio: 1; opacity: 0; visibility: hidden; background: radial-gradient(closest-side, rgba(54, 197, 240, .42), rgba(54, 197, 240, .1) 50%, transparent 74%); }
.rl-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(140, 175, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 175, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px; background-position: 50% 0;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 38%, #000 20%, transparent 78%); mask-image: radial-gradient(70% 62% at 50% 38%, #000 20%, transparent 78%);
}
.rl-spot { position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform;
  background: radial-gradient(closest-side, rgba(120, 170, 255, .13), rgba(120, 170, 255, .04) 55%, transparent); transition: opacity .6s; }
.rl-spot.on { opacity: 1; }
.rl-flash { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; background: radial-gradient(48% 34% at 50% 27%, rgba(255, 170, 110, .55), rgba(255, 90, 54, .2) 50%, transparent 82%); }

/* Kurtyna światła (chaos → spokój): szeroka plansza z jasną krawędzią, przesuwana w poprzek */
.rl-wipe { position: absolute; top: 0; bottom: 0; left: 0; width: 140%; z-index: 6; pointer-events: none; visibility: hidden; will-change: transform;
  background: linear-gradient(90deg, #050c26 0%, #07123a 74%, #0e2a7a 86%, rgba(80, 150, 255, .9) 93.5%, #f2f8ff 96.6%, rgba(160, 205, 255, .5) 97.6%, rgba(31, 91, 255, 0) 100%); }

/* ---------- Teksty w górnej strefie ---------- */
.rl-copy { position: absolute; left: 0; right: 0; top: var(--top-pad); z-index: 4; padding: 0 var(--gutter); text-align: center; pointer-events: none; }
.rl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 99px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 14px; font-weight: 500; color: #c6d4ee;
}
.rl-eyebrow b { padding: 3px 9px; border-radius: 99px; background: var(--grad); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.rl-title { margin: clamp(14px, calc(var(--vh) * 2.4), 24px) auto 0; max-width: 14em; font: 800 var(--t0)/.98 var(--sans); letter-spacing: -.056em; text-wrap: balance; }
.rl-title .ln { display: block; }
.rl-title .ln:first-child { color: #9fb2d4; }
.rl-hot, .rl-cool { font: italic 400 1.1em/1 var(--serif); letter-spacing: -.02em; padding: 0 .08em 0 .02em; -webkit-background-clip: text; background-clip: text; color: transparent; }
.rl-hot { background-image: linear-gradient(100deg, #ff5a36, #ff8f3d 50%, #ffc46b); filter: drop-shadow(0 0 26px rgba(255, 90, 54, .5)); }
.rl-cool { background-image: linear-gradient(100deg, #6d9bff, #4fb8ff 50%, #7fe6ff); filter: drop-shadow(0 0 26px rgba(54, 140, 255, .6)); }
/* Słowa wjeżdżają spod maski (podział robi intro.js) */
.fw { display: inline-block; vertical-align: top; padding: .04em .12em .2em; margin: -.04em -.12em -.2em; clip-path: inset(-1em -1em -.3em -1em); }
/* maska tnie tylko od dołu (słowo wjeżdża spod linii), więc poświata kursywy nie jest przycinana do prostokąta */
.fwi { display: inline-block; }

.rl-label { display: inline-block; text-wrap: balance; font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ffb592; }
.rl-label::before { content: ''; display: inline-block; vertical-align: .08em; margin-right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #ff5a36; box-shadow: 0 0 12px 2px rgba(255, 90, 54, .85); animation: rlRec 1.1s steps(2, jump-none) infinite; }
@keyframes rlRec { 50% { opacity: .25; } }
/* Licznik jak w zegarze: kolumny cyfr przewijane w pionie */
.rl-count { position: relative; display: grid; width: fit-content; margin: clamp(4px, calc(var(--vh) * 1), 12px) auto 0; font: 800 var(--t1)/1 var(--sans); letter-spacing: -.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-odo { grid-area: 1 / 1; display: flex; align-items: flex-start; padding: .02em .06em .06em; }
/* okienko cyfry przycina clip-path: overflow nie przycina tekstu z gradientem (background-clip: text) w Chrome */
.od { display: inline-block; height: 1em; clip-path: inset(0 -.12em); }
.od-c { display: block; }
.od-c > span, .od-t { display: block; height: 1em; line-height: 1em; }
.od-t { white-space: pre; }
.rl-odo.hot { filter: drop-shadow(0 0 38px rgba(255, 90, 54, .55)); }
.rl-odo.hot .od-c, .rl-odo.hot .od-t { background: linear-gradient(180deg, #fff 8%, #ffd5bf 34%, #ff7a3d 74%, #ff5a36) 0 0 / 100% 1em repeat-y; -webkit-background-clip: text; background-clip: text; color: transparent; }
.rl-odo.cold { color: #46536e; opacity: 0; visibility: hidden; }
.rl-strike { position: absolute; left: -5%; right: -5%; top: 50%; height: .085em; margin-top: -.04em; border-radius: 99px; background: linear-gradient(90deg, #ff5a36, #ff9a3d 60%, #ffe0a8); box-shadow: 0 0 18px rgba(255, 90, 54, .95), 0 0 60px rgba(255, 90, 54, .55); transform-origin: 0 50%; visibility: hidden; }
.rl-head { position: absolute; left: -5%; top: 50%; width: .3em; height: .3em; margin: -.15em 0 0 -.15em; border-radius: 50%; visibility: hidden; opacity: 0;
  background: radial-gradient(circle, #fff 0 22%, #ffd19a 36%, rgba(255, 120, 60, .55) 58%, transparent 72%); }
.rl-sparks { position: absolute; left: 105%; top: 50%; width: 0; height: 0; }
.rl-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ffe2b8; box-shadow: 0 0 10px 2px rgba(255, 140, 70, .9); visibility: hidden; opacity: 0; }
.rl-sparks i:nth-child(3n) { width: 4px; height: 4px; background: #fff; }
.rl-after { margin: clamp(2px, calc(var(--vh) * .6), 10px) 0 0; font: 600 var(--t2)/1.15 var(--sans); letter-spacing: -.03em; color: #e3ebfa; }
.rl-after .rl-cool { font-size: 1.4em; }
.rl-fine { display: block; margin-top: 10px; font-size: 12.5px; color: #7083a6; }

/* Logo składane jak napis: kwadrat, potem dwie belki-„linijki”, nazwa i hasło słowo po słowie */
.rl-c2 { top: 0; bottom: 0; z-index: 7; display: grid; place-content: center; justify-items: center; }
.rl-logo { position: relative; width: clamp(66px, min(8.4vw, calc(var(--vh) * 12)), 104px); aspect-ratio: 1; }
.rl-mark { position: absolute; inset: 0; border-radius: 30%; background: var(--grad); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(31, 91, 255, .95), 0 0 90px 12px rgba(54, 140, 255, .45); }
.rl-mark i { position: absolute; left: 50%; height: 11.6%; border-radius: 99px; background: #fff; transform-origin: 0 50%; }
.rl-mark .b1 { top: 33%; width: 33%; margin-left: -16.5%; opacity: .6; }
.rl-mark .b2 { top: 56%; width: 50%; margin-left: -25%; }
.rl-ring { position: absolute; inset: -38%; border-radius: 50%; pointer-events: none; animation: rlSpin 3.6s linear infinite;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(120, 190, 255, .9) 78%, #fff 80%, transparent 81%);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89.5%, #000 91.5%, transparent 93%); mask: radial-gradient(closest-side, transparent 88%, #000 89.5%, #000 91.5%, transparent 93%); }
.rl-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .16); }
@keyframes rlSpin { to { transform: rotate(360deg); } }
.rl-rays { position: absolute; left: 50%; top: 50%; width: min(820px, 190vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; visibility: hidden; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(130, 180, 255, .11) 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .5) 40%, transparent 72%); mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .5) 40%, transparent 72%); }
.rl-word { margin: clamp(16px, calc(var(--vh) * 3.2), 30px) 0 0; font: 800 var(--tw)/.92 var(--sans); letter-spacing: -.066em; }
.rl-word .wp { display: inline-block; padding-bottom: .08em; }
.rl-word mark { padding: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rl-tag { position: relative; isolation: isolate; margin: clamp(12px, calc(var(--vh) * 2), 20px) auto 0; max-width: 20em; font: 650 var(--t2)/1.45 var(--sans); letter-spacing: -.025em; color: #fff; }
.rl-tag .tw { display: inline-block; }
.rl-hl { position: absolute; left: 0; top: 0; z-index: -1; height: 1.32em; border-radius: .28em; background: var(--grad); box-shadow: 0 .3em .9em -.3em rgba(31, 91, 255, .9); visibility: hidden; opacity: 0; }

.rl-kick { display: inline-block; text-wrap: balance; font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8fb4ff; }
.rl-kick::before { content: ''; display: inline-block; vertical-align: .3em; margin-right: 10px; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-x); }
.rl-big { margin: clamp(8px, calc(var(--vh) * 1.6), 16px) auto 0; max-width: 16em; font: 750 var(--t3)/1.08 var(--sans); letter-spacing: -.046em; text-wrap: balance; }
.rl-big .rl-cool { font-size: 1.12em; }
.rl-c3a-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.rl-timer { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(140, 180, 255, .22); font-size: 14px; font-weight: 500; color: #c6d4ee; }
.rl-timer b { min-width: 2.6em; font: 600 15px/1 var(--mono); color: #fff; font-variant-numeric: tabular-nums; text-align: left; }
.tm-i { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(31, 91, 255, .3); color: #a9c6ff; }
.tm-i .ico { position: absolute; width: 16px; height: 16px; }
.tm-ok { opacity: 0; color: #5be3a6; stroke-width: 3; }

/* Przed przewinięciem do swojego kadru teksty są niewidoczne */
.reel-on .rl-eyebrow, .reel-on .rl-title, .reel-on .rl-c1, .reel-on .rl-c2, .reel-on .rl-c3, .reel-on .rl-c3a, .reel-on .rl-after, .reel-on .rl-fine,
.reel-on .rl-final [data-rl], .reel-on .rl-res, .reel-on .rl-halo, .reel-on .rl-chip,
.reel-on .rl-pain, .reel-on .rl-laptop, .reel-on .rl-res .reel-side, .reel-on .rl-res .reel-meta, .reel-on .rl-res .reel-bar { visibility: hidden; opacity: 0; }

/* ---------- Urządzenia ---------- */
.rl-slot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; justify-items: center; pointer-events: none; }
.rl-slot-chaos { top: var(--dev-top); align-items: start; }
.rl-slot-laptop { top: var(--lt-top); align-items: center; padding-bottom: clamp(10px, calc(var(--vh) * 3), 34px); }
.rl-tilt, .rl-cam { position: relative; }
.rl-cam { will-change: transform; }

.rl-phone {
  --pw: 280px;
  position: relative; width: var(--pw); padding: calc(var(--pw) * .032); border-radius: calc(var(--pw) * .155);
  background: linear-gradient(160deg, #2b3c5e, #0c1832 52%, #060d20);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15), 0 0 0 1px rgba(0, 0, 0, .7), 0 60px 110px -40px rgba(0, 0, 0, .95);
}
/* Krawędź podświetlona jak szkło */
.rl-phone::before { content: ''; position: absolute; inset: 0; z-index: 7; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 26%, rgba(120, 170, 255, 0) 70%, rgba(120, 170, 255, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.rl-phone .rl-scr { position: relative; aspect-ratio: 9 / 17; border-radius: calc(var(--pw) * .125); overflow: hidden; isolation: isolate; container-type: inline-size; background: #050d22; }
.rl-phone .notch { top: 3.6cqw; width: 30%; height: 8cqw; }
.rl-phone .glare { inset: calc(var(--pw) * .032); border-radius: calc(var(--pw) * .125); z-index: 6; background-position: 58% 0; mix-blend-mode: normal; opacity: .55; }

.rl-box { position: relative; }
.rl-box .rl-phone { --pw: min(300px, 58vw, calc((var(--vh) * 100 - var(--dev-top) - 24px) / 1.84)); }
.rl-load { animation: rlRise 1.4s cubic-bezier(.16, 1, .3, 1) .35s both; }
@keyframes rlRise { from { opacity: 0; transform: translateY(80px); } }
@keyframes rlUp { from { opacity: 0; transform: translateY(20px); } }

/* Edytor na telefonie: ręczny montaż (wszystko w jednostkach szerokości ekranu) */
.ed { position: absolute; inset: 0; display: grid; grid-template-rows: 13cqw 84cqw 12cqw 1fr; background: #090f1f; color: #cfd8ea; font-family: var(--sans); }
.ed-top { display: flex; align-items: flex-end; gap: 2.6cqw; padding: 0 4cqw 2.2cqw; font-size: 3.5cqw; }
.ed-top .back { flex: none; width: 2.8cqw; height: 2.8cqw; margin: 0 1cqw 1cqw; border-left: .7cqw solid #9fb0cc; border-bottom: .7cqw solid #9fb0cc; transform: rotate(45deg); }
.ed-top span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6edf8; font-weight: 600; }
.ed-top b { flex: none; padding: 1.3cqw 3cqw; border-radius: 99px; background: #222e48; font-size: 3.1cqw; font-weight: 600; color: #8193b3; }
.ed-view { position: relative; margin: 0 3cqw; border-radius: 3cqw; overflow: hidden; background: radial-gradient(70% 60% at 25% 20%, #4a5a74, transparent 70%), radial-gradient(60% 50% at 85% 85%, #33405a, transparent 70%), #1b2335; }
/* surowe nagranie: przygaszone, bez korekcji kolorów */
.ed-person { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.45) brightness(.78) contrast(.92); }
.ed-box { position: absolute; left: 9%; right: 9%; top: 56%; padding: 2.2cqw 1.6cqw; border: .45cqw dashed rgba(255, 255, 255, .8); background: rgba(5, 10, 25, .4); font: 700 5cqw/1.15 var(--sans); color: #fff; text-align: center; white-space: nowrap; }
.ed-box i { position: absolute; width: 2cqw; height: 2cqw; background: #fff; border-radius: .4cqw; }
.ed-box i:nth-child(1) { left: -1.2cqw; top: -1.2cqw; } .ed-box i:nth-child(2) { right: -1.2cqw; top: -1.2cqw; }
.ed-box i:nth-child(3) { left: -1.2cqw; bottom: -1.2cqw; } .ed-box i:nth-child(4) { right: -1.2cqw; bottom: -1.2cqw; }
.ed-caret { display: inline-block; width: .6cqw; height: 5cqw; margin-left: .4cqw; vertical-align: -.6cqw; background: #ff8f3d; animation: rlRec .9s steps(2, jump-none) infinite; }
.ed-tc { position: absolute; left: 3cqw; bottom: 3cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 1cqw 2cqw; border-radius: 99px; background: rgba(0, 0, 0, .45); font: 500 3cqw/1 var(--mono); color: #e6edf8; }
.ed-tc::before { content: ''; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #ff3b3b; }
.ed-toast { position: absolute; left: 4cqw; right: 4cqw; top: 4cqw; z-index: 2; display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3cqw; border-radius: 3cqw; background: #e5484d; box-shadow: 0 2cqw 6cqw -2cqw rgba(229, 72, 77, .9); font: 600 3.3cqw/1.25 var(--sans); color: #fff; visibility: hidden; opacity: 0; }
.ed-toast svg { flex: none; width: 5cqw; height: 5cqw; }
.ed-tools { display: flex; justify-content: space-between; align-items: center; padding: 0 5cqw; }
.ed-tools i { width: 7.4cqw; height: 7.4cqw; border-radius: 2.2cqw; background: #19233b; box-shadow: inset 0 0 0 .3cqw #24304d; }
.ed-tools i:nth-child(2) { background: #3a2a24; box-shadow: inset 0 0 0 .3cqw #ff7a3d; }
.ed-tl { position: relative; padding: 2cqw 0 0 3cqw; overflow: hidden; background: #0b1326; border-top: .35cqw solid #1a2440; }
.ed-ruler { height: 3cqw; margin-right: -3cqw; background: repeating-linear-gradient(90deg, #33405d 0 .3cqw, transparent .3cqw 4cqw); }
.ed-row { display: flex; gap: .9cqw; height: 9cqw; margin-top: 2cqw; white-space: nowrap; }
.ed-row i { flex: none; width: var(--w); border-radius: 1.6cqw; transform-origin: 0 50%; }
.ed-row.v i { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 5cqw, transparent 5cqw 10cqw), linear-gradient(#4a6090, #34476e); box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .12); }
.ed-row.t i { position: relative; background: linear-gradient(#ff8a4c, #f0642f); box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .2); }
.ed-row.t i::before { content: 'T'; position: absolute; left: 1.6cqw; top: 50%; translate: 0 -50%; font: 800 3.4cqw/1 var(--sans); color: rgba(255, 255, 255, .85); }
.ed-row.t2 i { background: linear-gradient(#ffc04d, #f0a020); }
.ed-row.a { height: 8cqw; }
.ed-row.a i { background: repeating-linear-gradient(90deg, #22c08a 0 .7cqw, transparent .7cqw 1.5cqw) 0 50% / 100% 62% no-repeat, #0f3a2f; }
.ed-row .x { visibility: hidden; opacity: 0; }
.ed-head { position: absolute; z-index: 2; top: 0; bottom: 0; left: 26cqw; width: .55cqw; background: #fff; box-shadow: 0 0 2cqw rgba(255, 255, 255, .8); animation: edScrub 3.4s ease-in-out infinite alternate; }
.ed-head::before { content: ''; position: absolute; left: 50%; top: 0; width: 3.4cqw; height: 3.4cqw; translate: -50% 0; border-radius: 0 0 1.4cqw 1.4cqw; background: #fff; }
@keyframes edScrub { from { transform: translateX(-14cqw); } to { transform: translateX(40cqw); } }

/* Ból: karteczki z czasem dookoła telefonu */
.rl-pains { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.rl-pain {
  position: absolute; display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 9px; border-radius: 16px; white-space: nowrap;
  background: linear-gradient(135deg, rgba(48, 20, 16, .94), rgba(26, 14, 24, .92)); border: 1px solid rgba(255, 122, 61, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 44px -22px rgba(0, 0, 0, .9), 0 0 34px -10px rgba(255, 90, 54, .55);
  font-size: 14.5px; line-height: 1.2;
}
.rl-pain .pi { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #ff6a3d, #ff9a3d); color: #fff; box-shadow: 0 6px 16px -6px rgba(255, 90, 54, .9); }
.rl-pain .pi .ico { width: 18px; height: 18px; }
.rl-pain b { font-weight: 650; letter-spacing: -.01em; color: #fff; }
.rl-pain em { margin-left: 2px; padding: 3px 8px; border-radius: 99px; background: rgba(255, 122, 61, .16); font: 600 12.5px/1 var(--mono); font-style: normal; color: #ffab7d; }
.rl-pain.l { right: calc(100% + 34px); } .rl-pain.r { left: calc(100% + 34px); }
.rl-pain:nth-child(1) { top: 6%; }  .rl-pain:nth-child(2) { top: 18%; }
.rl-pain:nth-child(3) { top: 36%; right: calc(100% + 64px); } .rl-pain:nth-child(4) { top: 48%; left: calc(100% + 66px); }
.rl-pain:nth-child(5) { top: 66%; } .rl-pain:nth-child(6) { top: 78%; }

/* Laptop z Napisownią (wnętrze ekranu skaluje się razem z nim: jednostki cqw) */
.rl-chaos, .rl-laptop, .lt-lid, .rl-logo, .rl-count, .rl-pain, .rl-chip, .ui-cur, .ui-stack, .rl-hl { will-change: transform; }
.rl-laptop { --lw: min(84vw, 960px, calc((var(--vh) * 100 - var(--lt-top) - 30px) * 1.6)); position: relative; width: var(--lw); }
.lt-lid { position: relative; width: 86%; margin: 0 auto; padding: calc(var(--lw) * .016) calc(var(--lw) * .016) calc(var(--lw) * .028); border-radius: calc(var(--lw) * .026) calc(var(--lw) * .026) calc(var(--lw) * .006) calc(var(--lw) * .006);
  background: linear-gradient(180deg, #1f2b45, #0c1428); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), 0 0 0 1px rgba(0, 0, 0, .6); }
.lt-lid::before { content: ''; position: absolute; left: 50%; top: calc(var(--lw) * .0065); width: calc(var(--lw) * .006); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: #2c3a58; box-shadow: 0 0 0 1px #0a1124; }
.lt-scr { position: relative; aspect-ratio: 16 / 10; border-radius: calc(var(--lw) * .006); overflow: hidden; isolation: isolate; container-type: inline-size; background: #eef3f9; }
.lt-off { position: absolute; inset: 0; z-index: 9; background: linear-gradient(160deg, #0d1528, #03060f); }
.lt-bloom { position: absolute; left: 50%; top: 50%; z-index: 10; width: 90%; aspect-ratio: 1.6; translate: -50% -50%; border-radius: 50%; pointer-events: none; visibility: hidden; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(170, 205, 255, .55) 42%, transparent 76%); }
.lt-sheen { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%); }
.lt-sweep { position: absolute; top: -20%; bottom: -20%; left: 0; z-index: 8; width: 26%; pointer-events: none; transform: translateX(-130%) skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 50%, transparent); }
.lt-base { position: relative; height: calc(var(--lw) * .03); border-radius: 0 0 calc(var(--lw) * .034) calc(var(--lw) * .034) / 0 0 calc(var(--lw) * .02) calc(var(--lw) * .02);
  background: linear-gradient(180deg, #8d9bb8 0%, #4c5a79 16%, #27324c 60%, #121a2e 100%); box-shadow: 0 34px 60px -20px rgba(0, 0, 0, .95); }
.lt-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; translate: -50% 0; border-radius: 0 0 calc(var(--lw) * .01) calc(var(--lw) * .01); background: linear-gradient(#202a42, #2f3b58); }
.lt-glow { position: absolute; left: 50%; top: 40%; width: 120%; aspect-ratio: 2.2; translate: -50% -50%; z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0; visibility: hidden;
  background: radial-gradient(closest-side, rgba(110, 160, 255, .5), rgba(31, 91, 255, .16) 50%, transparent 76%); }

/* Ekran laptopa: tylko dwa duże elementy (klipy i podgląd), żeby przy „twojej minucie” wszystko było czytelne */
.ui { position: absolute; inset: 0; display: grid; grid-template-rows: 8.4cqw 1fr; background: radial-gradient(80% 60% at 50% 0%, #dde8ff, rgba(221, 232, 255, 0) 70%), #eef3f9; color: #0a1a33; font: 500 1.9cqw/1.3 var(--sans); }
.ui-bar { display: flex; align-items: center; gap: 1.2cqw; margin: 1.5cqw 2.2cqw 0; padding: 0 1.4cqw 0 2cqw; border-radius: 1.8cqw; background: rgba(255, 255, 255, .92); box-shadow: 0 .4cqw 1.6cqw -1cqw rgba(10, 26, 51, .4); }
.ui-brand { display: flex; align-items: center; gap: 1cqw; font-weight: 700; font-size: 2.3cqw; letter-spacing: -.045em; }
.ui-brand i { position: relative; width: 3cqw; aspect-ratio: 1; border-radius: 1cqw; background: var(--grad); }
.ui-brand mark { padding: 0; background: none; color: var(--accent); }
.ui-pill { margin-left: auto; padding: .7cqw 1.6cqw; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 1.7cqw; }
.ui-dl { position: relative; display: flex; align-items: center; gap: .7cqw; padding: 1cqw 1.8cqw; border-radius: 1.2cqw; overflow: hidden; background: #dbe3ef; color: #7b8aa3; font-weight: 650; font-size: 1.7cqw; }
.ui-dl svg, .ui-dl-on svg { width: 2cqw; height: 2cqw; }
.ui-dl-on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .7cqw; background: var(--grad); color: #fff; visibility: hidden; opacity: 0; }
.ui-main { display: grid; grid-template-columns: 36cqw 25cqw; justify-content: center; align-items: center; gap: 6cqw; padding: 1.4cqw 2cqw 2cqw; min-height: 0; }
.ui-card { padding: 2.2cqw; border-radius: 2.2cqw; background: #fff; border: 1px solid #e2e9f2; box-shadow: 0 1.8cqw 4cqw -2.4cqw rgba(10, 26, 51, .45); }
.ui-h { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-bottom: 1.2cqw; font-weight: 750; font-size: 2.3cqw; letter-spacing: -.03em; }
.ui-clips { position: relative; }
.ui-clip { display: grid; grid-template-columns: 7.4cqw 1fr; gap: 1.4cqw; align-items: center; margin-top: 1cqw; padding: 1cqw; border-radius: 1.4cqw; background: #f5f8fc; visibility: hidden; opacity: 0; }
.ui-clip .th { height: 5.4cqw; border-radius: 1cqw; }
.ui-clip:nth-child(2) .th, .ui-file.f1 .th { background: radial-gradient(70% 70% at 30% 30%, #4a7bff, #0b1a3a); }
.ui-clip:nth-child(3) .th, .ui-file.f2 .th { background: radial-gradient(60% 60% at 50% 40%, #d39a7c, #3a2a2a 75%); }
.ui-clip:nth-child(4) .th, .ui-file.f3 .th { background: radial-gradient(70% 70% at 70% 30%, #36c5f0, #0b1a3a); }
.ui-clip b { display: block; font-size: 1.85cqw; font-weight: 700; }
.ui-clip small { font: 500 1.5cqw var(--mono); color: #5d6b82; }
.ui-wf { display: flex; height: 1.1cqw; margin-top: .7cqw; border-radius: 99px; overflow: hidden; }
.ui-wf .s { flex: none; width: 20%; background: #c9d5e4; }
.ui-wf .s + .v + .s { width: 16%; }
.ui-wf .v { flex: 1; background: linear-gradient(90deg, #1f5bff, #36c5f0); }
.ui-go { position: relative; display: flex; align-items: center; justify-content: center; gap: .9cqw; margin-top: 1.5cqw; padding: 1.5cqw; border-radius: 1.4cqw; overflow: hidden; background: var(--grad); color: #fff; font-weight: 750; font-size: 2.1cqw; box-shadow: 0 1.4cqw 3cqw -1.2cqw rgba(31, 91, 255, .95), inset 0 .15cqw 0 rgba(255, 255, 255, .35); visibility: hidden; opacity: 0; }
.ui-go svg { width: 2.3cqw; height: 2.3cqw; }
.ui-dz { position: absolute; left: 2.2cqw; right: 2.2cqw; top: 6.4cqw; bottom: 2.2cqw; display: grid; place-content: center; justify-items: center; gap: .7cqw; border: .25cqw dashed #b9c8dc; border-radius: 1.6cqw; background: #f7faff; color: #5d6b82; text-align: center; }
.ui-dz svg { width: 4.4cqw; height: 4.4cqw; margin-bottom: .6cqw; color: var(--accent); }
.ui-dz b { font-size: 2.1cqw; color: #0a1a33; }
.ui-dz small { font-size: 1.5cqw; }
.ui-dz-on { position: absolute; inset: -.25cqw; border-radius: inherit; border: .3cqw solid var(--accent); background: rgba(31, 91, 255, .08); box-shadow: 0 0 0 .9cqw rgba(31, 91, 255, .12); visibility: hidden; opacity: 0; }
.ui-stack { position: absolute; left: 63%; top: 66%; z-index: 25; width: 20cqw; height: 8cqw; }
.ui-file { position: absolute; left: 0; top: 0; width: 20cqw; display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 2cqw 4cqw -1.4cqw rgba(10, 26, 51, .6), 0 0 0 1px #e2e9f2; font-size: 1.7cqw; font-weight: 700; }
.ui-file .th { flex: none; width: 6cqw; height: 4.2cqw; border-radius: .9cqw; }
.ui-file.f3 { transform: translate(2cqw, 1.7cqw) rotate(8deg); } .ui-file.f2 { transform: translate(1cqw, .9cqw) rotate(4deg); } .ui-file.f1 { transform: rotate(-3deg); }
.ui-stack-n { position: absolute; right: -1.4cqw; top: -1.6cqw; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #e5484d; color: #fff; font: 700 1.8cqw/3.4cqw var(--sans); text-align: center; box-shadow: 0 .5cqw 1.2cqw rgba(229, 72, 77, .6); }
.reel-on .ui-stack { visibility: hidden; opacity: 0; }
.ui-cur { position: absolute; left: 0; top: 0; z-index: 30; width: 3.4cqw; visibility: hidden; opacity: 0; filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .35)); }
.ui-cur svg { display: block; width: 100%; height: auto; fill: #fff; stroke: #0a1a33; stroke-width: 1.5; stroke-linejoin: round; }
.ui-click { position: absolute; left: -1.8cqw; top: -2cqw; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: .35cqw solid rgba(31, 91, 255, .85); visibility: hidden; opacity: 0; }
.ui-pv { position: relative; width: 25cqw; aspect-ratio: 9 / 17; border-radius: 2.4cqw; overflow: hidden; isolation: isolate; container-type: inline-size; background: #050d22; box-shadow: 0 0 0 .6cqw #0a1a33, 0 2.4cqw 4.4cqw -2cqw rgba(10, 26, 51, .7); }
.pv-tag { position: absolute; right: 6cqw; top: 6cqw; padding: 1.5cqw 3.6cqw; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 5.4cqw/1 var(--mono); }

/* Pokaz w telefonie (nakładka nad prawdziwą próbką; jednostki cqw = szerokość ekranu telefonu) */
.dm { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
.pv-bg, .pv-bg2 { position: absolute; inset: -4%; }
.pv-bg { background: radial-gradient(45% 30% at 35% 22%, #2453c9, transparent 70%), radial-gradient(40% 28% at 70% 48%, #0f6f86, transparent 72%), radial-gradient(45% 30% at 50% 88%, #3b2a7a, transparent 72%), #071028; }
.pv-bg2 { background: radial-gradient(34% 22% at 18% 16%, rgba(255, 170, 90, .75), transparent 72%), radial-gradient(26% 16% at 84% 30%, rgba(255, 120, 150, .45), transparent 72%), radial-gradient(50% 32% at 30% 20%, #8a4a1c, transparent 72%), radial-gradient(45% 30% at 75% 70%, #5a2234, transparent 72%), #1a0f12; }
.pv-person { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; }
.pv-face { position: absolute; left: 25.5%; top: 32.5%; width: 49%; height: 31%; visibility: hidden; opacity: 0; }
.pv-face i { position: absolute; width: 26%; height: 22%; border: 1.8cqw solid #36c5f0; filter: drop-shadow(0 0 3cqw rgba(54, 197, 240, .9)); }
.pv-face i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 4cqw 0 0 0; }
.pv-face i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 4cqw 0 0; }
.pv-face i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 4cqw; }
.pv-face i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 4cqw 0; }
.pv-face b { position: absolute; left: 50%; top: -13cqw; translate: -50% 0; padding: 1cqw 3.6cqw; border-radius: 99px; background: #36c5f0; color: #04203a; font: 700 4.6cqw/1.3 var(--sans); white-space: nowrap; }
.pv-cap { position: absolute; left: 0; right: 0; top: 49%; z-index: 2; display: grid; place-items: center; }
.pv-g { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 3.4cqw; white-space: nowrap; }
.pv-w { display: inline-block; visibility: hidden; opacity: 0; color: #fff; text-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .6); }
.pv-w.b { font: 400 12.5cqw/1 'Bebas Neue', var(--sans); letter-spacing: .01em; }
.pv-w.s { font: 700 11.5cqw/1 'Caveat', var(--hand); }
.pv-ring { position: absolute; left: 50%; top: 46%; z-index: 3; width: 70cqw; aspect-ratio: 1; margin: -35cqw 0 0 -35cqw; border-radius: 50%; border: 1.8cqw solid rgba(255, 255, 255, .9); box-shadow: 0 0 8cqw rgba(140, 200, 255, .9); visibility: hidden; opacity: 0; }
.pv-flash { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle at 50% 50%, #ffb27a, #ff7a3d 45%, rgba(255, 90, 54, .4)); visibility: hidden; opacity: 0; }
.pv-badge { position: absolute; left: 50%; top: 27cqw; z-index: 5; translate: -50% 0; display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 4.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .94); color: #0a1a33; font: 650 4.6cqw/1.2 var(--sans); white-space: nowrap; box-shadow: 0 4cqw 8cqw -4cqw rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; }
.pv-badge svg { width: 5.4cqw; height: 5.4cqw; color: var(--ok); stroke-width: 3; }
.dm-job { position: absolute; left: 6cqw; right: 6cqw; top: 14cqw; z-index: 6; padding: 3cqw 3.6cqw 3.2cqw; border-radius: 4.4cqw; background: rgba(8, 16, 38, .78); border: 1px solid rgba(140, 180, 255, .22); box-shadow: 0 4cqw 10cqw -4cqw rgba(0, 0, 0, .8); color: #fff; visibility: hidden; opacity: 0; }
.dm-row { display: flex; align-items: center; gap: 2.4cqw; font: 600 4.4cqw/1.2 var(--sans); }
.dm-status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-pct { font: 600 4.4cqw/1 var(--mono); color: #8cc2ff; }
.dm-spin { flex: none; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; border: .9cqw solid rgba(140, 190, 255, .25); border-top-color: #6db4ff; animation: rlSpin .9s linear infinite; }
.dm-bar { display: block; height: 1.4cqw; margin-top: 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.dm-fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-x); transform: scaleX(0); transform-origin: 0 50%; }
.dm-cut { position: absolute; left: 7cqw; right: 7cqw; bottom: 16cqw; z-index: 6; display: grid; justify-items: center; gap: 3cqw; visibility: hidden; opacity: 0; }
.dm-wave { position: relative; display: flex; width: 100%; height: 11cqw; padding: 2cqw; border-radius: 3cqw; background: rgba(8, 16, 38, .8); border: 1px solid rgba(140, 180, 255, .22); }
.dm-wave i { display: block; height: 100%; border-radius: 1.4cqw; }
.dm-wave .s { flex: none; width: 24%; background: repeating-linear-gradient(90deg, #8392ad 0 .9cqw, transparent .9cqw 2cqw) 0 50% / 100% 30% no-repeat; }
.dm-wave .s + .v + .s { width: 18%; }
.dm-wave .v { flex: 1; margin: 0 1cqw; background: repeating-linear-gradient(90deg, #6db4ff 0 .9cqw, transparent .9cqw 2cqw) 0 50% / 100% 80% no-repeat; }
.dm-sc { position: absolute; top: -6cqw; width: 7cqw; height: 7cqw; padding: 1.4cqw; border-radius: 50%; background: #ff6a3d; color: #fff; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(255, 90, 54, .9); visibility: hidden; opacity: 0; }
.dm-sc.a { left: calc(24% - 1.5cqw); } .dm-sc.b { right: calc(18% - 1.5cqw); }
.dm-cut b { padding: 1.6cqw 3.6cqw; border-radius: 99px; background: #ff6a3d; font: 700 4.4cqw/1 var(--sans); color: #fff; visibility: hidden; opacity: 0; }
.dm-pop { position: absolute; left: 50%; top: 30%; z-index: 5; translate: -50% 0; display: flex; align-items: center; gap: 1.6cqw; padding: 2cqw 4cqw; border-radius: 99px; background: #fff; color: #1f5bff; font: 800 5.2cqw/1 var(--sans); box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; }
.dm-pop svg { width: 5cqw; height: 5cqw; }
.dm-done { position: absolute; left: 50%; top: 50%; z-index: 7; translate: -50% -50%; display: grid; justify-items: center; gap: 3cqw; visibility: hidden; opacity: 0; }
.dm-done i { display: grid; place-items: center; width: 30cqw; height: 30cqw; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: 0 0 0 3cqw rgba(54, 140, 255, .25), 0 4cqw 12cqw -3cqw rgba(31, 91, 255, .9); }
.dm-done svg { width: 15cqw; height: 15cqw; stroke-width: 3; }
.dm-done b { font: 800 7cqw/1 var(--sans); letter-spacing: -.03em; text-shadow: 0 1cqw 4cqw rgba(0, 0, 0, .6); }
.pv-time { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 1.6cqw; background: rgba(255, 255, 255, .25); }
.pv-time i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; animation: reelbar 5s linear infinite; }
/* 6 stylów naraz: ekran podzielony na pasy z prawdziwymi próbkami z aplikacji (te same pliki co w sekcji stylów);
   każdy pas kadruje swój napis (object-position z zasięgu napisu w całym nagraniu), styl 5 ma dwie linijki, więc wyższy pas, a styl 6 bywa w dwóch */
.dm-styles { position: absolute; inset: 0; z-index: 4; display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1.32fr 1.15fr; overflow: hidden; visibility: hidden; opacity: 0; }
.dm-band { position: relative; overflow: hidden; background: #050d22; will-change: transform; }
.dm-band + .dm-band { border-top: .7cqw solid #000; }
.dm-band b { position: absolute; z-index: 1; left: 2.6cqw; top: 2.4cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 1cqw 2.6cqw 1cqw 2cqw; border-radius: 99px;
  background: rgba(0, 0, 0, .58); color: #fff; font: 700 3.7cqw/1.2 var(--sans); letter-spacing: -.01em; }
.dm-band b::before { content: ''; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 2cqw rgba(255, 59, 92, .9); }
.dm-band:first-child b { left: 7.5cqw; top: 4.6cqw; } /* zaokrąglony róg ekranu */
.dm-styles .dm-band:nth-child(1) video { object-position: 50% 50%; }
.dm-styles .dm-band:nth-child(2) video { object-position: 50% 51.5%; }
.dm-styles .dm-band:nth-child(3) video { object-position: 50% 54%; }
.dm-styles .dm-band:nth-child(4) video { object-position: 50% 52.2%; }
.dm-styles .dm-band:nth-child(5) video { object-position: 50% 58.5%; }
.dm-styles .dm-band:nth-child(6) video { object-position: 50% 54.5%; }
/* Strefy TikToka: przyciski z prawej i opis na dole — tam napis nie wchodzi */
.dm-zones { position: absolute; inset: 0; z-index: 1; }
.dm-z { position: absolute; border: .6cqw dashed rgba(255, 128, 138, .9); border-radius: 3cqw; visibility: hidden; opacity: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 70, 90, .32) 0 2.2cqw, rgba(255, 70, 90, .1) 2.2cqw 4.4cqw); }
.dm-z.r { right: 1.6cqw; width: 19cqw; top: 36%; bottom: 23.5%; }
.dm-z.b { left: 1.6cqw; right: 1.6cqw; bottom: 1.6cqw; height: 21%; }
.dm-tags { position: absolute; left: 0; right: 0; top: 72%; z-index: 5; display: grid; justify-items: center; }
.dm-tag { grid-area: 1 / 1; display: flex; align-items: center; gap: 1.6cqw; padding: 1.7cqw 3.8cqw; border-radius: 99px; color: #fff; font: 700 4.3cqw/1.2 var(--sans); white-space: nowrap;
  box-shadow: 0 3cqw 7cqw -3cqw rgba(0, 0, 0, .8); visibility: hidden; opacity: 0; }
.dm-tag .ico { width: 4.8cqw; height: 4.8cqw; stroke-width: 2.6; }
.dm-tag.no { background: #ff4d5e; }
.dm-tag.ok { background: #12a26b; }

/* Bęben z umiejętnościami (karuzela 3D): karta z przodu duża i podświetlona, sąsiednie odchylone i przygaszone */
.rl-wheel { position: absolute; z-index: 4; left: 51%; width: min(470px, 40vw); top: calc(50% + 34px); height: 520px; margin-top: -260px; perspective: 1300px; pointer-events: none; visibility: hidden; opacity: 0; }
.rl-drum { position: absolute; inset: 0; transform-style: preserve-3d; }
.rl-card { position: absolute; left: 0; right: 0; top: 50%; height: 150px; margin-top: -75px; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; padding: 20px 24px;
  border-radius: 24px; background: linear-gradient(135deg, rgba(22, 38, 84, .95), rgba(9, 17, 42, .95)); border: 1px solid rgba(140, 180, 255, .16);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color .4s; }
/* poświata tylko na karcie z przodu, jako osobna warstwa (cienie na wszystkich kartach 3D obciążały kartę graficzną) */
.rl-card::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  box-shadow: 0 0 0 1px rgba(110, 170, 255, .3), 0 0 60px -12px rgba(54, 140, 255, .75), 0 30px 70px -30px rgba(0, 0, 0, .95); }
.rl-card.on { border-color: rgba(140, 190, 255, .55); }
.rl-card.on::after { opacity: 1; }
.rc-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 19px; background: rgba(31, 91, 255, .2); color: #9cc2ff; transition: background .4s, color .4s, box-shadow .4s; }
.rc-ic .ico { width: 30px; height: 30px; }
.rl-card.on .rc-ic { background: var(--grad); color: #fff; box-shadow: 0 12px 26px -10px rgba(31, 91, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.rc-n { display: block; margin-bottom: 4px; font: 600 11.5px/1 var(--mono); letter-spacing: .14em; color: #7d93bd; }
.rl-card h3 { margin: 0; font: 750 clamp(22px, 2.1vw, 28px)/1.1 var(--sans); letter-spacing: -.035em; color: #fff; }
.rl-card p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: #a9badb; }

/* Gotowa rolka: telefon z prawdziwą próbką */
.rl-final { position: absolute; inset: 0; z-index: 3; display: grid; align-items: center; padding-top: 64px; pointer-events: none; }
.rl-final-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center; }
.rl-final-copy { pointer-events: auto; }
.rl-final h1 { margin: 0; font: 800 clamp(40px, min(5.6vw, calc(var(--vh) * 9.4)), 84px)/.98 var(--sans); letter-spacing: -.058em; }
.rl-final h1 .ln { display: block; }
.rl-final h1 .rl-cool { font-size: 1.12em; }
.rl-lede { margin: clamp(14px, calc(var(--vh) * 2.6), 24px) 0 0; max-width: 33em; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.6; color: #b4c3de; text-wrap: pretty; }
.rl-lede b { color: #fff; font-weight: 600; }
.rl .cta-row { margin-top: clamp(18px, calc(var(--vh) * 3.6), 32px); }
.rl .ticks { margin-top: clamp(12px, calc(var(--vh) * 2.2), 20px); color: #9fb0cc; }
.rl .ticks .ico { color: #5be3a6; }
.rl .btn-outline-light { background: rgba(255, 255, 255, .05); }
.rl-pw { position: relative; display: inline-flex; }
.rl-pulse { position: absolute; inset: 0; border-radius: 17px; border: 2px solid rgba(120, 180, 255, .75); pointer-events: none; animation: rlPulse 2.6s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes rlPulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.14); } }
.rl-final-vis { position: relative; display: grid; place-items: center; }
.rl-halo { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(closest-side, rgba(31, 91, 255, .6), rgba(54, 197, 240, .2) 45%, transparent 72%); }
.rl-halo::after { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(140, 190, 255, .16); box-shadow: 0 0 0 60px rgba(140, 190, 255, .025), 0 0 0 130px rgba(140, 190, 255, .018); }
.rl-res { --pw: min(316px, calc((var(--vh) * 100 - 150px) / 1.84)); }
.rl-res .screen::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(transparent 62%, rgba(0, 0, 0, .45)); pointer-events: none; }
.rl-res video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl-res .reel-side { right: 3cqw; gap: 4cqw; font-size: 3.3cqw; }
.rl-res .reel-side svg { width: 8.6cqw; height: 8.6cqw; }
.rl-res .avatar { width: 12cqw; height: 12cqw; }
.rl-res .reel-meta { left: 4.2cqw; right: 20cqw; bottom: 5cqw; font-size: 3.8cqw; }
.rl-res .reel-meta b { font-size: 4.1cqw; }
.rl-res .reel-meta .music svg { width: 3.8cqw; height: 3.8cqw; }
/* Serduszka lecą w górę, gdy rolka gra */
.rl-hearts { position: absolute; z-index: 4; right: 3.5cqw; bottom: 47%; width: 12cqw; height: 60%; pointer-events: none; }
.rl-hearts i { position: absolute; left: 25%; bottom: 0; width: 7.5cqw; height: 7.5cqw; opacity: 0; animation: rlHeart 3s cubic-bezier(.2, .6, .4, 1) infinite; animation-delay: var(--d); animation-play-state: paused; }
.rl-hearts svg { width: 100%; height: 100%; fill: #ff3b5c; filter: drop-shadow(0 .6cqw 1.2cqw rgba(255, 59, 92, .55)); }
.rl-hearts .p svg { fill: #ff8fb1; } .rl-hearts .w svg { fill: #fff; }
.rl-res.live .rl-hearts i { animation-play-state: running; }
/* poza odtwarzaniem serduszka znikają (po powrocie z końca nie wiszą zatrzymane w pół lotu nad pokazem) */
.rl-hearts { opacity: 0; transition: opacity .35s; } .rl-res.live .rl-hearts { opacity: 1; }
@keyframes rlHeart {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  12% { opacity: 1; transform: translate(calc(var(--x) * .4cqw), -8cqw) scale(1.05); }
  100% { opacity: 0; transform: translate(calc(var(--x) * 1.4cqw), -90cqw) scale(.75) rotate(var(--r)); }
}
.rl-chip {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; padding: 10px 15px 10px 10px; border-radius: 16px; white-space: nowrap;
  background: rgba(12, 24, 54, .9); border: 1px solid rgba(140, 180, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -24px rgba(0, 0, 0, .95), 0 0 30px -12px rgba(54, 140, 255, .7);
  font-size: 14px; line-height: 1.25; color: #fff;
}
.rl-chip > div { display: flex; align-items: center; gap: inherit; animation: bob 6s ease-in-out infinite; animation-delay: var(--bd, 0s); }
.rl-chip b { display: block; font-weight: 650; letter-spacing: -.01em; }
.rl-chip small { color: #8fa6cc; font-size: 12.5px; }
.rl-chip .ci { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(31, 91, 255, .2); color: #8cb6ff; }
.rl-chip .ci.warm { background: rgba(255, 122, 61, .18); color: #ffab7d; }
.rl-chip .ci.ok { background: rgba(18, 162, 107, .2); color: #5be3a6; }
.rl-chip .ci.vio { background: rgba(122, 92, 255, .22); color: #b6a6ff; }
.rl-chip.c1 { left: -6%; top: 13%; } .rl-chip.c2 { right: -10%; top: 30%; --bd: -2s; }
.rl-chip.c3 { left: -12%; bottom: 24%; --bd: -4s; } .rl-chip.c4 { right: -6%; bottom: 9%; --bd: -1s; }

/* Podpowiedź i rozdziały */
.rl-hint { position: absolute; right: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); bottom: clamp(18px, calc(var(--vh) * 4), 36px); z-index: 5; display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8fa6cc; pointer-events: none; animation: rlUp 1s var(--ease) 1.6s both; }
.rl-mouse { position: relative; width: 22px; height: 34px; border: 1.5px solid rgba(200, 220, 255, .5); border-radius: 12px; }
.rl-mouse::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 3px; background: #fff; animation: rlWheel 1.7s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes rlWheel { 0% { opacity: 0; transform: translateY(-3px); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(11px); } }
.rl-chap { position: absolute; left: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter))); bottom: clamp(18px, calc(var(--vh) * 4), 36px); z-index: 5; display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8fa6cc; pointer-events: none; animation: rlUp 1s var(--ease) 1.6s both; }
.rl-chap-n { color: #fff; }
.rl-chap-bar { position: relative; width: 96px; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .14); }
.rl-chap-bar i { position: absolute; inset: 0; background: var(--grad-x); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

/* Poza ekranem pętle w intro stoją */
.rl-idle .rl-ring, .rl-idle .dm-spin, .rl-idle .ed-head, .rl-idle .ed-caret, .rl-idle .rl-label::before, .rl-idle .rl-pulse, .rl-idle .rl-hearts i,
.rl-idle .pv-time i, .rl-idle .rl-chip > div, .rl-idle .reel-bar i, .rl-idle .reel-side .liked svg, .rl-idle .rl-mouse::after { animation-play-state: paused; }

/* Ciemny pasek nawigacji nad intro */
.top.on-dark .top-bar, .top.on-dark.scrolled .top-bar { background: rgba(9, 17, 40, .62); border-color: rgba(255, 255, 255, .1); box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05); }
.top.on-dark .top-bar > .brand { color: #fff; }
.top.on-dark .top-bar > .brand mark { color: #6d9bff; }
.top.on-dark .top-links a { color: rgba(225, 235, 255, .78); }
.top.on-dark .top-links a:hover, .top.on-dark .top-links a.here { color: #fff; }
.top.on-dark .nav-pill { background: rgba(255, 255, 255, .1); }
.top.on-dark .login-link { color: #fff; }
.top.on-dark .login-link:hover { background: rgba(255, 255, 255, .08); }
.top.on-dark .menu-btn span { background: #fff; }
.top.on-dark.open .menu-btn span { background: var(--ink); }
.top .top-bar, .top .top-bar > .brand, .top .top-links a, .top .menu-btn span { transition: background-color .35s, color .35s, border-color .35s, box-shadow .35s, transform .45s var(--ease); }
.top.on-dark.open .top-bar { background: rgba(255, 255, 255, .92); }
.top.on-dark.open .top-bar > .brand { color: var(--ink); }

/* Bez ruchu (brak reel-on): tylko ostatni kadr jako zwykła sekcja */
html:not(.reel-on) .rl-c0, html:not(.reel-on) .rl-c1, html:not(.reel-on) .rl-c2, html:not(.reel-on) .rl-c3, html:not(.reel-on) .rl-c3a,
html:not(.reel-on) .rl-slot, html:not(.reel-on) .dm, html:not(.reel-on) .rl-wheel, html:not(.reel-on) .rl-hint, html:not(.reel-on) .rl-chap, html:not(.reel-on) .rl-wipe, html:not(.reel-on) .rl-warm { display: none; }
html:not(.reel-on) .rl-final { position: relative; inset: auto; min-height: 100vh; min-height: 100svh; padding: 130px 0 80px; }
html:not(.reel-on) .rl-blue, html:not(.reel-on) .rl-cyan { visibility: visible; opacity: 1; }
html:not(.reel-on) .rl-meshwrap { opacity: 1; }

/* ---------- Mniejsze ekrany ---------- */
@media (max-width: 1100px) {
  .rl-chip.c2 { right: -4%; } .rl-chip.c3 { left: -4%; }
  .rl-pain { font-size: 13.5px; }
  .rl-pain:nth-child(3) { right: calc(100% + 40px); } .rl-pain:nth-child(4) { left: calc(100% + 40px); }
}
@media (max-width: 960px) {
  .rl { --dev-top: clamp(236px, calc(var(--vh) * 34), 420px); }
  .rl-box .rl-phone { --pw: min(300px, 62vw, calc((var(--vh) * 100 - var(--dev-top) - 24px) / 1.84)); }
  .rl-final { align-items: start; padding-top: calc(var(--top-pad) - 8px); }
  .rl-final-grid { grid-template-columns: 1fr; gap: clamp(18px, calc(var(--vh) * 3), 30px); justify-items: center; text-align: center; }
  .rl-final-copy { display: grid; justify-items: center; }
  .rl .cta-row, .rl .ticks { justify-content: center; }
  .rl-res { --pw: min(280px, 66vw); }
  .rl-chip { display: none; }
  .rl-pain { gap: 8px; padding: 7px 10px 7px 7px; border-radius: 13px; font-size: 12.5px; }
  .rl-pain .pi { width: 26px; height: 26px; border-radius: 9px; }
  .rl-pain .pi .ico { width: 15px; height: 15px; }
  .rl-pain em { padding: 2px 6px; font-size: 11px; }
  .rl-pain.l, .rl-pain:nth-child(3) { right: 56%; } .rl-pain.r, .rl-pain:nth-child(4) { left: 56%; }
  .rl-chap { display: none; }
  html:not(.reel-on) .rl-final { padding: 112px 0 0; }
}
@media (max-width: 960px) and (max-height: 900px) { .rl-lede { display: none; } }
/* Węższe ekrany: bęben pod telefonem, pełna szerokość */
@media (max-width: 960px) {
  .rl-wheel { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: clamp(10px, calc(var(--vh) * 2.5), 28px); height: 176px; margin-top: 0; perspective: 900px; }
  .rl-card { height: 104px; margin-top: -52px; grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 16px; border-radius: 20px; }
  .rc-ic { width: 48px; height: 48px; border-radius: 15px; }
  .rc-ic .ico { width: 24px; height: 24px; }
  .rc-n { font-size: 10.5px; margin-bottom: 3px; }
  .rl-card h3 { font-size: 19px; }
  .rl-card p { margin-top: 3px; font-size: 13px; line-height: 1.35; }
}
@media (max-width: 600px) {
  .rl-title { max-width: 11em; }
  .rl .cta-row { width: 100%; }
  .rl .cta-row .rl-pw, .rl .cta-row .rl-pw .btn { width: 100%; }
  .rl .cta-row .btn-outline-light { display: none; }
  .rl .ticks { gap: 6px 14px; font-size: 13px; }
  .rl-pain { display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 1px; align-items: center; justify-items: start; white-space: normal; }
  .rl-pain .pi { grid-row: span 2; }
  .rl-pain b { max-width: 8em; font-size: 12px; line-height: 1.15; }
  .rl-pain em { margin: 0; padding: 0; background: none; font-size: 11px; }
  .rl-hint span { display: none; }
  .rl-tag { max-width: 13em; }
  /* Laptop jak w zbliżeniu: szerszy niż ekran, przycięty po bokach, żeby podgląd i postęp były czytelne */
  .rl-slot-laptop { justify-items: start; }
  .rl-cam { width: 100%; }
  .rl-laptop { --lw: min(128vw, calc((var(--vh) * 100 - var(--lt-top) - 30px) * 1.6)); margin-left: calc(50% - var(--lw) / 2); }
  .rl-fine { font-size: 11.5px; }
}

/* ---------- Telefon (klasa rl-m z <head>, ruch w intro-telefon.js): jeden ekran z opowieścią, która gra sama ----------
   Zamiast ~6 ekranów przewijania: pod paskiem nawigacji paski postępu jak w relacjach, pod nimi nagłówek sceny
   (.st-head), niżej miejsce na telefon (.st-slot); w ostatnim kadrze h1 → telefon → przycisk → odhaczenia w jednej
   kolumnie. Wszystko liczone z 100svh (bez pasków przeglądarki), więc nic nie wychodzi z kadru i nie nachodzi na siebie. */
.st { display: none; }
.reel-on.rl-m .rl { --st-top: 104px; height: auto; }
.reel-on.rl-m .rl-stage { position: relative; height: 100vh; height: 100svh; min-height: 500px; }
.rl-m .rl-c0 .rl-eyebrow, .rl-m .rl-c1, .rl-m .rl-c2, .rl-m .rl-c3, .rl-m .rl-c3a, .rl-m .rl-slot, .rl-m .rl-wheel,
.rl-m .rl-wipe, .rl-m .rl-hint, .rl-m .rl-chap, .rl-m .rl-chip, .rl-m .rl-lede { display: none; }
.reel-on.rl-m .st { display: block; position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* Paski postępu i „od początku” (w ostatnim kadrze paski robią mu miejsce) */
.st-bars { position: absolute; top: 91px; left: var(--gutter); right: var(--gutter); display: flex; gap: 4px; transition: right .4s var(--ease); }
.st-bars i { flex: 1; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .2); }
.st-bars b { display: block; height: 100%; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
.st.end .st-bars { right: calc(var(--gutter) + 44px); }
.st-again { position: absolute; top: 76px; right: calc(var(--gutter) - 2px); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; pointer-events: auto; visibility: hidden; opacity: 0; -webkit-tap-highlight-color: transparent; }
.st-again .ico { width: 17px; height: 17px; }
/* Warstwa dotyku: z lewej wstecz, z prawej dalej, przytrzymanie = pauza; przewijanie strony w pionie działa dalej */
.st-tap { position: absolute; left: 0; right: 0; top: 74px; bottom: 0; pointer-events: auto; touch-action: pan-y;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.st.end .st-tap { display: none; }

/* A: rachunek za ręczny montaż. Pytanie to prawdziwe .rl-c0 z HTML-a: widać je od pierwszego malowania, zanim wczytają
   się skrypty (wolny internet); w .st-a stoi jego niewidoczna kopia, która trzyma miejsce nad rachunkiem. */
.reel-on.rl-m .rl-c0 { top: var(--st-top); display: flex; flex-direction: column; align-items: center; }
.reel-on.rl-m .rl-c0 .rl-title { visibility: visible; opacity: 1; animation: rlUp .8s var(--ease) both; }
.st-a { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--st-top); bottom: 14px; display: flex; flex-direction: column; align-items: center; }
.reel-on.rl-m .rl-c0 .rl-title, .st-title { margin: 0; max-width: 12em; font: 800 clamp(27px, min(8.6vw, calc(var(--vh) * 5.4)), 40px)/1 var(--sans); letter-spacing: -.055em; text-align: center; text-wrap: balance; }
.st-title { visibility: hidden; }
.st-title .ln { display: block; }
.st-title .ln:first-child { color: #9fb2d4; }
.st-bill { position: relative; width: 100%; max-width: 420px; margin-top: clamp(12px, calc(var(--vh) * 2.4), 26px); padding: 12px; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgba(58, 24, 18, .62), rgba(22, 12, 28, .62)); border: 1px solid rgba(255, 122, 61, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.st-bill .rl-label { font-size: 11.5px; letter-spacing: .1em; }
.st-count { position: relative; display: grid; width: fit-content; margin: 2px auto 0; font: 800 clamp(40px, min(13.5vw, calc(var(--vh) * 8.2)), 64px)/1 var(--sans); letter-spacing: -.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-body { position: relative; margin-top: clamp(6px, calc(var(--vh) * 1.4), 14px); }
.st-rows { display: grid; gap: clamp(4px, calc(var(--vh) * .8), 8px); margin: 0; padding: 0; list-style: none; }
.st-rows li { display: flex; align-items: center; gap: 10px; height: clamp(30px, calc(var(--vh) * 5.4), 44px); padding: 0 12px 0 5px; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 122, 61, .16); font-size: 14px; line-height: 1.2; }
.st-rows .pi { display: grid; place-items: center; flex: none; height: calc(100% - 8px); aspect-ratio: 1; border-radius: 9px; background: linear-gradient(135deg, #ff6a3d, #ff9a3d); color: #fff; }
.st-rows .pi .ico { width: 55%; height: 55%; }
.st-rows b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #fff; }
.st-rows em { font: 600 12.5px/1 var(--mono); font-style: normal; color: #ffab7d; }
.st-after { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 0 6px; }
.st-after .rl-after { margin: 0; max-width: 13em; font: 650 clamp(21px, 6.4vw, 28px)/1.2 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.st-after .rl-cool { white-space: nowrap; }
.st-after .rl-fine { margin: 0; max-width: 24em; }

/* B i C: nagłówek sceny nad telefonem (telefon zaczyna się pod wyższym z nich — liczy intro-telefon.js) */
.st-head { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--st-top); display: flex; flex-direction: column; align-items: center; text-align: center; }
.st-kickrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.st-kickrow .rl-kick { font-size: 12px; letter-spacing: .12em; }
.st-kickrow .rl-kick::before { width: 16px; margin-right: 8px; }
.st-kickrow .rl-timer { gap: 7px; padding: 4px 12px 4px 4px; font-size: 13px; }
.st-kickrow .tm-i { width: 24px; height: 24px; }
.st-kickrow .tm-i .ico { width: 14px; height: 14px; }
.st-big { margin: clamp(8px, calc(var(--vh) * 1.6), 14px) 0 0; max-width: 13em; font: 750 clamp(25px, min(7.6vw, calc(var(--vh) * 4.7)), 36px)/1.06 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.st-big .rl-cool { font-size: 1.12em; }
.st-c .rl-kick { flex: none; }
.st-cards { position: relative; width: 100%; max-width: 440px; height: 100px; margin-top: 10px; }
.st-cards .rl-card { position: absolute; inset: 0; height: auto; margin: 0; padding: 12px 14px; grid-template-columns: 46px 1fr; gap: 13px; transform: none; text-align: left; }
.st-cards .rc-ic { width: 46px; height: 46px; border-radius: 14px; }
.st-cards .rl-card h3 { font-size: clamp(17px, 5vw, 20px); }
.st-cards .rl-card p { font-size: 13px; line-height: 1.35; }
.st-slot { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--st-top); bottom: 14px; }

/* D: ostatni kadr w jednej kolumnie: h1, telefon (tyle, ile zostaje miejsca), przycisk, odhaczenia */
.reel-on.rl-m .rl-final { padding: var(--st-top) 0 14px; align-items: stretch; }
.reel-on.rl-m .rl-final-grid { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.reel-on.rl-m .rl-final-copy { display: contents; }
.reel-on.rl-m .rl-final h1 { order: 1; font-size: clamp(30px, min(9vw, calc(var(--vh) * 5.6)), 44px); }
.reel-on.rl-m .rl-final-vis { order: 2; flex: 1 1 0; min-height: 0; width: 100%; margin: clamp(10px, calc(var(--vh) * 2), 20px) 0; }
.reel-on.rl-m .rl-res { --pw: min(240px, 56vw); }
@supports (width: 1cqh) {
  .reel-on.rl-m .rl-final-vis { container-type: size; }
  .reel-on.rl-m .rl-res { --pw: min(280px, 100cqw, 100cqh / 1.84); }
}
.reel-on.rl-m #hero-cta { order: 3; width: 100%; max-width: 420px; margin: 0; }
.reel-on.rl-m .rl-final .ticks { order: 4; margin-top: clamp(8px, calc(var(--vh) * 1.4), 14px); justify-content: center; gap: 4px 14px; font-size: 13px; }

/* Aplikacja w telefonie (scena B; jednostki cqw = szerokość ekranu telefonu) */
.dm-app { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; padding: 13cqw 4.5cqw 6cqw;
  background: radial-gradient(90% 50% at 50% 0%, #dde8ff, rgba(221, 232, 255, 0) 70%), #eef3f9; color: #0a1a33; font: 500 4cqw/1.25 var(--sans); text-align: left; }
.ap-bar { display: flex; align-items: center; justify-content: space-between; padding: 2.4cqw 2.4cqw 2.4cqw 3cqw; border-radius: 4cqw; background: #fff; box-shadow: 0 1cqw 4cqw -2cqw rgba(10, 26, 51, .35); }
.ap-brand { display: flex; align-items: center; gap: 1.8cqw; font-weight: 750; font-size: 4.8cqw; letter-spacing: -.045em; }
.ap-brand i { width: 5.8cqw; aspect-ratio: 1; border-radius: 1.8cqw; background: var(--grad); }
.ap-brand mark { padding: 0; background: none; color: var(--accent); }
.ap-new { padding: 1.2cqw 2.6cqw; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 650; font-size: 3.6cqw; }
.ap-main { display: flex; flex-direction: column; margin: auto 0; }
.ap-h { margin: 0 0 2.4cqw; font-weight: 750; font-size: 6cqw; letter-spacing: -.03em; }
.ap-list { position: relative; display: grid; gap: 2.2cqw; margin-bottom: 6cqw; }
.ap-clip { display: grid; grid-template-columns: 20cqw 1fr; align-items: center; gap: 3cqw; padding: 2cqw; border-radius: 3.4cqw; background: #fff; box-shadow: 0 1cqw 3cqw -1.6cqw rgba(10, 26, 51, .4); }
.ap-clip .th { height: 13cqw; border-radius: 2.2cqw; background: radial-gradient(70% 70% at 30% 30%, #4a7bff, #0b1a3a); }
.ap-clip:nth-child(2) .th { background: radial-gradient(60% 60% at 50% 40%, #d39a7c, #3a2a2a 75%); }
.ap-clip:nth-child(3) .th { background: radial-gradient(70% 70% at 70% 30%, #36c5f0, #0b1a3a); }
.ap-clip b { display: block; font-size: 5cqw; font-weight: 700; }
.ap-clip small { font: 500 4cqw var(--mono); color: #5d6b82; }
.ap-add { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1cqw; border: .6cqw dashed #b9c8dc; border-radius: 3.4cqw; background: #f7faff; color: #5d6b82; text-align: center; }
.ap-add svg { width: 10cqw; height: 10cqw; color: var(--accent); }
.ap-add b { font-size: 6cqw; color: #0a1a33; }
.ap-add small { font-size: 4cqw; }
.ap-styles { display: flex; gap: 2cqw; margin-bottom: 7cqw; }
.ap-styles span { flex: 1; padding: 2.4cqw 0; border-radius: 99px; background: #dfe7f3; color: #3b4a66; font-weight: 700; font-size: 5cqw; text-align: center; }
.ap-go { display: flex; align-items: center; justify-content: center; gap: 2cqw; padding: 4cqw; border-radius: 4cqw; background: var(--grad); color: #fff; font-weight: 750; font-size: 6.4cqw;
  box-shadow: 0 3cqw 6cqw -3cqw rgba(31, 91, 255, .95), inset 0 .3cqw 0 rgba(255, 255, 255, .35); }
.ap-go svg { width: 6.4cqw; height: 6.4cqw; }
.ap-tap { position: absolute; left: 0; top: 0; z-index: 2; width: 13cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(10, 26, 51, .22); border: .8cqw solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1.4cqw rgba(31, 91, 255, .25), 0 2cqw 5cqw rgba(10, 26, 51, .35); visibility: hidden; opacity: 0; }

/* Niskie ekrany (np. iPhone SE w Safari): karta umiejętności bez opisu, ostatni kadr bez trzeciego odhaczenia */
@media (max-height: 640px) {
  .st-cards { height: 74px; }
  .st-cards .rl-card p { display: none; }
  .reel-on.rl-m .rl-final .ticks li:nth-child(3) { display: none; }
}

/* Telefon obrócony poziomo: tekst po lewej, rachunek / telefon po prawej, ostatni kadr w dwóch kolumnach */
@media (orientation: landscape) and (max-height: 500px) {
  .reel-on.rl-m .rl { --st-top: 100px; }
  .reel-on.rl-m .rl-stage { min-height: 320px; }
  .st-a { flex-direction: row; align-items: center; gap: 24px; bottom: 10px; }
  .st-title { flex: 1; font-size: clamp(24px, 4vw, 34px); }
  .reel-on.rl-m .rl-c0 { display: none; } /* w poziomie pytanie stoi obok rachunku — pokazuje je kopia */
  .reel-on.rl-m .st-title { visibility: visible; }
  .st-bill { flex: 1; margin: 0; padding: 10px; }
  .st-count { font-size: clamp(30px, calc(var(--vh) * 9), 44px); }
  .st-rows { gap: 3px; }
  .st-rows li { height: clamp(22px, calc(var(--vh) * 6.4), 32px); font-size: 12.5px; }
  .st-head { right: 52%; }
  .st-big { font-size: clamp(22px, 3.6vw, 30px); }
  .st-slot { left: 50%; bottom: 10px; }
  .reel-on.rl-m .rl-final { padding-bottom: 10px; }
  .reel-on.rl-m .rl-final-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 24px; align-items: center; justify-items: center; }
  .reel-on.rl-m .rl-final h1 { grid-area: 2 / 1; font-size: clamp(26px, 4.4vw, 40px); }
  .reel-on.rl-m #hero-cta { grid-area: 3 / 1; margin-top: 16px; }
  .reel-on.rl-m .rl-final .ticks { grid-area: 4 / 1; }
  .reel-on.rl-m .rl-final-vis { grid-area: 1 / 2 / -1; height: 100%; margin: 0; }
}