/* «جوّا Planet — تصوير حقيقي» */
.pg-inside-real main, .pg-inside-real #main, .pg-tour main, .pg-tour #main { padding-top: 0 !important; }
.rl { position: relative; }
.rl-stage { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; overflow: hidden; background: #111; z-index: 0; }
.rl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.is-dragging .rl-canvas { cursor: grabbing; }
.rl-grade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 24, .45), transparent 22%, transparent 70%, rgba(8, 10, 24, .55)); }
.rl-pins { position: absolute; inset: 0; pointer-events: none; }
.rl-pin { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: #141831; font-size: .78rem; font-weight: 800; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); translate: -50% -130%; transition: opacity .3s; white-space: nowrap; }
.rl-pin i { width: 8px; height: 8px; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 4px rgba(124, 58, 237, .25); }
.rl-pin[data-pin="photog"] i { background: #0891b2; box-shadow: 0 0 0 4px rgba(8, 145, 178, .25); }
.rl-pin[data-pin="monitor"] i { background: #ec4899; box-shadow: 0 0 0 4px rgba(236, 72, 153, .25); }
.rl-pin.is-off { opacity: 0; }
.rl-task { position: absolute; top: 92px; inset-inline-start: 22px; padding: 12px 16px 14px; border-radius: 18px; background: rgba(12, 14, 32, .62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #eef1fb; border: 1px solid rgba(255, 255, 255, .12); max-width: min(360px, calc(100vw - 44px)); }
.rl-task-k { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; color: #c4b5fd; }
.rl-rec { width: 9px; height: 9px; border-radius: 50%; background: #ff2d55; animation: secBeat 1.2s ease-in-out infinite; }
.rl-task ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.rl-task li { font-size: .74rem; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: #9aa3c7; transition: background .35s, color .35s; }
.rl-task li.is-done { background: rgba(34, 197, 94, .2); color: #86efac; }
.rl-task li.is-done::before { content: "✓ "; }
.rl-task li.is-now { background: linear-gradient(90deg, #7c3aed, #2563eb); color: #fff; }
.rl-drag { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .9); color: #141831; font-weight: 800; font-size: .82rem; pointer-events: none; transition: opacity .5s; }
.rl-drag span { font-size: 1.1rem; animation: rlNudge 1.6s ease-in-out infinite; }
.has-dragged .rl-drag { opacity: 0; }
@keyframes rlNudge { 50% { transform: translateX(6px); } }
.rl-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: #0b0d1c; color: #c9cfe6; font-weight: 700; transition: opacity .8s, visibility .8s; }
.rl-load-bar { width: 180px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.rl-load-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #22d3ee); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
.rl.is-ready .rl-load { opacity: 0; visibility: hidden; }
.rl-track { position: relative; z-index: 1; pointer-events: none; }
.rl-beat { min-height: 115vh; display: flex; align-items: center; padding: 0 clamp(18px, 5vw, 80px); }
.rl-beat:nth-child(even) { justify-content: flex-end; }
.rl-card { pointer-events: auto; max-width: 430px; padding: 24px 26px; border-radius: 22px; background: rgba(12, 14, 32, .55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .12); color: #eef1fb; opacity: .25; transform: translateY(14px); transition: opacity .6s, transform .6s; }
.rl-beat.is-current .rl-card { opacity: 1; transform: none; }
.rl-eyebrow { display: inline-block; margin-bottom: 8px; font-size: .76rem; font-weight: 800; color: #c4b5fd; }
.rl-h { font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 900; line-height: 1.3; color: #fff; }
.rl-h em { font-style: normal; background: linear-gradient(110deg, #c4b5fd, #60a5fa 60%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rl-card p { margin-top: 10px; color: #c3c9e2; line-height: 1.85; }
.rl-card .btn { margin-top: 16px; }
@media (max-width: 760px) {
  .rl-beat, .rl-beat:nth-child(even) { justify-content: center; align-items: flex-end; padding-bottom: 12vh; }
  .rl-card { max-width: none; width: 100%; padding: 18px 20px; }
  .rl-task { top: 84px; inset-inline-start: 12px; }
  .rl-pin { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .rl-rec, .rl-drag span { animation: none; } }

/* journey HUD: the request's path across the agency */
.rl-hud { position: absolute; inset-inline: 0; top: 0; pointer-events: none; }
.rl-task { max-width: none; inset-inline: 22px; width: auto; display: grid; gap: 10px; }
.rl-task-k { justify-content: flex-start; }
.rl-clock { margin-inline-start: auto; font: 800 .9rem/1 "Plus Jakarta Sans", sans-serif; color: #fff; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.rl-flow { list-style: none; margin: 0 !important; padding: 0; display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0 !important; position: relative; }
.rl-flow li { position: relative; padding: 18px 2px 0 !important; background: none !important; border-radius: 0 !important; text-align: center; font-size: .72rem; color: #8f98bd; white-space: nowrap; }
.rl-flow li::before { content: "" !important; position: absolute; top: 4px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .35s, box-shadow .35s, transform .35s; z-index: 1; }
.rl-flow li::after { content: ""; position: absolute; top: 8px; inset-inline-start: 50%; width: 100%; height: 2px; background: rgba(255, 255, 255, .14); }
.rl-flow li:last-child::after { display: none; }
.rl-flow li.is-done { color: #86efac; }
.rl-flow li.is-done::before { background: #22c55e; }
.rl-flow li.is-done::after { background: linear-gradient(90deg, #22c55e, #22c55e); }
.rl-flow li.is-now { color: #fff; }
.rl-flow li.is-now::before { background: #a78bfa; box-shadow: 0 0 0 5px rgba(167, 139, 250, .3), 0 0 18px #8b5cf6; transform: scale(1.25); }
.rl-flow li span { display: inline-block; }
.rl-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rl-cta .btn { margin-top: 0; }
@media (max-width: 760px) {
  .rl-task { inset-inline: 10px; padding: 10px 12px 12px; }
  .rl-flow li { font-size: .58rem; padding-top: 16px !important; }
  .rl-flow li:not(.is-now) span { opacity: 0; }
}

/* the flow rail sits at the bottom, so faces and pins keep the top of the frame */
.rl-task { top: auto; bottom: 18px; }
.rl-drag { bottom: auto; top: 86px; }
.rl-beat { align-items: center; }
.rl-pin { z-index: 2; }
@media (max-width: 760px) {
  .rl-task { bottom: 10px; }
  .rl-beat, .rl-beat:nth-child(even) { padding-bottom: 150px; }
  .rl-drag { top: 80px; font-size: .74rem; }
}
.rl-hud { inset: 0; }
@media (max-width: 760px) { .rl-beat, .rl-beat:nth-child(even) { align-items: flex-end; } }

/* tour: many steps on the rail, and Planet's role on every card */
.rl-flow { grid-template-columns: repeat(var(--steps, 9), minmax(0, 1fr)); }
.rl-flow li { font-size: .64rem; }
@media (max-width: 1100px) { .rl-flow li:not(.is-now) span { opacity: 0; } }
.rl-card { max-width: 470px; }
.rl-sys { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.rl-sys-shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7); aspect-ratio: 16 / 10; background: #f1f3f9; transition: transform .3s; }
.rl-sys-shot:hover { transform: translateY(-2px) scale(1.02); }
.rl-sys-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.rl-sys-shot.is-phone { aspect-ratio: auto; height: 120px; width: 66px; justify-self: center; border-radius: 12px; }
.rl-sys-k { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; color: #c4b5fd; margin-bottom: 6px; }
.rl-sys-k::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(from 0deg, #7c3aed, #2563eb, #22d3ee, #7c3aed); }
.rl-sys ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.rl-sys li { font-size: .84rem; font-weight: 700; color: #e6e9f7; display: flex; gap: 7px; align-items: center; }
.rl-sys li::before { content: "✓"; font-size: .7rem; color: #4ade80; }
@media (max-width: 760px) {
  .rl-sys { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; margin-top: 10px; padding-top: 10px; }
  .rl-sys-shot.is-phone { height: 90px; width: 50px; }
  .rl-sys li { font-size: .76rem; }
  .rl-card p { font-size: .9rem; line-height: 1.7; }
}