/* ==========================================================================
   mtemps6 — HERO (hro)
   نص: Tag ← H1 (كلمة عليها شريط لاصق) ← هوك ← نقاط بمربعات صح ← اتصال/واتساب
   مشهد: عمارة SVG + ونش (SVG) ذراعه سلّم مايل والكبينة بتطلع بكنبة 3D
   للبلكونة وترجع، + كراتين وشريط لاصق 3D طايرين بأعماق مختلفة (ماوس + سكرول)
   + ختم دوّار. تحت: شريط لاصق مايل بيتحرك (marquee).
   هندسة المشهد كلها متغيرات (--mtemps6-hro-*) وبتتقلب لوحدها في LTR.
   ========================================================================== */
.mtemps6-hro { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.mtemps6-hro-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--mtemps6-ink-soft) 1px, transparent 1px), linear-gradient(90deg, var(--mtemps6-ink-soft) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.35; -webkit-mask-image: radial-gradient(ellipse at 30% 40%, var(--mtemps6-deep), transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, var(--mtemps6-deep), transparent 70%); }
.mtemps6-hro-sun { position: absolute; width: 46vmax; aspect-ratio: 1; inset-block-start: -8vmax; inset-inline-end: -10vmax; border-radius: 50%; background: radial-gradient(circle, var(--mtemps6-accent-soft), transparent 65%); animation: mtemps6-hro-sun 14s var(--mtemps6-ease-soft) infinite alternate; }
@keyframes mtemps6-hro-sun { to { transform: translate3d(calc(var(--mtemps6-dir) * 4vw), 3vh, 0) scale(1.08); } }

.mtemps6-hro-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: center; padding-block-end: clamp(3rem, 7vw, 5rem); }
.mtemps6-hro-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mtemps6-sp-5); justify-items: start; }
.mtemps6-hro-copy .mtemps6-ui-tag i { color: var(--mtemps6-primary); }
.mtemps6-hro-title { max-width: 20ch; font-size: var(--mtemps6-fs-display); line-height: var(--mtemps6-lh-display); }
.mtemps6-hro-hook { max-width: 33rem; color: var(--mtemps6-muted); font-size: var(--mtemps6-fs-lg); line-height: 1.75; }
.mtemps6-hro-btns { align-items: center; }
.mtemps6-hro-calc { margin-inline-start: var(--mtemps6-sp-2); }
.mtemps6-hro-trust { display: flex; align-items: center; gap: var(--mtemps6-sp-3); color: var(--mtemps6-muted); font-size: var(--mtemps6-fs-sm); line-height: 1.5; }
.mtemps6-hro-trust strong { color: var(--mtemps6-text); font-size: var(--mtemps6-fs-md); }
.mtemps6-hro-faces { display: flex; }
.mtemps6-hro-faces .mtemps6-ui-media { width: 2.6rem; border: 3px solid var(--mtemps6-bg); }
.mtemps6-hro-faces .mtemps6-ui-media + .mtemps6-ui-media { margin-inline-start: -0.8rem; }
.mtemps6-hro-stars { color: var(--mtemps6-primary); font-size: 0.8rem; letter-spacing: 1px; }

