/* واجهة الشعار بالجزيئات (hero.js) — ألوان الصفحة نفسها، والخلفية شفافة عشان يبان تدرّج الصفحة */
.sh-root{--sh-bg:var(--bg);--sh-fg:var(--ink);
  position:relative;width:100%;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;container-type:size;
  color:var(--sh-fg);touch-action:pan-y;display:flex;flex-direction:column}
.sh-root *,.sh-root *::before,.sh-root *::after{box-sizing:border-box}
.sh-stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.sh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease}
.sh-fallback{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none;transition:opacity .5s ease}
.sh-root[data-gl="on"] .sh-canvas{opacity:1}
.sh-root[data-gl="on"] .sh-fallback{opacity:0}
.sh-root[data-swap="1"] .sh-canvas,.sh-root[data-swap="1"] .sh-fallback{opacity:0;transition-duration:.25s}
.sh-backdrop{position:absolute;left:50%;z-index:0;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;user-select:none;
  font-family:'IBM Plex Sans Arabic','Readex Pro',sans-serif;font-weight:700;line-height:.8;
  color:color-mix(in srgb,var(--sh-fg) 5%,transparent)}
.sh-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px max(20px,calc((100cqw - 1120px)/2 + 20px)) 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 22px 'IBM Plex Sans Arabic',sans-serif}
.brand img{width:38px;height:38px;border-radius:10px}
html[lang="en"] .brand{font-family:'Readex Pro',sans-serif;font-weight:600}
.sh-root .store{white-space:nowrap}
.sh-links{display:flex;align-items:center;gap:clamp(16px,2.4cqw,32px);list-style:none;margin:0;padding:0}
.sh-link{text-decoration:none;font-size:14px;color:var(--muted);transition:color .2s}
.sh-link:hover{color:var(--ink)}
.sh-lang{font:inherit;font-size:14px;color:var(--muted);background:transparent;cursor:pointer;
  padding:6px 14px;border:1px solid var(--edge);border-radius:999px;transition:color .2s}
.sh-lang:hover{color:var(--ink)}
.sh-hint{position:absolute;z-index:1;transform:translate(-50%,0);display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:12px;color:var(--muted);pointer-events:none;transition:opacity .8s ease}
.sh-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kcal);animation:sh-pulse 2.4s ease-in-out infinite}
.sh-root[data-touched="1"] .sh-hint{opacity:0}
@keyframes sh-pulse{0%,100%{transform:scale(.6);opacity:.45}50%{transform:scale(1);opacity:1}}
.sh-spacer{flex:1 1 auto;min-height:0}
.sh-content{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;
  gap:clamp(24px,4cqw,64px);padding:0 max(20px,calc((100cqw - 1120px)/2 + 20px)) clamp(28px,4cqh,56px)}
.sh-root .sh-h1{font:700 clamp(40px,min(6.4cqw,11cqh),92px)/1.08 'IBM Plex Sans Arabic',sans-serif;margin:0;text-wrap:balance}
.sh-line{display:block}
.sh-accent{color:var(--kcal)}
.sh-aside{max-width:420px;justify-self:end}
.sh-root .lede{margin:0 0 24px}
@container (max-width:900px){
  .sh-content{grid-template-columns:1fr;gap:18px}
  .sh-aside{justify-self:start;max-width:520px}
  .sh-root .sh-h1{font-size:clamp(36px,min(9cqw,8cqh),76px)}
}
@container (max-width:700px){
  .sh-links li:not(.sh-keep){display:none}
}
@container (max-width:560px){
  .sh-root .sh-h1{font-size:clamp(32px,min(11cqw,6.6cqh),52px)}
  .sh-root .lede{font-size:16px;margin-bottom:18px}
}
/* الإنجليزي */
html[lang="en"] .sh-root .sh-h1{font-family:'Readex Pro',sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.02}
@media (prefers-reduced-motion:reduce){
  .sh-hint::before{animation:none}
  .sh-canvas,.sh-fallback{transition:none}
}