/* الصفحة الرئيسية: الخدمات، لماذا مدار، شغّل عقدة (تصميم 2026-10-04). */
.hs-group { font-size: 15px; color: var(--muted); font-weight: 600; margin: 30px 0 14px; display: flex; align-items: center; gap: 12px; }
.hs-group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hs-card { display: flex; flex-direction: column; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .2s, transform .2s; }
.hs-card:hover { border-color: rgba(230, 233, 240, .5); transform: translateY(-2px); }
.hs-shot { height: 150px; overflow: hidden; background: #0a0a0c; border-bottom: 1px solid var(--line); }
.hs-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hs-body { padding: 14px 16px 16px; }
.hs-card h4 { margin: 0 0 4px; font-size: 17px; }
.hs-card p { margin: 0; color: var(--muted); font-size: 14px; }
.hs-go { display: inline-block; margin-top: 8px; color: #e2e4e9; font-size: 14px; font-weight: 600; }
.hs-dev { padding: 14px 16px 16px; }
.hs-ui { height: 150px; overflow: hidden; background: #0a0a0c; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: 12.5px; }
.hs-ltr { direction: ltr; text-align: left; }
.hs-verdict { border-color: rgba(248, 113, 113, .4); }
.v-head { color: var(--bad); font-weight: 700; font-size: 15px; }
.v-line { margin-top: 8px; color: #c9cbd1; }
.v-find { margin-top: 8px; background: rgba(248, 113, 113, .09); border: 1px solid rgba(248, 113, 113, .3); border-radius: 8px; padding: 6px 8px; color: #fecaca; font-size: 12.5px; }
.v-sig { margin-top: 8px; color: var(--good); font-size: 12px; }
.n-app { color: var(--muted); font-size: 11.5px; }
.n-title { font-weight: 700; margin-top: 2px; }
.n-title.ok { color: var(--good); margin-top: 10px; }
.n-body { color: var(--muted); font-size: 12px; }
.r-row { display: flex; gap: 12px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.r-row:last-child { border-bottom: 0; }
.r-row b { width: 30px; color: #e2e4e9; font-family: Consolas, monospace; }
.r-row.hi { background: rgba(230, 233, 240, .1); border-radius: 8px; }
.r-row em { margin-left: auto; color: var(--good); font-style: normal; }

.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 22px; }
.why-card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px 20px; }
.why-card h3 { font-size: 18px; margin: 16px 0 6px; }
.why-card p { color: var(--muted); font-size: 14.5px; margin: 0; }
.why-vis { height: 96px; border-radius: 14px; background: #0a0a0c; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; direction: ltr; }
.why-vis.votes { align-items: flex-end; padding: 16px 22px 0; gap: 8px; }
.why-vis.votes i { flex: 1; height: 62px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, rgba(230, 233, 240, .6), rgba(230, 233, 240, .15)); }
.why-vis.chain { gap: 0; }
.why-vis.chain b { width: 30px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; color: var(--good); background: rgba(230, 233, 240, .14); border: 1px solid rgba(230, 233, 240, .4); }
.why-vis.chain b + b { margin-left: 8px; position: relative; }
.why-vis.chain b + b::before { content: ""; position: absolute; left: -9px; top: 12px; width: 8px; height: 1px; background: rgba(230, 233, 240, .5); }
.why-vis.chain b.now { border-style: dashed; background: transparent; }
.why-vis.devices { gap: 18px; }
.why-vis.devices svg { width: 34px; height: 34px; stroke: #e2e4e9; fill: none; stroke-width: 1.6; }
.why-vis.heal { gap: 0; }
.why-vis.heal span { width: 18px; height: 18px; border-radius: 50%; }
.why-vis.heal .bad { background: var(--bad); } .why-vis.heal .warn { background: var(--warn); } .why-vis.heal .good { background: var(--good); box-shadow: 0 0 0 5px rgba(52, 211, 153, .15); }
.why-vis.heal em { width: 34px; height: 2px; background: linear-gradient(90deg, rgba(142, 154, 176, .2), rgba(142, 154, 176, .6)); }
.trust-row { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; background: var(--panel-solid); }
.trust-row > * { padding: 16px 20px; border-inline-start: 1px solid var(--line); }
.trust-row > *:first-child { border-inline-start: 0; }
.trust-row b { display: block; font-size: 15px; }
.trust-row span { color: var(--muted); font-size: 13px; }
.trust-row a:hover b { color: #e2e4e9; }

.run-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-top: 22px; align-items: start; }
.run-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.run-steps li { counter-increment: s; position: relative; padding-bottom: 26px; padding-inline-start: 56px; }
.run-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(230, 233, 240, .14); border: 1px solid rgba(230, 233, 240, .45); color: #e2e4e9; font-weight: 700; }
.run-steps li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 19px; top: 42px; bottom: 4px; width: 1px; background: var(--line-2); }
.run-steps b { display: block; font-size: 17.5px; }
.run-steps span { color: var(--muted); font-size: 15px; }
.run-box { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 8px; }
.run-box .btn { width: 100%; justify-content: center; }
.run-meta { color: var(--muted); font-size: 12.5px; text-align: center; margin-bottom: 8px; }
.run-verify summary { color: #e2e4e9; font-size: 13.5px; text-align: center; cursor: pointer; }
.run-verify p { color: var(--muted); font-size: 13px; }

@media (max-width: 960px) {
  .hs-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .run-grid { grid-template-columns: 1fr; }
  .trust-row { grid-template-columns: 1fr 1fr; }
  .trust-row > *:nth-child(3) { border-inline-start: 0; }
  .trust-row > *:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .hs-grid, .why-grid { grid-template-columns: 1fr; }
  .hs-shot, .hs-ui { height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .hs-card { transition: none; } }

/* عنوان الواجهة: سطران ثابتان (لا يلتف السطر الثاني) */
.hero h1 { font-size: clamp(32px, 4.3vw, 54px); }
.hero h1 .grad { white-space: nowrap; }
@media (max-width: 420px) { .hero h1 .grad { white-space: normal; } }

.hs-shot { position: relative; }
.hs-soon { position: absolute; bottom: 10px; inset-inline-start: 10px; z-index: 1; font-size: 12px; font-weight: 700; color: #ffd98a; background: rgba(10, 10, 12, .85); border: 1px solid rgba(255, 200, 87, .45); border-radius: 999px; padding: 3px 10px; }

/* الشعار الكبير: نسبة أبعاده ثابتة (وسم width/height يحجز المساحة فقط) */
.hero-logo img { height: auto; aspect-ratio: 610 / 440; }

/* developer services: compact cards (icon, title, one line, badge) */
.hs-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hs-mini { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px 16px 16px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s, transform .2s; }
.hs-mini:hover { border-color: rgba(230, 233, 240, .5); transform: translateY(-2px); }
.mi-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(230, 233, 240, .12); color: #e2e4e9; }
.hs-mini.paid .mi-ico { background: rgba(255, 200, 87, .12); color: #ffd98a; }
.hs-mini.all .mi-ico { background: transparent; border: 1px dashed var(--line); }
.mi-body { display: grid; gap: 3px; min-width: 0; }
.mi-body b { font-size: 15.5px; line-height: 1.35; }
.mi-body span { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.mi-badge { grid-column: 2; justify-self: start; margin-top: 4px; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: rgba(52, 211, 153, .12); color: #34d399; }
.hs-mini.paid .mi-badge { background: rgba(255, 200, 87, .12); color: #ffd98a; }
.hs-shot { height: 128px; }
@media (max-width: 900px) { .hs-mini-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hs-mini-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .hs-mini { transition: none; } }
/* Madar Names card: a drawn before/after instead of a screenshot */
.hs-featured { border-color: rgba(255, 200, 87, .4); }
.hs-featured:hover { border-color: rgba(255, 200, 87, .7); }
.hs-names { display: grid; align-content: center; gap: 8px; padding: 14px 18px; direction: ltr; background: linear-gradient(135deg, rgba(230, 233, 240, .2), rgba(255, 200, 87, .1)), #0a0a0c; }
.hs-names .nm-old { font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: #7c7f87; text-decoration: line-through; text-decoration-color: rgba(248, 113, 113, .6); }
.hs-names .nm-new { display: flex; align-items: center; gap: 0; font-size: 26px; font-weight: 800; color: #f1f2f4; }
.hs-names .nm-new span { color: #ffd98a; }
.hs-names .nm-new i { margin-left: 10px; font-style: normal; font-size: 13px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #34d399; color: #032; }
.hs-new { position: absolute; top: 10px; right: 10px; font-size: 12px; font-weight: 700; color: #1a1205; background: linear-gradient(120deg, #ffe29a, #ffb84d); border-radius: 999px; padding: 2px 10px; }

/* ---- visual refresh with the gold touch (owner 2026-10-10): every download button gold like Windows, warmer "why"
   pictures, gold step numbers, cards that light up on hover ---- */
.run-box .btn, .dl .btn { background: var(--gold-btn); color: #1a1205; border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 28px rgba(0, 0, 0, .45); }
.run-box .btn:hover, .dl .btn:hover { filter: brightness(1.06); }
.run-box { background: linear-gradient(180deg, rgba(255, 200, 87, .05), rgba(255, 200, 87, 0) 55%), var(--panel-solid); border-color: rgba(255, 200, 87, .22); }
.run-steps li::before { background: var(--gold-btn); border: 0; color: #1a1205; box-shadow: 0 0 0 4px rgba(255, 200, 87, .1); }
.run-steps li:not(:last-child)::after { background: linear-gradient(180deg, rgba(255, 200, 87, .45), rgba(255, 200, 87, .08)); }

.why-card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 40%), var(--panel-solid); transition: border-color .2s, transform .2s; }
.why-card:hover { border-color: rgba(255, 200, 87, .35); transform: translateY(-2px); }
.why-vis { background: radial-gradient(160px 70px at 50% 100%, rgba(255, 200, 87, .10), transparent 70%), #0a0a0c; }
.why-vis.votes i { background: linear-gradient(180deg, #f7f8fa 0%, #c9ccd3 30%, rgba(201, 204, 211, .12) 100%); }
.why-vis.votes i:nth-child(2) { background: linear-gradient(180deg, #ffe7a8 0%, #ffc857 30%, rgba(255, 200, 87, .12) 100%); }
.why-vis.chain b { color: #1a1205; background: var(--gold-btn); border: 0; }
.why-vis.chain b + b::before { background: rgba(255, 200, 87, .6); }
.why-vis.chain b.now { background: transparent; border: 1px dashed rgba(255, 200, 87, .6); }
.why-vis.devices svg { stroke: #ffd98a; }
.why-vis.heal em { background: linear-gradient(90deg, rgba(201, 204, 211, .2), rgba(201, 204, 211, .6)); }

.trust-row { background: linear-gradient(90deg, rgba(255, 200, 87, .04), rgba(255, 255, 255, .015)), var(--panel-solid); }
.trust-row b { color: #f1f2f4; }
.trust-row b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffc857; margin-inline-end: 8px; vertical-align: middle; box-shadow: 0 0 8px rgba(255, 200, 87, .6); }
.trust-row a:hover b { color: #ffd98a; }
.hs-card:hover, .hs-mini:hover { border-color: rgba(255, 200, 87, .4); }
.mi-ico { background: rgba(255, 200, 87, .1); color: #ffd98a; }
.run-guide { text-align: center; font-size: 13.5px; color: #ffd98a; text-decoration: none; margin: -2px 0 10px; }
.run-guide:hover { text-decoration: underline; }

/* سحب محفظة مدار (2026-10-16): شريط أعلى الصفحة، يختفي بعد إغلاق المشاركة */