/* ---------- المشهد ---------- */
.mtemps6-hro-stage { position: relative; width: min(100%, 36rem); margin-inline: auto; }
.mtemps6-hro-scene {
  --mtemps6-hro-angle: 52deg;           /* ميل ذراع الونش */
  --mtemps6-hro-reach: 86%;             /* الكبينة بتطلع لحد فين على الذراع */
  position: relative;
  aspect-ratio: 20 / 21;
}
.mtemps6-hro-scene > * { position: absolute; }
.mtemps6-hro-building { inset-inline-end: 0; inset-block-end: 7%; z-index: 1; width: 36%; height: auto; overflow: visible; }
html[dir="ltr"] .mtemps6-hro-building, html[dir="ltr"] .mtemps6-hro-truck { transform: scaleX(-1); }
.mtemps6-hro-b-roof { fill: var(--mtemps6-deep); }
.mtemps6-hro-b-wall { fill: var(--mtemps6-paper); stroke: var(--mtemps6-deep); stroke-width: 3; }
.mtemps6-hro-b-wins rect { fill: var(--mtemps6-bg-3); stroke: var(--mtemps6-deep); stroke-width: 2.5; }
.mtemps6-hro-b-lit { fill: var(--mtemps6-accent); stroke: var(--mtemps6-deep); stroke-width: 2.5; animation: mtemps6-hro-lit var(--mtemps6-lift-dur) var(--mtemps6-ease-in-out) infinite; }
@keyframes mtemps6-hro-lit { 0%, 40%, 100% { fill: var(--mtemps6-accent-soft); } 48%, 66% { fill: var(--mtemps6-accent); } }
.mtemps6-hro-b-door { fill: var(--mtemps6-deep-3); stroke: var(--mtemps6-deep); stroke-width: 2.5; }
.mtemps6-hro-b-balc { fill: none; stroke: var(--mtemps6-deep); stroke-width: 3; stroke-linecap: round; }
.mtemps6-hro-b-entry { fill: var(--mtemps6-deep); }
.mtemps6-hro-b-floors { fill: none; stroke: var(--mtemps6-line-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mtemps6-hro-floor-tag { inset-inline-end: 22%; inset-block-end: 53%; z-index: 6; display: inline-flex; align-items: center; gap: var(--mtemps6-sp-1); padding: 0.15rem 0.6rem; border-radius: var(--mtemps6-r-xs); background: var(--mtemps6-deep); color: var(--mtemps6-accent); font-size: var(--mtemps6-fs-2xs); font-weight: var(--mtemps6-fw-bold); white-space: nowrap; transform: rotate(-4deg); animation: mtemps6-hro-pop var(--mtemps6-lift-dur) var(--mtemps6-ease-spring) infinite; }
@keyframes mtemps6-hro-pop { 0%, 42% { transform: rotate(-4deg) scale(0.85); opacity: 0.55; } 50%, 66% { transform: rotate(-4deg) scale(1.08); opacity: 1; } 76%, 100% { transform: rotate(-4deg) scale(0.85); opacity: 0.55; } }

/* الذراع: محور الدوران فوق برج الونش (inline-start) */
.mtemps6-hro-arm {
  inset-inline-start: 41%;
  inset-block-end: calc(20.7% - 0.35rem);
  z-index: 2;
  width: 36%;
  height: 0.7rem;
  transform-origin: var(--mtemps6-x-start) center;
  transform: rotate(calc(var(--mtemps6-dir) * -1 * var(--mtemps6-hro-angle)));
}
.mtemps6-hro-arm-rail { position: absolute; inset: 0; border-block: 3px solid var(--mtemps6-accent-2); border-radius: var(--mtemps6-r-xs); background: repeating-linear-gradient(90deg, var(--mtemps6-accent) 0 3px, transparent 3px 12px); box-shadow: 0 6px 10px -6px var(--mtemps6-ink-soft); }
.mtemps6-hro-run { position: absolute; inset: 0; animation: mtemps6-hro-run var(--mtemps6-lift-dur) var(--mtemps6-ease-in-out) infinite; }
@keyframes mtemps6-hro-run {
  0%, 8% { transform: translateX(0); }
  46%, 66% { transform: translateX(calc(var(--mtemps6-dir) * var(--mtemps6-hro-reach))); }
  100% { transform: translateX(0); }
}
/* الكبينة بتفضل معدولة (عكس ميل الذراع) */
.mtemps6-hro-car { position: absolute; inset-inline-start: 0; inset-block-end: 70%; width: 46%; transform-origin: 50% 100%; transform: rotate(calc(var(--mtemps6-dir) * var(--mtemps6-hro-angle))); }
.mtemps6-hro-car-img { width: 100%; height: auto; margin-block-end: -6%; filter: drop-shadow(0 8px 6px var(--mtemps6-ink-soft)); animation: mtemps6-hro-sway 2.4s var(--mtemps6-ease-soft) infinite alternate; transform-origin: 50% 100%; }
@keyframes mtemps6-hro-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.mtemps6-hro-car-plate { display: block; height: 0.55rem; border-radius: var(--mtemps6-r-xs); background: var(--mtemps6-deep); box-shadow: inset 0 -3px 0 var(--mtemps6-accent); }

.mtemps6-hro-truck { inset-inline-start: 0; inset-block-end: 7%; z-index: 3; width: 54%; height: auto; overflow: visible; }
.mtemps6-hro-t-leg { fill: none; stroke: var(--mtemps6-deep); stroke-width: 5; stroke-linecap: round; }
.mtemps6-hro-t-foot { fill: var(--mtemps6-deep); }
.mtemps6-hro-t-body { fill: var(--mtemps6-deep); }
.mtemps6-hro-t-tape { fill: var(--mtemps6-accent); }
.mtemps6-hro-t-cab { fill: var(--mtemps6-primary); stroke: var(--mtemps6-deep); stroke-width: 3; }
.mtemps6-hro-t-win { fill: var(--mtemps6-paper); stroke: var(--mtemps6-deep); stroke-width: 2.5; }
.mtemps6-hro-t-light { fill: var(--mtemps6-accent); }
.mtemps6-hro-t-deck { fill: var(--mtemps6-deep-3); }
.mtemps6-hro-t-turret { fill: var(--mtemps6-accent); stroke: var(--mtemps6-deep); stroke-width: 4; }
.mtemps6-hro-t-wheels circle { fill: var(--mtemps6-deep); stroke: var(--mtemps6-deep-3); stroke-width: 4; }
.mtemps6-hro-t-hubs circle { fill: var(--mtemps6-bg-3); }
.mtemps6-hro-ground { inset-inline: -8%; inset-block-end: 0; z-index: 0; height: 7.5%; border-block-start: var(--mtemps6-bw) solid var(--mtemps6-deep); background: repeating-linear-gradient(90deg, var(--mtemps6-bg-3) 0 30px, var(--mtemps6-bg-2) 30px 32px); }

/* 3D طايرين */
.mtemps6-hro-f { z-index: 4; }
.mtemps6-hro-f--boxes { inset-inline-end: 27%; inset-block-end: 4%; width: 17%; --mtemps6-float-dur: 7s; }
.mtemps6-hro-f--open { inset-inline-start: 18%; inset-block-start: 14%; width: 21%; --mtemps6-float-delay: -2s; --mtemps6-float-r0: -6deg; --mtemps6-float-r1: 3deg; }
.mtemps6-hro-f--tape { inset-inline-start: 1%; inset-block-start: 34%; width: 13%; --mtemps6-float-dur: 5s; --mtemps6-float-delay: -1s; --mtemps6-float-r0: 10deg; --mtemps6-float-r1: -8deg; --mtemps6-float-y: 22px; }

/* ختم دوّار: حلقة شرطات بتلف + نص ثابت في النص */
.mtemps6-hro-seal { inset-inline-end: 3%; inset-block-start: 1%; z-index: 5; display: grid; place-items: center; width: 21%; aspect-ratio: 1; }
.mtemps6-hro-seal-ring { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--mtemps6-accent) 0 5deg, transparent 5deg 11deg); -webkit-mask: radial-gradient(circle, transparent 61%, var(--mtemps6-deep) 62%, var(--mtemps6-deep) 70%, transparent 71%); mask: radial-gradient(circle, transparent 61%, var(--mtemps6-deep) 62%, var(--mtemps6-deep) 70%, transparent 71%); animation: mtemps6-hro-spin 18s linear infinite; }
.mtemps6-hro-seal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mtemps6-deep); box-shadow: var(--mtemps6-shadow-box); z-index: -1; }
@keyframes mtemps6-hro-spin { to { transform: rotate(calc(var(--mtemps6-dir) * -360deg)); } }
.mtemps6-hro-seal-in { position: relative; display: grid; justify-items: center; color: var(--mtemps6-on-deep); line-height: 1.2; text-align: center; transform: rotate(-8deg); }
.mtemps6-hro-seal-in i { color: var(--mtemps6-accent); font-size: clamp(0.8rem, 2.4vw, 1.15rem); }
.mtemps6-hro-seal-in strong { font-size: clamp(0.7rem, 2vw, 0.95rem); }
.mtemps6-hro-seal-in small { color: var(--mtemps6-on-deep-muted); font-size: clamp(0.6rem, 1.6vw, 0.72rem); }

.mtemps6-hro-note { position: absolute; inset-inline-start: 2%; inset-block-start: 3%; z-index: 6; display: inline-flex; align-items: center; gap: var(--mtemps6-sp-2); padding: var(--mtemps6-sp-2) var(--mtemps6-sp-4); border: var(--mtemps6-hair) solid var(--mtemps6-line-2); border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-surface); box-shadow: var(--mtemps6-shadow-box); font-size: var(--mtemps6-fs-xs); font-weight: var(--mtemps6-fw-bold); }
.mtemps6-hro-note i { color: var(--mtemps6-whatsapp); }

/* ---------- شريط لاصق مايل ---------- */
.mtemps6-hro-band { position: relative; z-index: 2; margin-inline: -5%; padding-block: var(--mtemps6-sp-2); background: var(--mtemps6-accent); color: var(--mtemps6-on-accent); font-weight: var(--mtemps6-fw-bold); transform: rotate(-1.5deg); box-shadow: 0 6px 16px -10px var(--mtemps6-ink-soft); }
.mtemps6-hro-band .mtemps6-ui-marquee-group { gap: var(--mtemps6-sp-5); padding-inline-end: var(--mtemps6-sp-5); white-space: nowrap; font-size: var(--mtemps6-fs-md); }
.mtemps6-hro-band i { font-size: 0.9em; opacity: 0.8; }

@media (min-width: 1024px) {
  .mtemps6-hro-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: calc(100svh - var(--mtemps6-hdr-h) - 6rem); }
  .mtemps6-hro-stage { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mtemps6-hro-run { animation: none !important; transform: translateX(calc(var(--mtemps6-dir) * var(--mtemps6-hro-reach))); }
  .mtemps6-hro-seal-ring, .mtemps6-hro-sun, .mtemps6-hro-car-img, .mtemps6-hro-b-lit, .mtemps6-hro-floor-tag { animation: none !important; }
}