/* Strona Realizacje – mockupy urządzeń */
  .rl_section { padding: 110px 0 40px; }
  .rl_intro { max-width: 720px; margin: 22px 0 0; font-size: 17px; line-height: 1.8; color: #bbb; }

  .rl_row { display: flex; align-items: center; gap: 60px; padding: 70px 0; border-top: 1px solid rgba(255,255,255,.08); }
  .rl_row:first-of-type { margin-top: 60px; }
  .rl_row .stage_col { flex: 1.25; min-width: 0; }
  .rl_row .info_col { flex: 1; min-width: 0; }
  .rl_row.rev { flex-direction: row-reverse; }

  .rl_num { font: 600 13px Poppins, sans-serif; letter-spacing: 4px; color: #e54b4b; }
  .rl_row h3 { font: 700 34px/1.15 Poppins, sans-serif; color: #fff; margin: 10px 0 16px; letter-spacing: 1px; }
  .rl_row p { color: #bbb; line-height: 1.85; margin-bottom: 22px; }
  .rl_tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
  .rl_tags li { font: 500 12px Poppins, sans-serif; letter-spacing: .5px; padding: 6px 14px; border: 1px solid rgba(255,255,255,.16); color: #ddd; border-radius: 99px; }

  .rl_btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; background: #e54b4b; color: #fff !important; font: 600 14px Poppins, sans-serif; letter-spacing: .8px; text-transform: uppercase; text-decoration: none; border: 2px solid #e54b4b; border-radius: 8px; box-shadow: 0 6px 22px rgba(229,75,75,.4); transition: all .3s cubic-bezier(.16,1,.3,1); }
  .rl_btn:hover { background: transparent; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(229,75,75,.65); }

  /* Scena z urządzeniami – skaluje się z szerokością */
  .stage { container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16/11; border-radius: 6px; background: radial-gradient(70% 80% at 50% 40%, var(--glow, #1a1f2e), #0b0e14); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
  .stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,0,0,.3)); pointer-events: none; }
  .dev { position: absolute; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
  .stage:hover .mac { transform: translateY(-1.2cqw); }
  .stage:hover .ipad { transform: translate(-.8cqw,-1cqw); }
  .stage:hover .iphone { transform: translate(.8cqw,-1.6cqw); }
  .scr { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

  .mac { left: 11%; top: 7%; width: 74%; z-index: 1; filter: drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.55)); }
  .mac .lid { background: #0a0a0c; border-radius: 1.3cqw 1.3cqw .4cqw .4cqw; padding: .9cqw .9cqw 1.1cqw; border: .18cqw solid #3a3d44; position: relative; }
  .mac .lid::before { content: ""; position: absolute; top: .38cqw; left: 50%; width: .5cqw; height: .5cqw; margin-left: -.25cqw; border-radius: 50%; background: #1b1d22; }
  .mac .screen { aspect-ratio: 1440/900; border-radius: .35cqw; overflow: hidden; background: #000; }
  .mac .base { height: 1.5cqw; margin: 0 -3.2%; background: linear-gradient(#d4d6db,#a5a8b0); border-radius: 0 0 1.6cqw 1.6cqw; position: relative; }
  .mac .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 11%; height: .55cqw; margin-left: -5.5%; background: #8d9098; border-radius: 0 0 .6cqw .6cqw; }

  .ipad { left: 3%; bottom: 5%; width: 26%; z-index: 2; filter: drop-shadow(0 2cqw 2.5cqw rgba(0,0,0,.6)); }
  .ipad .body { background: #0a0a0c; border-radius: 2cqw; padding: 1.1cqw; border: .2cqw solid #4a4d55; }
  .ipad .screen { aspect-ratio: 820/1180; border-radius: 1cqw; overflow: hidden; background: #000; }

  .iphone { right: 4%; bottom: 3%; width: 13%; z-index: 3; filter: drop-shadow(0 1.8cqw 2.2cqw rgba(0,0,0,.65)); }
  .iphone .body { background: #0a0a0c; border-radius: 2.6cqw; padding: .55cqw; border: .2cqw solid #5a5d66; position: relative; }
  .iphone .screen { aspect-ratio: 390/844; border-radius: 2.1cqw; overflow: hidden; background: #000; }
  .iphone .body::before { content: ""; position: absolute; z-index: 2; top: 1.15cqw; left: 50%; width: 32%; height: .95cqw; margin-left: -16%; background: #000; border-radius: 99px; }

  .rl_soon .stage { background: repeating-linear-gradient(45deg,#0e1117,#0e1117 14px,#12151d 14px,#12151d 28px); display: grid; place-items: center; }
  .rl_soon .stage b { font: 800 clamp(24px,4vw,44px) Poppins, sans-serif; color: #2b3140; letter-spacing: 8px; }

  @media (max-width: 900px) {
    .rl_section { padding: 70px 0 20px; }
    .rl_row, .rl_row.rev { flex-direction: column; gap: 32px; padding: 48px 0; }
    .rl_row .stage_col, .rl_row .info_col { flex: none; width: 100%; }
    .rl_row h3 { font-size: 28px; }
  }


/* ===== Projekt w trakcie realizacji: taśma żółto-czarna + znaczek ===== */
.rl_badge { display: inline-block; margin-left: 12px; padding: 3px 12px; font: 700 11px Poppins, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #111; background: #f6c400; border-radius: 3px; vertical-align: 1px; }
.rl_wip .stage { background: radial-gradient(70% 80% at 50% 40%, #2a2410, #0b0e14); }
/* lekki blur zrzutów na laptopie, tablecie i telefonie (taśma zostaje ostra); scale ukrywa rozmyte krawędzie */
.rl_wip .stage .scr { filter: blur(.5cqw) saturate(.75) brightness(.88); transform: scale(1.05); }
.tape { position: absolute; left: -15%; width: 130%; z-index: 5; pointer-events: none; box-shadow: 0 .6cqw 1.8cqw rgba(0,0,0,.6); }
.tape_a { top: 41%; height: 7.6cqw; transform: rotate(-9deg); background: repeating-linear-gradient(-45deg, #f6c400 0 2.3cqw, #111 2.3cqw 4.6cqw); }
.tape_a .tape_in { position: absolute; left: 0; right: 0; top: 1.4cqw; bottom: 1.4cqw; background: #111; overflow: hidden; display: flex; align-items: center; }
.tape_a .tape_in span { display: inline-block; white-space: nowrap; font: 800 2.5cqw/1 Poppins, sans-serif; letter-spacing: .35cqw; color: #f6c400; animation: tapeMove 28s linear infinite; }
.tape_b { top: 68%; height: 3.6cqw; transform: rotate(7deg); background: repeating-linear-gradient(-45deg, #f6c400 0 1.9cqw, #111 1.9cqw 3.8cqw); }
@keyframes tapeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape_a .tape_in span { animation: none; } }