/* =========================================================
   صفحة المساجد — النموذج الثاني «إرث»
   ========================================================= */

.btn--outline { border: 1px solid var(--line); color: var(--navy); background: transparent; }
.btn--outline::before { background: var(--cream-2); }
.btn:disabled { opacity: .45; pointer-events: none; }

/* ---------- الهيرو ---------- */
.mq-hero { position: relative; z-index: 2; background: radial-gradient(800px 500px at 15% 40%, var(--blue) 0%, transparent 60%), linear-gradient(160deg, var(--blue-dark), var(--navy)); color: #fff; padding: 150px 0 100px; overflow-x: clip; }
.mq-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.crumbs { display: flex; gap: 10px; font-family: var(--f-ui); font-size: 13.5px; color: rgba(255, 255, 255, .6); margin-bottom: 26px; }
.crumbs a:hover { color: var(--gold); }
.crumbs b { color: var(--gold); font-weight: 600; }
.mq-hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.mq-hero__title .line > * { display: inline-block; animation: lineUp 1.1s var(--ease) both; }
.mq-hero__title .line:nth-child(2) > * { animation-delay: .15s; }
@keyframes lineUp { from { transform: translateY(105%); } }
.mq-hero .lead { animation: fadeIn 1s .4s both; }
.mq-hero .hero__ctas { animation: fadeIn 1s .55s both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } }
.mq-hero__nums { display: flex; gap: 0; margin-top: 48px; border-top: 1px solid rgba(255, 255, 255, .15); }
.mq-hero__nums div { flex: 1; padding: 20px 0 0; display: flex; flex-direction: column; }
.mq-hero__nums div + div { border-inline-start: 1px solid rgba(255, 255, 255, .15); padding-inline-start: 24px; }
.mq-hero__nums b { font-family: var(--f-serif); font-size: clamp(30px, 3vw, 44px); line-height: 1; color: #fff; }
.mq-hero__nums span { font-size: 14px; color: rgba(255, 255, 255, .65); margin-top: 6px; }
.mq-hero__visual { position: relative; height: 540px; }
.mq-hero__visual .arch--frame { animation: archIn 1.4s var(--ease) both; }
.mq-hero__visual .arch--frame img { opacity: 1; transform: none; animation: slowZoom 16s ease-out both; }
@keyframes archIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slowZoom { from { transform: scale(1.2); } to { transform: scale(1); } }
.mq-hero__visual .arch--outline { animation: fadeIn 1.2s .6s both; }

/* ---------- البنّاء ---------- */
.builder { padding: clamp(80px, 9vw, 120px) 0; background: var(--cream); }
.builder__head { margin-bottom: 48px; }
.builder__grid { display: grid; grid-template-columns: 1fr 420px; gap: 48px; align-items: start; }
.builder__grid > * { min-width: 0; }

/* المسرح */
.stage { position: sticky; top: 88px; order: 2; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.stage::-webkit-scrollbar { display: none; }
.stage__arch { position: relative; height: clamp(200px, calc(100vh - 520px), 360px); border-radius: 999px 999px 0 0; overflow: hidden; isolation: isolate; box-shadow: 0 40px 70px -40px rgba(15, 68, 103, .7); }
.stage__arch::after { content: ""; position: absolute; inset: 10px 10px 0; border: 1px solid rgba(251, 192, 6, .45); border-bottom: 0; border-radius: inherit; pointer-events: none; z-index: 5; }
.stage__sky { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #0a2f48 0%, #0f4467 60%, #155f8f 100%); transition: opacity 1.2s; }
.stage__sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #1c79b5 0%, #f4c46b 70%, #f8e2b0 100%); opacity: 0; transition: opacity 1.4s; }
.stage[data-phase="2"] .stage__sky::after, .stage[data-phase="3"] .stage__sky::after { opacity: 1; }
.stage[data-phase="3"] .stage__sky::after { background: linear-gradient(180deg, #4aa3dc 0%, #bfe1f6 70%, #f8f4ea 100%); }
.stage__stars { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(1.5px 1.5px at 20% 20%, #fff, transparent), radial-gradient(1px 1px at 70% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 35%, #fff, transparent), radial-gradient(1px 1px at 85% 40%, #fff, transparent), radial-gradient(1px 1px at 10% 45%, #fff, transparent), radial-gradient(1.5px 1.5px at 60% 8%, #fff, transparent), radial-gradient(1px 1px at 30% 55%, #fff, transparent); animation: twinkle 3s ease-in-out infinite alternate; transition: opacity 1.2s; }
.stage[data-phase="2"] .stage__stars, .stage[data-phase="3"] .stage__stars { opacity: 0; }
@keyframes twinkle { to { opacity: .5; } }
.stage__sun { position: absolute; z-index: -1; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #fff6d6 0%, var(--gold) 55%, rgba(251, 192, 6, 0) 72%); left: 18%; top: 75%; opacity: 0; transition: top 1.6s var(--ease), opacity 1s; }
.stage[data-phase="0"] .stage__sun, .stage[data-phase="1"] .stage__sun { background: radial-gradient(circle, #fff 0%, #f8f4ea 45%, rgba(248, 244, 234, 0) 70%); opacity: .9; top: 14%; width: 56px; height: 56px; left: 22%; }
.stage[data-phase="2"] .stage__sun { opacity: 1; top: 42%; }
.stage[data-phase="3"] .stage__sun { opacity: 1; top: 16%; }
.stage__svg { position: absolute; inset: 0; display: grid; place-items: end center; }
.stage__svg .mosque-svg { width: 112%; height: auto; margin-bottom: -6px; }
.stage__empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: rgba(255, 255, 255, .8); font-family: var(--f-serif); font-size: 20px; text-align: center; transition: opacity .5s; }
.stage__empty .ic { width: 46px; height: 46px; color: var(--gold); animation: sway 3s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(8deg); } }
.stage.has-mosque .stage__empty { opacity: 0; pointer-events: none; }
.stage__pin { position: absolute; top: 34px; left: 50%; translate: -50% 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; background: var(--cream); color: var(--navy); font-family: var(--f-ui); font-weight: 600; font-size: 13px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .4); border-radius: 999px; animation: pinDrop .6s cubic-bezier(.3, 1.6, .5, 1); }
.stage__pin:empty { display: none; }
.stage__pin .flag { width: 24px; height: 24px; border-radius: 50%; }
@keyframes pinDrop { from { transform: translateY(-30px); opacity: 0; } }
.stage__info { background: #fffdf8; border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: 18px 22px 20px; }
.stage__cap { font-family: var(--f-serif); font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.stage__progress { height: 3px; background: var(--sand); margin: 10px 0 8px; }
.stage__progress i { display: block; height: 100%; width: 0; background: linear-gradient(to left, var(--blue), var(--gold)); transition: width .9s var(--ease); }
.stage__rows div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14.5px; color: var(--ink-2); border-bottom: 1px dashed var(--line); }
.stage__rows b { font-family: var(--f-ui); font-weight: 600; color: var(--navy); }
.stage__total { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 12px; }
.stage__total span { font-family: var(--f-ui); font-weight: 600; color: var(--blue); }
.stage__total b { font-family: var(--f-serif); font-size: 44px; line-height: 1; color: var(--navy); display: flex; align-items: baseline; gap: 6px; }
.stage__total small { font-family: var(--f-body); font-size: 14px; color: var(--muted); }
.stage__total.is-bump b { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.06); color: var(--blue); } }
.part { margin-bottom: 14px; animation: fadeIn .4s var(--ease); }
.part__chips { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.part__chips button { height: 40px; font-family: var(--f-ui); font-weight: 600; font-size: 14px; transition: .25s; }
.part__chips button + button { border-inline-start: 1px solid var(--line); }
.part__chips button.is-active { background: var(--gold); color: var(--navy); }
.part__val { margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.part__val b { color: var(--navy); font-family: var(--f-ui); }

/* الفصول */
.chapters { order: 1; display: flex; flex-direction: column; gap: 22px; }
.chapter { background: #fffdf8; border: 1px solid var(--line); padding: 28px 30px; position: relative; transition: opacity .5s, filter .5s, box-shadow .5s; }
.chapter::before { content: ""; position: absolute; top: -1px; bottom: -1px; right: -1px; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); }
.chapter.is-current::before { transform: scaleY(1); }
.chapter.is-current { box-shadow: 0 30px 50px -36px rgba(15, 68, 103, .45); }
.chapter.is-locked { opacity: .5; filter: saturate(.4); }
.chapter.is-locked .clist, .chapter.is-locked .cap, .chapter.is-locked .olist { pointer-events: none; }
.chapter__head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.chapter__n { width: 54px; height: 54px; flex: none; display: grid; place-items: center; font-family: var(--f-serif); font-size: 28px; font-weight: 700; color: var(--navy); border: 1px solid var(--line); border-radius: 999px 999px 0 0; transition: .5s var(--ease); }
.chapter.is-current .chapter__n, .chapter.is-done .chapter__n { background: var(--navy); color: var(--gold); border-color: var(--navy); }
.chapter__head h3 { font-family: var(--f-serif); font-weight: 700; font-size: 28px; color: var(--navy); line-height: 1.3; }
.chapter__head p { color: var(--muted); font-size: 15px; }
.chapter__state { margin-inline-start: auto; font-family: var(--f-ui); font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; padding-top: 8px; }
.chapter__state:not(:empty)::before { content: "✓ "; color: var(--gold-dark); }

/* قائمة الدول */
.clist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.clist li { list-style: none; }
.crow { position: relative; width: 100%; display: grid; grid-template-columns: 28px 40px 1fr auto; align-items: center; gap: 12px; padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: start; overflow: hidden; isolation: isolate; opacity: 0; transform: translateY(16px); }
.crow.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d), transform .6s var(--ease) var(--d), color .3s; }
.crow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.crow:hover::before { transform: scaleX(.025); }
.crow.is-selected { color: #fff; }
.crow.is-selected::before { transform: scaleX(1); }
.crow__n { font-family: var(--f-ui); font-size: 12px; color: var(--muted); transition: color .3s; }
.crow.is-selected .crow__n { color: var(--gold); }
.crow__flag { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .5s var(--ease); }
.crow__flag .flag { width: 100%; height: 100%; display: block; }
.crow:hover .crow__flag { transform: scale(1.1) rotate(-6deg); }
.crow__name b { display: block; font-family: var(--f-serif); font-size: 20px; font-weight: 600; line-height: 1.2; }
.crow__name small { font-size: 12.5px; color: var(--muted); direction: ltr; display: block; text-align: right; transition: color .3s; }
.crow.is-selected .crow__name small { color: rgba(255, 255, 255, .6); }
.crow__count { font-family: var(--f-ui); font-size: 12px; font-weight: 600; color: var(--blue); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; transition: .3s; }
.crow.is-selected .crow__count { color: var(--navy); background: var(--gold); border-color: var(--gold); }

/* السعة */
.cap__display { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.cap__display b { font-family: var(--f-serif); font-size: clamp(64px, 8vw, 104px); line-height: .9; color: var(--navy); font-weight: 700; }
.cap__display span { font-family: var(--f-serif); font-size: 26px; color: var(--blue); }
.cap__display em { font-style: normal; margin-inline-start: auto; font-family: var(--f-ui); font-size: 13px; font-weight: 600; color: var(--navy); background: var(--gold); padding: 3px 12px; border-radius: 999px; animation: fadeIn .4s; }
.cap__display em:empty { display: none; }
.cap__rail { position: relative; padding: 18px 0 8px; margin-bottom: 22px; }
.cap__line { position: absolute; top: 31px; inset-inline: 14px; height: 2px; background: var(--sand); }
.cap__line i { position: absolute; inset-block: 0; right: 0; width: 0; background: var(--navy); transition: width .6s var(--ease); }
.cap__ticks { position: relative; display: flex; justify-content: space-between; }
.tick { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 28px; }
.tick__dot { width: 28px; height: 28px; border-radius: 50%; background: #fffdf8; border: 2px solid var(--sand); display: grid; place-items: center; transition: .4s var(--ease); }
.tick__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); transition: .4s var(--ease); }
.tick__lbl { font-family: var(--f-ui); font-size: 12px; color: var(--muted); transition: color .3s; }
.tick.is-avail .tick__dot { border-color: var(--blue); }
.tick.is-avail .tick__dot::after { background: var(--blue); }
.tick.is-avail .tick__lbl { color: var(--navy); font-weight: 600; }
.tick.is-avail:hover .tick__dot { transform: scale(1.18); }
.tick.is-sel .tick__dot { background: var(--navy); border-color: var(--navy); transform: scale(1.3); box-shadow: 0 0 0 6px rgba(251, 192, 6, .35); }
.tick.is-sel .tick__dot::after { background: var(--gold); }
.tick.is-sel .tick__lbl { color: var(--navy); }
.tick:not(.is-avail) { cursor: not-allowed; }
.tick:not(.is-avail) .tick__lbl { text-decoration: line-through; opacity: .5; }
.cap__specs { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin-bottom: 18px; }
.cap__specs div { padding: 14px 4px; text-align: center; }
.cap__specs div + div { border-inline-start: 1px solid var(--line); }
.cap__specs b { display: block; font-family: var(--f-serif); font-size: 26px; color: var(--navy); line-height: 1.2; }
.cap__specs small { font-size: 12.5px; color: var(--muted); }
.cap__desc { color: var(--ink-2); font-size: 15.5px; line-height: 1.95; margin-bottom: 20px; min-height: 3em; }
.cap__desc.is-swap { animation: fadeIn .5s var(--ease); }
.cap__media { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 12px; align-items: stretch; }
.thumb { position: relative; height: 110px; overflow: hidden; border-radius: 999px 999px 0 0; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.thumb span { position: absolute; inset: auto 0 0; padding: 6px; font-size: 12px; font-family: var(--f-ui); color: #fff; background: linear-gradient(transparent, rgba(15, 68, 103, .85)); text-align: center; }
.thumb:hover img { transform: scale(1.1); }
.cap__price { display: flex; flex-direction: column; justify-content: center; padding: 0 18px; background: var(--navy); color: #fff; }
.cap__price small { font-size: 12.5px; color: var(--gold); font-family: var(--f-ui); }
.cap__price b { font-family: var(--f-serif); font-size: 30px; line-height: 1.2; }

/* قوائم الخدمات */
.olist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.olist li { list-style: none; }
.orow { width: 100%; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); text-align: start; transition: background .3s; }
.orow:hover { background: var(--cream); }
.ocheck { width: 24px; height: 24px; border: 1.5px solid var(--navy); display: grid; place-items: center; transition: background .3s, border-color .3s; border-radius: 4px 4px 0 0; }
.ocheck svg { width: 15px; height: 15px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .4s ease .05s; }
.orow.is-on .ocheck { background: var(--navy); }
.orow.is-on .ocheck svg { stroke-dashoffset: 0; }
.orow__name { font-family: var(--f-serif); font-size: 19px; font-weight: 600; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.orow__name .ic { width: 18px; height: 18px; color: var(--blue); opacity: .7; }
.orow__price { font-family: var(--f-ui); font-size: 13.5px; font-weight: 600; color: var(--muted); direction: rtl; transition: color .3s; }
.orow.is-on .orow__price { color: var(--blue); }
.olist--gold .orow.is-on .ocheck { background: var(--gold); border-color: var(--gold); }
.olist--gold .orow.is-on .ocheck svg { stroke: var(--navy); }
.coin { position: fixed; z-index: 300; pointer-events: none; font-family: var(--f-serif); font-weight: 700; font-size: 18px; color: var(--blue); transition: transform .8s cubic-bezier(.4, -0.4, .6, 1), opacity .8s; }

/* ---------- الإيصال ---------- */
.sec__head--center { text-align: center; margin-inline: auto; }
.sec__head--center .kicker { justify-content: center; }
.receipt { display: grid; place-items: center; }
.receipt__paper { --zz: 14px; position: relative; width: min(100%, 680px); background: #fffdf8; padding: 40px clamp(20px, 4vw, 44px) 36px; filter: drop-shadow(0 30px 40px rgba(15, 68, 103, .18)); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x; }
.receipt__top { text-align: center; padding-bottom: 20px; border-bottom: 2px dashed var(--line); }
.receipt__logo { width: 70px; margin: 0 auto 10px; }
.receipt__meta { display: flex; justify-content: space-between; font-family: var(--f-ui); font-size: 12.5px; color: var(--muted); letter-spacing: .03em; }
.receipt__list li { list-style: none; display: grid; grid-template-columns: 34px 1fr auto 28px; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px dotted var(--line); animation: print .6s var(--ease) both; }
.receipt__list li.is-out { animation: tearOut .45s var(--ease) forwards; }
@keyframes print { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-10px); } }
@keyframes tearOut { to { opacity: 0; transform: translateX(40px) rotate(2deg); } }
.rl-flag { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.rl-flag .flag { width: 100%; height: 100%; display: block; }
.rl-title b { display: block; font-family: var(--f-serif); font-size: 19px; color: var(--navy); line-height: 1.3; }
.rl-title small { font-size: 12.5px; color: var(--muted); }
.rl-amt { display: flex; align-items: center; gap: 4px; font-family: var(--f-ui); font-weight: 600; color: var(--navy); }
.rl-amt button { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--blue); transition: .2s; }
.rl-amt button:hover { background: var(--navy); color: #fff; }
.rl-amt output { min-width: 86px; text-align: center; }
.rl-amt small { font-size: 11px; color: var(--muted); }
.rl-x { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); transition: .25s; }
.rl-x:hover { color: var(--red); transform: rotate(90deg); }
.receipt__empty { text-align: center; padding: 34px 0; color: var(--muted); font-family: var(--f-serif); font-size: 19px; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0; margin-top: 6px; border-top: 2px dashed var(--line); }
.receipt__total span { font-family: var(--f-ui); font-weight: 600; color: var(--blue); }
.receipt__total b { font-family: var(--f-serif); font-size: 30px; color: var(--navy); }
.receipt__pay { display: grid; gap: 10px; }
.paylogos { display: inline-flex; gap: 4px; margin-inline-start: 8px; }
.paylogos i { font: 700 10.5px/1 var(--f-ui); font-style: normal; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, .3); direction: ltr; }

/* ---------- الأسئلة ---------- */
.qa { display: grid; grid-template-columns: 1fr 1.8fr; gap: 56px; align-items: start; }
.qa__list details { border-bottom: 1px solid var(--line); }
.qa__list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; padding: 22px 0; font-family: var(--f-serif); font-size: 22px; font-weight: 600; color: var(--navy); }
.qa__list summary::-webkit-details-marker { display: none; }
.qa__list summary span { font-family: var(--f-ui); font-size: 13px; color: var(--blue); }
.qa__list summary::after { content: ""; width: 14px; height: 14px; border-left: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: rotate(-45deg); transition: transform .4s var(--ease); justify-self: center; margin-top: -6px; }
.qa__list details[open] summary::after { transform: rotate(135deg); margin-top: 6px; }
.qa__list details p { padding: 0 44px 22px 0; color: var(--ink-2); animation: fadeIn .45s var(--ease); }

/* ---------- المعرض ---------- */
.lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(10, 47, 72, .92); display: grid; place-items: center; padding: 24px; animation: fadeIn .3s; }
.lightbox img { max-width: min(100%, 1100px); max-height: 85vh; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); animation: archIn .7s var(--ease); }
.lightbox .act { position: absolute; top: 20px; left: 20px; color: #fff; }

.mbuild { display: none; }

/* ---------- حركة المسجد ---------- */
.mosque-svg .m-part { transform-box: fill-box; transform-origin: 50% 100%; animation: rise .8s var(--d, 0s) cubic-bezier(.3, 1.35, .5, 1) backwards; }
.mosque-svg.no-rise .m-part { animation: none; }
.mosque-svg .m-add.is-new { transform-box: fill-box; transform-origin: 50% 100%; animation: addPop .7s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.mosque-svg .m-win { transition: fill .8s; }
.mosque-svg .m-drip { animation: drip 1.2s infinite; }
@keyframes rise { from { transform: scaleY(0) translateY(24px); opacity: 0; } }
@keyframes addPop { from { transform: scale(0) rotate(-10deg); opacity: 0; } }
@keyframes drip { 0% { opacity: 0; transform: translateY(-2px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translateY(4px); } }

/* ---------- الاستجابة ---------- */
@media (max-width: 1200px) {
  .builder__grid { grid-template-columns: 1fr 360px; gap: 32px; }
  .clist, .olist { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .mq-hero__grid { grid-template-columns: 1fr; }
  .mq-hero__visual { height: 420px; max-width: 520px; width: 100%; margin-inline: auto; }
  .builder__grid { grid-template-columns: 1fr; }
  .stage { position: relative; top: 0; order: 0; max-width: 520px; width: 100%; margin-inline: auto; max-height: none; overflow: visible; }
  .stage__arch { height: 340px; }
  .chapters { order: 1; }
  .clist, .olist { grid-template-columns: 1fr 1fr; }
  .qa { grid-template-columns: 1fr; gap: 20px; }
  .mbuild { position: fixed; z-index: 70; bottom: 0; inset-inline: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--navy); color: #fff; transform: translateY(110%); transition: transform .45s var(--ease); }
  .mbuild.is-show { transform: none; }
  .mbuild[hidden] { display: none !important; }
  .mbuild small { display: block; font-size: 12px; color: var(--gold); }
  .mbuild b { font-family: var(--f-serif); font-size: 22px; }
}
@media (max-width: 720px) {
  .mq-hero { padding: 130px 0 70px; }
  .mq-hero__visual { height: 340px; }
  .mq-hero__nums div + div { padding-inline-start: 14px; }
  .stage__arch { height: 300px; }
  .chapter { padding: 22px 18px; }
  .chapter__head { gap: 12px; }
  .chapter__n { width: 44px; height: 44px; font-size: 22px; }
  .chapter__head h3 { font-size: 23px; }
  .chapter__state { display: none; }
  .clist, .olist { grid-template-columns: 1fr; }
  .cap__ticks .tick__lbl { font-size: 10px; }
  .tick, .tick__dot { width: 22px; }
  .tick__dot { height: 22px; }
  .cap__line { top: 28px; inset-inline: 11px; }
  .cap__specs { grid-template-columns: 1fr 1fr; }
  .cap__specs div:nth-child(3) { border-inline-start: 0; }
  .cap__specs div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .cap__media { grid-template-columns: 1fr 1fr; }
  .cap__price { grid-column: 1 / -1; padding: 14px 18px; }
  .receipt__list li { grid-template-columns: 30px 1fr 24px; grid-template-areas: "f t x" "f a a"; row-gap: 6px; }
  .rl-flag { grid-area: f; width: 30px; height: 30px; }
  .rl-title { grid-area: t; }
  .rl-amt { grid-area: a; }
  .rl-x { grid-area: x; }
  .paylogos { display: none; }
  .mdock { display: none !important; }
}