/* HostiGuard — v334 (Atlas): «جامد» home page (views/home/index.view.php) — hero + services + plans + apps band (Jamid design), plan cards «الحياة», devices section (hgh-ap). Loaded only on the home page. */
.hm { --ink: #0f172a; --ink2: #334155; --mut: #64748b; --line: #e3e8f0; --soft: #f4f7fc; --brand: #2f5bb0; --brand2: #3a6bc9; --navy: #0a1633; --ok: #059669; font-family: Inter, Almarai, system-ui, sans-serif; color: var(--ink); }
[dir="rtl"] .hm { font-family: Almarai, Inter, system-ui, sans-serif; }
.hm * { box-sizing: border-box; }
:where(.hm) h1, :where(.hm) h2, :where(.hm) h3 { margin: 0px; letter-spacing: -0.02em; text-wrap: balance; }
:where(.hm) p { margin: 0px; }
.hm-in { max-width: 1200px; margin: 0px auto; padding: 0px 20px; }
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); }
[dir="rtl"] .hm .hm-flip { transform: scaleX(-1); }
.hm-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand2); }
[dir="rtl"] .hm-k { letter-spacing: 0px; }
.hm-k.light { color: rgb(147, 197, 253); }
.hm-head { max-width: 720px; }
.hm-head.c { margin: 0px auto; text-align: center; }
.hm-head h2, .hm-h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; line-height: 1.12; margin-top: 10px; }
.hm-head p, .hm-p { font-size: 17px; line-height: 1.65; color: var(--mut); margin-top: 12px; }
.hm-head.c p { margin-inline: auto; max-width: 620px; }
.hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0px 24px; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; white-space: nowrap; }
.hm-btn:hover { transform: translateY(-1px); }
.hm-btn.blue { background: var(--brand2); color: rgb(255, 255, 255); box-shadow: rgba(37, 99, 235, 0.85) 0px 12px 26px -14px; }
.hm-btn.blue:hover { background: var(--brand); }
.hm-btn.white { background: rgb(255, 255, 255); color: rgb(18, 48, 107); }
.hm-btn.tp { background: rgb(0, 182, 122); color: rgb(255, 255, 255); box-shadow: rgba(0, 182, 122, 0.9) 0px 12px 26px -14px; }
.hm-btn .material-symbols-outlined { font-size: 19px; }
.hm-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 15px; color: var(--brand2); text-decoration: none; }
.hm-link:hover { color: var(--brand); }
.hm-btn:focus-visible, .hm-link:focus-visible, .hm-card:focus-visible, .hm-app:focus-visible { outline: rgb(147, 197, 253) solid 3px; outline-offset: 3px; }
.hm-hero { position: relative; overflow: hidden; color: rgb(255, 255, 255); padding: 64px 0px 132px; background: radial-gradient(50% 70% at 88% 8%, rgba(58, 107, 201, 0.5), transparent 70%), radial-gradient(40% 55% at 0% 100%, rgba(16, 185, 129, 0.14), transparent 70%), linear-gradient(160deg, rgb(10, 22, 51), rgb(18, 48, 107) 60%, rgb(27, 60, 128)); }
.hm-hero::before { content: ""; position: absolute; inset: 0px; background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(rgb(0, 0, 0) 40%, transparent); pointer-events: none; }
.hm-hgrid { position: relative; display: grid; grid-template-columns: minmax(0px, 1.08fr) minmax(0px, 0.92fr); gap: 56px; align-items: center; }
.hm-status { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0px 10px 0px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(209, 250, 229); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.hm-status i { width: 8px; height: 8px; border-radius: 50%; background: rgb(52, 211, 153); box-shadow: rgba(52, 211, 153, 0.2) 0px 0px 0px 4px; animation: 2s ease-out 0s infinite normal none running hmPulse; }
.hm-status .material-symbols-outlined { font-size: 18px; color: rgb(148, 163, 184); }
@keyframes hmPulse { 
  0% { box-shadow: rgba(52, 211, 153, 0.45) 0px 0px 0px 0px; }
  100% { box-shadow: rgba(52, 211, 153, 0) 0px 0px 0px 9px; }
}
.hm-hero h1 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.05; font-weight: 900; margin-top: 20px; }
.hm-lead { font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.65; color: rgb(207, 218, 240); margin-top: 18px; max-width: 590px; }
.hm-search { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 30px; height: 66px; padding: 0px 8px 0px 18px; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.6) 0px 24px 50px -24px; max-width: 600px; }
[dir="rtl"] .hm-search { padding: 0px 18px 0px 8px; }
.hm-search > .material-symbols-outlined { color: rgb(148, 163, 184); font-size: 24px; }
.hm-search input { flex: 1 1 0%; min-width: 0px; height: 100%; border: 0px; outline: 0px; background: transparent; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16.5px; color: rgb(15, 23, 42); text-align: left; }
.hm-search input::placeholder { color: rgb(148, 163, 184); }
.hm-search button { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0px 24px; border: 0px; border-radius: 13px; background: var(--brand2); color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 800; font-size: 15.5px; cursor: pointer; }
.hm-search button:hover { background: var(--brand); }
.hm-search:focus-within { box-shadow: rgba(147, 197, 253, 0.55) 0px 0px 0px 4px, rgba(0, 0, 0, 0.6) 0px 24px 50px -24px; }
.hm-tlds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: 600px; }
.hm-tlds a { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); text-decoration: none; font-size: 13px; transition: background 0.15s; }
.hm-tlds a:hover { background: rgba(255, 255, 255, 0.14); }
.hm-tlds b { font-weight: 900; font-size: 14.5px; }
.hm-tlds span { color: rgb(165, 184, 220); font-weight: 600; }
.hm-sublinks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.hm-sublinks a { display: inline-flex; align-items: center; gap: 7px; color: rgb(219, 230, 251); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.hm-sublinks a:hover { color: rgb(255, 255, 255); }
.hm-sublinks .material-symbols-outlined { font-size: 19px; color: rgb(110, 231, 183); }
.hm-visual { position: relative; padding: 34px 10px 40px; }
.hm-panel { position: relative; background: rgb(255, 255, 255); color: rgb(15, 23, 42); border-radius: 22px; padding: 20px; box-shadow: rgba(0, 0, 0, 0.7) 0px 40px 80px -36px; }
.hm-panel-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgb(238, 241, 246); }
.hm-panel-top b { display: block; font-size: 15px; font-weight: 800; }
.hm-panel-top small { display: block; font-size: 11.5px; color: rgb(148, 163, 184); }
.hm-fav { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgb(58, 107, 201), rgb(18, 48, 107)); color: rgb(255, 255, 255); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.hm-pill { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.hm-pill.ok { background: rgb(236, 253, 245); color: rgb(4, 120, 87); }
.hm-pill i { width: 7px; height: 7px; border-radius: 50%; background: rgb(16, 185, 129); }
.hm-metrics { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; margin-top: 16px; }
.hm-metrics div { border: 1px solid rgb(238, 241, 246); border-radius: 13px; padding: 10px 12px; background: rgb(248, 250, 252); min-width: 0px; }
.hm-metrics small { display: block; font-size: 11px; color: rgb(100, 116, 139); font-weight: 600; }
.hm-metrics b { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; margin-top: 4px; white-space: nowrap; }
.hm-metrics b .material-symbols-outlined { font-size: 16px; color: rgb(58, 107, 201); }
.hm-metrics b.ok, .hm-metrics b.ok .material-symbols-outlined { color: rgb(5, 150, 105); }
.hm-bar { margin-top: 14px; }
.hm-bar > div { display: flex; justify-content: space-between; font-size: 11.5px; color: rgb(100, 116, 139); font-weight: 600; }
.hm-bar > span { display: block; height: 8px; border-radius: 9px; background: rgb(226, 232, 240); margin-top: 7px; overflow: hidden; }
.hm-bar > span i { display: block; height: 100%; width: 9%; border-radius: 9px; background: linear-gradient(90deg, rgb(58, 107, 201), rgb(96, 165, 250)); }
.hm-actions { display: flex; gap: 8px; margin-top: 16px; }
.hm-actions span { flex: 1 1 0%; text-align: center; height: 34px; line-height: 34px; border-radius: 10px; background: rgb(238, 244, 255); color: rgb(47, 91, 176); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-actions span:first-child { background: rgb(47, 91, 176); color: rgb(255, 255, 255); }
.hm-graph { margin-top: 14px; height: 70px; border-radius: 12px; overflow: hidden; background: rgb(248, 250, 252); }
.hm-graph svg { display: block; width: 100%; height: 100%; }
.hm-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); color: rgb(15, 23, 42); border-radius: 15px; padding: 10px 14px; box-shadow: rgba(0, 0, 0, 0.6) 0px 20px 40px -18px; animation: 5s ease-in-out 0s infinite normal none running hmFloat; }
.hm-float b { display: block; font-size: 13px; font-weight: 800; }
.hm-float small { display: block; font-size: 11px; color: rgb(100, 116, 139); font-weight: 600; }
.hm-fi { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hm-fi .material-symbols-outlined { font-size: 19px; }
.hm-float.f1 { top: -4px; inset-inline-start: -34px; }
.hm-float.f2 { bottom: 6px; inset-inline-end: -26px; animation-delay: -2.5s; }
.hm-float.f3 { bottom: -6px; inset-inline-start: -6px; animation-delay: -1.2s; }
@keyframes hmFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hm-float, .hm-status i { animation: auto ease 0s 1 normal none running none; }
}
.hm-trust { position: relative; margin-top: -62px; z-index: 3; }
.hm-trust-box { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 22px; box-shadow: rgba(15, 23, 42, 0.5) 0px 26px 60px -36px; padding: 8px; }
.hm-trust-box > div { display: flex; align-items: center; gap: 12px; padding: 16px; min-width: 0px; }
.hm-trust-box > div + div { border-inline-start: 1px solid rgb(238, 241, 246); }
.hm-trust-box b { display: block; font-size: 14.5px; font-weight: 800; }
.hm-trust-box small { display: block; font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.hm-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgb(242, 246, 253); color: rgb(31, 78, 158); border: 1px solid rgb(219, 228, 243); }
.hm-ic svg { width: 23px; height: 23px; }
.hm-sec { padding: 92px 0px; }
.hm-sec.soft { background: var(--soft); }
.hm-sec.dark { color: rgb(255, 255, 255); background: radial-gradient(50% 80% at 100% 0%, rgba(58, 107, 201, 0.45), transparent 70%), linear-gradient(160deg, rgb(10, 22, 51), rgb(18, 48, 107)); }
.hm-sec.dark .hm-head p { color: rgb(207, 218, 240); }
.hm-center { display: flex; justify-content: center; margin-top: 28px; }
.hm-svc { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; margin-top: 42px; }
.hm-card { display: flex; flex-direction: column; gap: 10px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 20px; padding: 22px; text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.hm-card:hover { border-color: rgb(188, 208, 242); box-shadow: rgba(37, 99, 235, 0.45) 0px 22px 44px -28px; transform: translateY(-2px); }
.hm-card:hover .hm-ic { background: rgb(31, 78, 158); color: rgb(255, 255, 255); border-color: rgb(31, 78, 158); }
.hm-card .hm-ic { transition: background 0.15s, color 0.15s; }
.hm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgb(236, 253, 245); color: rgb(4, 120, 87); }
.hm-card h3 { font-size: 18px; font-weight: 800; margin-top: 6px; }
.hm-card p { font-size: 14.5px; line-height: 1.6; color: var(--mut); }
.hm-card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px dashed rgb(230, 235, 243); }
.hm-price { font-size: 19px; font-weight: 900; color: var(--ink); }
.hm-price small { font-size: 12.5px; font-weight: 600; color: var(--mut); }
.hm-price.free { color: rgb(4, 120, 87); }
.hm-price.soft { font-size: 14px; font-weight: 800; color: var(--brand2); }
.hm-go { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgb(238, 244, 255); color: var(--brand2); }
.hm-go .material-symbols-outlined { font-size: 19px; }
.hm-toggle { display: flex; justify-content: center; margin-top: 28px; }
.hm-plans { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; margin-top: 34px; align-items: stretch; }
.hm-plan { position: relative; display: flex; flex-direction: column; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.hm-plan.hot { background: linear-gradient(160deg, rgb(18, 48, 107), rgb(47, 91, 176)); color: rgb(255, 255, 255); border-color: transparent; box-shadow: rgba(18, 48, 107, 0.8) 0px 30px 60px -30px; }
.hm-plan-tag { position: absolute; top: -13px; inset-inline-start: 28px; height: 26px; padding: 0px 12px; border-radius: 999px; background: rgb(16, 185, 129); color: rgb(255, 255, 255); font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; }
.hm-plan h3 { font-size: 20px; font-weight: 900; }
.hm-plan-d { font-size: 14px; color: var(--mut); margin-top: 6px; min-height: 42px; }
.hm-plan.hot .hm-plan-d { color: rgb(199, 214, 243); }
.hm-plan-p { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.hm-plan-p b { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; }
.hm-plan-p span { font-size: 14px; color: var(--mut); }
.hm-plan.hot .hm-plan-p span, .hm-plan.hot .hm-plan-b { color: rgb(199, 214, 243); }
.hm-plan-b { font-size: 12.5px; color: var(--mut); margin-top: 2px; }
.hm-plan .hm-btn { margin-top: 20px; width: 100%; }
.hm-plan ul { list-style: none; padding: 0px; margin: 22px 0px 0px; display: grid; gap: 10px; font-size: 14px; color: var(--ink2); }
.hm-plan.hot ul { color: rgb(226, 232, 240); }
.hm-plan li { display: flex; gap: 9px; align-items: flex-start; }
.hm-plan li .material-symbols-outlined { font-size: 19px; color: rgb(16, 185, 129); font-variation-settings: "FILL" 1; }
.hm-plan.hot li .material-symbols-outlined { color: rgb(110, 231, 183); }
.hm-plan li.off { opacity: 0.45; }
.hm-plan li.off .material-symbols-outlined { color: rgb(148, 163, 184); }
.hm-apps { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 16px; margin-top: 40px; }
.hm-app { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px; border-radius: 20px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); color: rgb(255, 255, 255); text-decoration: none; transition: background 0.15s, transform 0.15s; }
.hm-app:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.hm-app .hga-ic { width: 52px; height: 52px; border-radius: 15px; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.hm-app .hga-ic svg { width: 34px; height: 34px; }
.hm-claude { color: rgb(47, 91, 176); }
.hm-claude .material-symbols-outlined { font-size: 30px; }
.hm-app b { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.hm-app small { font-size: 13.5px; color: rgb(207, 218, 240); line-height: 1.5; }
.hm-app-go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 800; color: rgb(147, 197, 253); }
.hm-app-go .material-symbols-outlined { font-size: 18px; }
.hm-app i.new { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgb(16, 185, 129); color: rgb(255, 255, 255); }
.hm-app i.soon { font-style: normal; color: rgb(253, 186, 116); }
.hm-why { display: grid; grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr); gap: 56px; align-items: center; }
.hm-checks { list-style: none; padding: 0px; margin: 22px 0px 0px; display: grid; gap: 11px; }
.hm-checks li { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink2); font-size: 15.5px; }
.hm-checks .material-symbols-outlined { color: var(--ok); font-variation-settings: "FILL" 1; }
.hm-feat { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; }
.hm-feat > div { background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
.hm-feat h3 { font-size: 17px; font-weight: 800; margin-top: 16px; }
.hm-feat p { font-size: 14.5px; line-height: 1.6; color: var(--mut); margin-top: 6px; }
.hm-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; margin-top: 42px; }
.hm-steps > div { position: relative; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.hm-step-n { position: absolute; top: 22px; inset-inline-end: 22px; font-size: 40px; font-weight: 900; color: rgb(230, 237, 248); line-height: 1; }
.hm-steps h3 { font-size: 18px; font-weight: 800; margin-top: 16px; }
.hm-steps p { font-size: 14.5px; line-height: 1.6; color: var(--mut); margin-top: 6px; }
.hm-faq { display: grid; grid-template-columns: minmax(0px, 0.8fr) minmax(0px, 1.2fr); gap: 48px; align-items: start; }
.hm-faq aside { display: grid; gap: 16px; position: sticky; top: 110px; }
.hm-tp { border-radius: 22px; padding: 28px; background: linear-gradient(160deg, rgb(10, 22, 51), rgb(18, 48, 107)); color: rgb(255, 255, 255); }
.hm-stars { display: flex; gap: 4px; }
.hm-stars span { width: 30px; height: 30px; background: rgb(0, 182, 122); display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.hm-stars .material-symbols-outlined { font-size: 21px; color: rgb(255, 255, 255); }
.hm-tp h2 { font-size: 24px; font-weight: 900; margin-top: 16px; }
.hm-tp p { color: rgb(207, 218, 240); font-size: 15px; line-height: 1.6; margin: 8px 0px 20px; }
.hm-help { border: 1px solid var(--line); border-radius: 20px; padding: 22px; background: var(--soft); }
.hm-help b { font-size: 16px; font-weight: 800; }
.hm-help p { font-size: 14.5px; color: var(--mut); margin: 6px 0px 12px; }
.hm-qa { border: 1px solid var(--line); border-radius: 16px; background: rgb(255, 255, 255); }
.hm-qa + .hm-qa { margin-top: 10px; }
.hm-qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; font-size: 16px; font-weight: 800; }
.hm-qa summary::-webkit-details-marker { display: none; }
.hm-qa summary .material-symbols-outlined { transition: transform 0.2s; color: var(--brand2); }
.hm-qa[open] summary .material-symbols-outlined { transform: rotate(45deg); }
.hm-qa div { padding: 0px 20px 18px; font-size: 15px; line-height: 1.7; color: var(--mut); }
.hm-hgrid > *, .hm-why > *, .hm-faq > *, .hm-svc > *, .hm-plans > *, .hm-apps > *, .hm-steps > *, .hm-feat > * { min-width: 0px; }
@media (max-width: 1100px) {
  .hm-trust-box { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .hm-trust-box > div:nth-child(4) { border-inline-start: 0px; }
  .hm-apps { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
@media (max-width: 980px) {
  .hm-hgrid, .hm-why, .hm-faq { grid-template-columns: 1fr; }
  .hm-visual { max-width: 520px; margin: 0px auto; width: 100%; }
  .hm-svc, .hm-plans, .hm-steps { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .hm-faq aside { position: static; }
}
@media (max-width: 640px) {
  .hm-hero { padding: 40px 0px 110px; }
  .hm-visual { display: none; }
  .hm-svc, .hm-plans, .hm-steps, .hm-apps, .hm-feat { grid-template-columns: 1fr; }
  .hm-trust-box { grid-template-columns: 1fr 1fr; }
  .hm-trust-box > div { padding: 12px; border-inline-start: 0px !important; }
  .hm-sec { padding: 64px 0px; }
  .hm-search { height: 58px; }
  .hm-search button span { display: none; }
  .hm-search button { padding: 0px 16px; }
}
[dir=rtl] .hm-hero h1{line-height:1.22}
[dir=rtl] .hm-lead{margin-top:20px}
/* hero — service icons around the dashboard card */
.hm-visual{position:relative}
.hm-orbit{position:absolute;z-index:3;top:46px;bottom:96px;inset-inline-end:-66px;width:76px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.hm-orbit:before{content:"";position:absolute;top:30px;bottom:30px;left:50%;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(147,197,253,0),rgba(147,197,253,.55) 20%,rgba(147,197,253,.55) 80%,rgba(147,197,253,0));pointer-events:none}
.hm-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#fff;animation:hmNode 6s ease-in-out infinite}
.hm-node.n2{animation-delay:-1.5s}.hm-node.n3{animation-delay:-3s}.hm-node.n4{animation-delay:-4.5s}
.hm-node:after{content:"";position:absolute;top:29px;inset-inline-end:100%;width:26px;height:2px;margin-inline-end:-2px;background:linear-gradient(90deg,rgba(147,197,253,.75),rgba(147,197,253,.15))}
[dir=rtl] .hm-node:after{background:linear-gradient(270deg,rgba(147,197,253,.75),rgba(147,197,253,.15))}
.hm-node:before{content:"";position:absolute;top:26px;inset-inline-end:calc(100% + 24px);width:8px;height:8px;border-radius:50%;background:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.18)}
.hm-node .ring{position:relative;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#2a5fc4 0%,#12306b 58%,#0a1633 100%);border:2px solid rgba(147,197,253,.85);box-shadow:0 0 0 6px rgba(58,107,201,.2),0 0 28px rgba(96,165,250,.55),inset 0 0 14px rgba(147,197,253,.35);transition:transform .2s,box-shadow .2s}
.hm-node .ring:after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px dashed rgba(147,197,253,.35)}
.hm-node .ring .material-symbols-outlined{font-size:27px;color:#e6f0ff}
.hm-node b{font-size:11.5px;font-weight:800;line-height:1;padding:5px 9px;border-radius:999px;background:rgba(10,22,51,.75);border:1px solid rgba(147,197,253,.3);white-space:nowrap;backdrop-filter:blur(4px)}
.hm-node:hover .ring{transform:scale(1.07);box-shadow:0 0 0 7px rgba(58,107,201,.28),0 0 36px rgba(96,165,250,.8),inset 0 0 16px rgba(147,197,253,.45)}
.hm-node:focus-visible{outline:3px solid #93c5fd;outline-offset:4px;border-radius:16px}
@keyframes hmNode{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hm-float.f2{bottom:-26px;inset-inline-end:58px}
.hm-quick{display:none}
@media (max-width:1240px){.hm-orbit{inset-inline-end:-44px}}
@media (max-width:980px){.hm-orbit{inset-inline-end:-30px}}
@media (max-width:640px){
.hm-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:18px}
.hm-quick a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(147,197,253,.28);color:#fff;font-size:13.5px;font-weight:800;text-decoration:none}
.hm-quick .material-symbols-outlined{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:radial-gradient(circle at 50% 30%,#2a5fc4,#12306b);border:1px solid rgba(147,197,253,.7);box-shadow:0 0 14px rgba(96,165,250,.45);flex:none}
}
@media (prefers-reduced-motion:reduce){.hm-node{animation:none}}

/* plans — the middle plan of each service, «الحياة» cards */
.hm4-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px;align-items:stretch}
.hm4-card{position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:24px;background:#fff;border:1px solid var(--line);transition:transform .2s,box-shadow .2s,border-color .2s;min-width:0}
.hm4-card:before{content:"";position:absolute;top:-1px;left:22px;right:22px;height:3px;border-radius:0 0 4px 4px;background:var(--c)}
.hm4-card:hover{transform:translateY(-3px);border-color:#c9d8f5;box-shadow:0 30px 60px -38px rgba(18,48,107,.5)}
.hm4-card.wp{--c:#3a6bc9;--cs:#eaf1ff}.hm4-card.sh{--c:#0e9384;--cs:#e3f6f3}.hm4-card.bz{--c:#5b5bd6;--cs:#eeeefc}.hm4-card.cs{--c:#0b8bc9;--cs:#e4f4fc}
.hm4-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;min-height:28px}
.hm4-cat{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--cs);color:var(--c);font-size:12px;font-weight:800;white-space:nowrap}
.hm4-cat .material-symbols-outlined{font-size:16px}
.hm4-pct{padding:4px 9px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:11.5px;font-weight:800;white-space:nowrap}
.hm4-pct.off{visibility:hidden}
.hm4-card h3{font-size:20px;font-weight:900;margin-top:16px;line-height:1.2;color:var(--ink)}
.hm4-sub{font-size:13.5px;color:var(--mut);margin-top:6px;min-height:40px;line-height:1.5}
.hm4-was{display:flex;align-items:center;gap:8px;min-height:26px;margin-top:10px}
.hm4-was .old{font-size:16px;font-weight:700;color:#94a3b8}
.hm4-was .save{padding:2px 8px;border-radius:999px;background:#f0fdf4;border:1px solid #dcfce7;color:#15803d;font-size:11px;font-weight:800}
.hm4-pr{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.hm4-pr .amt{font-size:38px;font-weight:900;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.hm4-pr .per{font-size:14px;font-weight:700;color:var(--mut)}
.hm4-bill{font-size:12.5px;color:var(--mut);margin-top:4px;min-height:18px}
.hm4-cta{margin-top:18px;width:100%}
.hm4-feat{list-style:none;padding:16px 0 0;margin:18px 0 0;border-top:1px dashed #dde5f1;display:grid;gap:10px;font-size:13.5px;color:var(--ink2)}
.hm4-feat li{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.hm4-feat li .material-symbols-outlined{font-size:19px;color:#10b981;font-variation-settings:"FILL" 1;flex:none}
.hm4-feat li.off{color:#94a3b8}
.hm4-feat li.off .material-symbols-outlined{color:#cbd5e1;font-variation-settings:"FILL" 0}
.hm4-feat{margin-bottom:22px}
.hm4-more{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:auto -22px -22px;min-height:70px;padding:14px 22px 15px;border-top:1px solid #edf1f7;border-radius:0 0 23px 23px;background:linear-gradient(180deg,#fbfcfe,#f5f8fc);color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.hm4-more-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hm4-more-t b{font-size:13.5px;font-weight:800;line-height:1.3}
.hm4-more-t small{font-size:12px;font-weight:600;color:var(--mut);line-height:1.3}
.hm4-more-ar{width:34px;height:34px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--cs);color:var(--c);transition:background .2s,color .2s,transform .2s}
.hm4-more-ar .material-symbols-outlined{font-size:18px}
.hm4-more:hover,.hm4-more:focus-visible{background:var(--cs);color:var(--c)}
.hm4-more:hover .hm4-more-ar,.hm4-more:focus-visible .hm4-more-ar{background:var(--c);color:#fff;transform:translateX(3px)}
[dir=rtl] .hm4-more:hover .hm4-more-ar,[dir=rtl] .hm4-more:focus-visible .hm4-more-ar{transform:translateX(-3px)}
@media (max-width:1100px){.hm4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm4-grid{grid-template-columns:minmax(0,1fr)}.hm4-sub{min-height:0}}

/* apps band — apps with their stores + the two AI connectors */
.hm-apps2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:40px}
.hm-app2,.hm-conn{grid-column:span 2;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);min-width:0;transition:background .15s}
.hm-conn{grid-column:span 3}
.hm-app2:hover,.hm-conn:hover{background:rgba(255,255,255,.1)}
.hm-app2-h{display:flex;align-items:flex-start;gap:14px}
.hm-app2-h>div{min-width:0}
.hm-app2 .hga-ic,.hm-ci{width:52px;height:52px;border-radius:15px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.hm-app2 .hga-ic svg{width:34px;height:34px}
.hm-ci.cl{color:#2f5bb0}.hm-ci.gk{background:#0b1220;color:#fff;border:1px solid rgba(255,255,255,.22)}
.hm-ci .material-symbols-outlined{font-size:29px;font-variation-settings:"FILL" 1}
.hm-app2 h3,.hm-conn h3{font-size:17px;font-weight:800;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hm-app2 p,.hm-conn p{font-size:13.5px;line-height:1.55;color:#cfdaf0;margin-top:4px}
.hm-conn i.new{font-style:normal;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:#10b981;color:#fff}
.hm-pfs{display:flex;flex-wrap:wrap;gap:8px}
.hm-pf{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#e6edfb;font-size:12.5px;font-weight:700}
.hm-pf .material-symbols-outlined{font-size:16px;color:#93c5fd}
.hm-stores{display:flex;flex-wrap:wrap;gap:10px;min-height:56px}
.hm-store{display:flex;flex-direction:column;align-items:center;gap:5px}
.hm-store img{display:block;height:36px;width:auto;border-radius:8px;border:1px solid rgba(255,255,255,.28);opacity:.92}
.hm-store i{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:11px;font-weight:800;color:#fdba74}
.hm-store i .material-symbols-outlined{font-size:13px}
.hm-app2 .hm-app-go,.hm-conn .hm-app-go{margin-top:auto;padding-top:4px;text-decoration:none}
.hm-app-go.soon{color:#fdba74}
.hm-ask{display:flex;flex-wrap:wrap;gap:8px}
.hm-ask span{padding:8px 12px;border-radius:14px 14px 14px 4px;background:#3a6bc9;color:#fff;font-size:12.5px;font-weight:700}
[dir=rtl] .hm-ask span{border-radius:14px 14px 4px 14px}
@media (max-width:1100px){.hm-apps2{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-app2,.hm-conn{grid-column:span 1}}
@media (max-width:640px){.hm-apps2{grid-template-columns:minmax(0,1fr)}.hm-stores{min-height:0}.hm-stores-empty{display:none}}

/* phone: keep the search icon visible in the search button */
@media (max-width:640px){.hm-search button span.material-symbols-outlined{display:inline-block}}

/* apps band v2 — Jamid cards + two store cards + the connectors */
.hm-apps3{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.hm-apps3>.hm-app{grid-column:span 1;min-width:0}
.hm-apps3>.hm-conn{grid-column:span 2}
.hm-sics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.hm-sics .hga-ic{margin-bottom:0}
.hm-app .hm-sic img{display:block;width:auto;height:34px}
.hm-app .hm-sic.ms img{height:30px}
.hm-app b i.soon{font-style:normal;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:rgba(253,186,116,.16);color:#fdba74;border:1px solid rgba(253,186,116,.35)}
@media (max-width:1100px){.hm-apps3{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-apps3>.hm-conn:nth-child(n){grid-column:span 1}}
@media (max-width:820px){.hm-apps3>.hm-conn:nth-child(n){grid-column:1/-1}}
@media (max-width:640px){.hm-apps3{grid-template-columns:minmax(0,1fr)}.hm-apps3>.hm-app:nth-child(n),.hm-apps3>.hm-conn:nth-child(n){grid-column:1/-1}}

.hm4-grid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.hm4-grid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.hm4-grid.n1{grid-template-columns:minmax(0,420px);justify-content:center}
@media (max-width:1100px){.hm4-grid.n3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.hm4-grid.n3,.hm4-grid.n2{grid-template-columns:minmax(0,1fr)}}

.hgh{--hgh-p: #4c7fe6; --hgh-pd: #3a6bc9; --hgh-ink: #0f172a; --hgh-ink2: #334155; --hgh-mute: #64748b; --hgh-line: #e2e8f0; --hgh-soft: #eef4ff; --hgh-soft2: #f6f9ff;}
.hgh *{box-sizing: border-box;}
.hgh-wrap{max-width: 80rem; margin-inline: auto; padding-inline: 24px;}
.hgh h2.text-section{line-height: 1.12; text-wrap: balance;}
.hgh-link{display: inline-flex; align-items: center; gap: 6px; color: var(--hgh-p); font-weight: 700; text-decoration: none;}
.hgh-link:hover{text-decoration: underline;}
.hgh-link .material-symbols-outlined{font-size: 18px;}
[dir="rtl"] .hgh-link .hgh-flip{transform: scaleX(-1);}
.hgh-ap{background: linear-gradient(rgb(238, 244, 255), rgb(247, 250, 255)); padding-block: 96px; overflow: hidden;}
.hgh-ap-g{display: grid; grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr); gap: 56px; align-items: center;}
.hgh-ap-txt .sec-pill{display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid rgb(197, 217, 249); color: var(--hgh-p); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 18px;}
.hgh-ap-txt .sec-pill .material-symbols-outlined{font-size: 14px;}
.hgh-ap-txt h2{color: var(--hgh-ink); margin: 0px 0px 14px;}
.hgh-ap-txt > p{color: var(--hgh-mute); font-size: 1.08rem; line-height: 1.65; margin: 0px 0px 30px; max-width: 34rem;}
.hgh-ap-list{display: flex; flex-direction: column; gap: 14px;}
.hgh-ap-row{display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 16px 18px; border-radius: 20px; background: rgb(255, 255, 255); border: 1px solid rgb(225, 233, 248); box-shadow: rgba(30, 41, 59, 0.35) 0px 10px 30px -22px;}
.hgh-ap-id{display: flex; align-items: center; gap: 14px; flex: 1 1 240px; min-width: 0px;}
.hgh-ap-id img{width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto; box-shadow: rgba(15, 23, 42, 0.35) 0px 6px 14px -6px;}
.hgh-ap-id .win{width: 50px; height: 50px; border-radius: 14px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgb(15, 23, 42), rgb(30, 58, 138)); color: rgb(255, 255, 255);}
.hgh-ap-id .win svg{width: 22px; height: 22px; fill: rgb(255, 255, 255);}
.hgh-ap-id b{display: block; font-size: 1rem; font-weight: 800; color: var(--hgh-ink);}
.hgh-ap-id small{display: block; font-size: 0.82rem; color: var(--hgh-mute); margin-top: 2px;}
.hgh-ap-st{display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-inline-start: auto;}
.hgh-ap-st .dcb{--bh: 40px;}
.hgh-ap-dl{display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0px 16px; border-radius: 10px; background: rgb(15, 23, 42); color: rgb(255, 255, 255); font-size: 0.85rem; font-weight: 700; text-decoration: none;}
.hgh-ap-dl:hover{background: rgb(30, 41, 59);}
.hgh-ap-dl .material-symbols-outlined{font-size: 19px;}
.hgh-ap-more{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 20px; font-size: 0.92rem; color: var(--hgh-mute);}
.hgh-ap-more > span{display: inline-flex; align-items: center; gap: 8px;}
.hgh-ap-more > span .material-symbols-outlined{font-size: 19px; color: var(--hgh-p);}
.hgh-dev{position: relative; height: 520px;}
.hgh-dev .glow{position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(circle, rgba(76, 127, 230, 0.28), transparent 66%); filter: blur(10px);}
.hgh-lap{position: absolute; top: 56px; inset-inline-start: 0px; width: 84%; border-radius: 18px; background: rgb(15, 23, 42); padding: 12px 12px 0px; box-shadow: rgba(15, 23, 42, 0.55) 0px 40px 80px -30px;}
.hgh-lap-scr{border-radius: 10px 10px 0px 0px; background: rgb(248, 250, 252); height: 300px; overflow: hidden; display: flex;}
.hgh-lap-side{width: 64px; background: rgb(255, 255, 255); border-inline-end: 1px solid rgb(226, 232, 240); display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 16px;}
.hgh-lap-side i{width: 28px; height: 28px; border-radius: 9px; background: rgb(238, 244, 255); display: block;}
.hgh-lap-side i:first-child{background: linear-gradient(135deg, rgb(76, 127, 230), rgb(129, 140, 248));}
.hgh-lap-main{flex: 1 1 0%; padding: 18px; display: flex; flex-direction: column; gap: 12px;}
.hgh-lap-main .bar{height: 12px; border-radius: 6px; background: rgb(226, 232, 240); width: 46%;}
.hgh-lap-main .bar.s{width: 28%; background: rgb(238, 242, 247);}
.hgh-lap-files{display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px;}
.hgh-lap-files span{display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; background: rgb(255, 255, 255); border: 1px solid rgb(232, 238, 248);}
.hgh-lap-files span .material-symbols-outlined{font-size: 30px; color: rgb(76, 127, 230); font-variation-settings: "FILL" 1;}
.hgh-lap-files span:nth-child(2) .material-symbols-outlined{color: rgb(245, 158, 11);}
.hgh-lap-files span:nth-child(3) .material-symbols-outlined{color: rgb(16, 185, 129);}
.hgh-lap-files span:nth-child(4) .material-symbols-outlined{color: rgb(239, 68, 68);}
.hgh-lap-files span em{display: block; width: 70%; height: 6px; border-radius: 3px; background: rgb(226, 232, 240);}
.hgh-lap-base{position: relative; height: 16px; margin: 0px -24px; border-radius: 0px 0px 16px 16px; background: linear-gradient(rgb(203, 213, 225), rgb(148, 163, 184));}
.hgh-lap-base::after{content: ""; position: absolute; top: 0px; left: 50%; width: 90px; height: 6px; margin-left: -45px; border-radius: 0px 0px 8px 8px; background: rgb(100, 116, 139);}
.hgh-ph{position: absolute; bottom: 0px; inset-inline-end: 2%; width: 224px; height: 452px; border-radius: 38px; background: rgb(15, 23, 42); padding: 11px; box-shadow: rgba(15, 23, 42, 0.6) 0px 40px 80px -24px, rgb(51, 65, 85) 0px 0px 0px 2px inset;}
.hgh-ph-scr{position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: linear-gradient(rgb(248, 250, 255), rgb(238, 244, 255));}
.hgh-ph-notch{position: absolute; top: 8px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: rgb(15, 23, 42); z-index: 2;}
.hgh-ph-top{padding: 40px 16px 18px; background: linear-gradient(135deg, rgb(43, 102, 227), rgb(76, 127, 230) 60%, rgb(129, 140, 248)); color: rgb(255, 255, 255);}
.hgh-ph-top img{width: 34px; height: 34px; border-radius: 10px; display: block; margin-bottom: 12px; background: rgb(255, 255, 255);}
.hgh-ph-top b{display: block; font-size: 0.95rem; font-weight: 800;}
.hgh-ph-top em{display: block; margin-top: 8px; height: 7px; width: 60%; border-radius: 4px; background: rgba(255, 255, 255, 0.4);}
.hgh-ph-g{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px;}
.hgh-ph-g span{display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: rgb(255, 255, 255); border: 1px solid rgb(227, 234, 246); font-size: 0.72rem; font-weight: 800; color: rgb(15, 23, 42);}
.hgh-ph-g span .material-symbols-outlined{width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: rgb(255, 255, 255);}
.hgh-ph-g span:nth-child(1) .material-symbols-outlined{background: rgb(76, 127, 230);}
.hgh-ph-g span:nth-child(2) .material-symbols-outlined{background: rgb(16, 185, 129);}
.hgh-ph-g span:nth-child(3) .material-symbols-outlined{background: rgb(245, 158, 11);}
.hgh-ph-g span:nth-child(4) .material-symbols-outlined{background: rgb(139, 92, 246);}
.hgh-ph-list{padding: 0px 14px; display: flex; flex-direction: column; gap: 8px;}
.hgh-ph-list i{display: block; height: 34px; border-radius: 12px; background: rgb(255, 255, 255); border: 1px solid rgb(232, 238, 248);}
@media (max-width: 1024px){.hgh-ap-g{grid-template-columns: minmax(0px, 1fr);}
.hgh-dev{height: 460px; max-width: 560px; width: 100%; margin-inline: auto;}}
@media (max-width: 560px){.hgh-dev{height: 380px;}
.hgh-lap{width: 92%; top: 30px;}
.hgh-lap-scr{height: 220px;}
.hgh-lap-files{grid-template-columns: repeat(3, 1fr);}
.hgh-lap-files span:nth-child(4){display: none;}
.hgh-ph{width: 170px; height: 344px; border-radius: 30px; padding: 9px;}
.hgh-ph-scr{border-radius: 22px;}
.hgh-ph-top{padding: 34px 12px 14px;}
.hgh-ph-g{padding: 10px; gap: 8px;}
.hgh-ph-list{display: none;}}
[dir=rtl] .hm-head h2,[dir=rtl] .hm-h2{line-height:1.32}
.hm .hgh-wrap{max-width:1200px;padding-inline:20px}

/* v334 (Atlas): 641–1300 px — the service icons sit inside the hero (they were cut at the screen edge on tablets / small laptops) */
@media (min-width:641px) and (max-width:1300px){.hm-visual{padding-inline-end:86px}.hm-orbit{inset-inline-end:4px}}
@media (min-width:641px) and (max-width:980px){.hm-visual{max-width:606px}}
@media (min-width:641px) and (max-width:1300px){.hm-metrics{gap:7px}.hm-metrics div{padding:9px 8px}.hm-metrics b{font-size:11.5px;gap:3px}.hm-metrics b .material-symbols-outlined{font-size:14px}}
.hm-metrics{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,.7fr)}