/* ==========================================================================
   mtemps6 — HERO-SERV (hsv)  H1 ← هوك ← نقاط ← اتصال/واتساب
   الرسمة: سكايلاين كحلي + ونش 3D كبير طاير قدامه + كرتونة مفتوحة + ختم،
   وتحت: صف حقائق في "كراتين" بشريط.
   ========================================================================== */
.mtemps6-hsv { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem); }
.mtemps6-hsv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3rem); align-items: center; }
.mtemps6-hsv-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mtemps6-sp-5); justify-items: start; }
.mtemps6-hsv-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--mtemps6-sp-2); margin: 0; padding: 0; list-style: none; color: var(--mtemps6-muted); font-size: var(--mtemps6-fs-sm); }
.mtemps6-hsv-crumbs li { display: inline-flex; align-items: center; gap: var(--mtemps6-sp-2); }
.mtemps6-hsv-crumbs li + li::before { content: "/"; color: var(--mtemps6-line-2); }
.mtemps6-hsv-crumbs a { color: var(--mtemps6-text); font-weight: var(--mtemps6-fw-semibold); }
.mtemps6-hsv-crumbs a:hover { color: var(--mtemps6-primary); }
.mtemps6-hsv-title { max-width: 20ch; font-size: var(--mtemps6-fs-display); line-height: var(--mtemps6-lh-display); }
.mtemps6-hsv-hook { max-width: 33rem; color: var(--mtemps6-muted); font-size: var(--mtemps6-fs-lg); }
.mtemps6-hsv-visual { position: relative; width: min(100%, 32rem); margin-inline: auto; aspect-ratio: 4 / 3.6; }
.mtemps6-hsv-city { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; height: auto; }
.mtemps6-hsv-city path { fill: var(--mtemps6-bg-3); }
html[dir="ltr"] .mtemps6-hsv-city { transform: scaleX(-1); }
.mtemps6-hsv-lift { position: absolute; inset-block-end: 2%; inset-inline-start: 12%; width: 62%; }
.mtemps6-hsv-box { position: absolute; inset-block-start: 6%; inset-inline-end: 0; width: 30%; --mtemps6-float-delay: -2s; --mtemps6-float-r0: -8deg; --mtemps6-float-r1: 4deg; }
.mtemps6-hsv-badge { position: absolute; inset-block-start: 6%; inset-inline-start: 2%; z-index: 2; }
.mtemps6-hsv-badge .mtemps6-ui-stamp { background: var(--mtemps6-surface); font-size: var(--mtemps6-fs-sm); }
.mtemps6-hsv-facts { display: grid; gap: var(--mtemps6-sp-3); margin: clamp(2.5rem, 6vw, 3.5rem) 0 0; }
.mtemps6-hsv-facts > div { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--mtemps6-sp-3); padding: var(--mtemps6-sp-4) var(--mtemps6-sp-5); overflow: hidden; border-radius: var(--mtemps6-r-sm); background: var(--mtemps6-cardboard-soft); }
.mtemps6-hsv-facts > div::before { content: ""; position: absolute; inset-block: 0; inset-inline-end: 18%; width: 1.4rem; background: var(--mtemps6-accent-soft); }
.mtemps6-hsv-facts dt { position: relative; font-weight: var(--mtemps6-fw-semibold); }
.mtemps6-hsv-facts dd { position: relative; margin: 0; color: var(--mtemps6-deep); font-size: var(--mtemps6-fs-xl); font-weight: var(--mtemps6-fw-bold); }
@media (min-width: 760px) { .mtemps6-hsv-facts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .mtemps6-hsv-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }