/* hrai · بطاقات الترحيب للزوار الجدد — Liquid Glass
   الوضع الداكن يتبع زر الموقع (html[data-theme="dark"]) — الموقع يبدأ فاتح دائمًا. */
:root{--hob-sheet:rgba(255,255,255,.74);--hob-edge:rgba(255,255,255,.9);--hob-line:rgba(0,0,0,.06);--hob-fg:#111;--hob-sub:#555;
  --hob-art:#F4F4F4;--hob-art2:#E4E4E4;--hob-dot:#D4D4D4;--hob-btn:#111;--hob-btn-fg:#fff;--hob-ok:#22C55E;--hob-shadow:0 30px 80px -20px rgba(0,0,0,.35)}
html.dark,html[data-theme="dark"]{--hob-sheet:rgba(28,28,30,.72);--hob-edge:rgba(255,255,255,.14);--hob-line:rgba(255,255,255,.08);--hob-fg:#fff;--hob-sub:#A8A8A8;
  --hob-art:rgba(255,255,255,.05);--hob-art2:rgba(255,255,255,.1);--hob-dot:#444;--hob-btn:#fff;--hob-btn-fg:#111;--hob-shadow:0 30px 80px -20px rgba(0,0,0,.8)}

.hob{position:fixed;inset:0;z-index:9990;display:grid;place-items:center;padding:16px;direction:ltr;font-family:Tajawal,Tahoma,sans-serif;
  background:rgba(0,0,0,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:hob-fade .35s ease both}
.hob.out{animation:hob-fade .3s ease reverse both}
.hob-sheet{position:relative;width:min(420px,100%);border-radius:34px;overflow:hidden;color:var(--hob-fg);
  background:var(--hob-sheet);-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--hob-line);box-shadow:var(--hob-shadow),inset 0 1px 0 var(--hob-edge);animation:hob-in .6s cubic-bezier(.2,1.2,.4,1) both}
.hob.out .hob-sheet{animation:hob-in .3s ease reverse both}
.hob-skip{all:unset;cursor:pointer;position:absolute;top:16px;right:18px;z-index:2;font-size:14px;font-weight:700;color:var(--hob-sub);padding:6px 10px;border-radius:999px}
.hob-skip:hover{background:var(--hob-art)}
.hob-view{overflow:hidden;touch-action:pan-y;cursor:grab}
.hob-view.drag{cursor:grabbing}
.hob-track{display:flex;will-change:transform}
.hob-slide{flex:0 0 100%;padding:58px 22px 0;box-sizing:border-box;user-select:none;-webkit-user-select:none}
.hob-art{height:210px;border-radius:24px;background:var(--hob-art);display:grid;place-items:center;position:relative;overflow:hidden}
.hob-art svg{width:72%;height:auto;overflow:visible;color:var(--hob-fg)}
.hob-art .fl{stroke:var(--hob-art2)}
.hob-txt{padding:22px 6px 4px;min-height:132px}
.hob-k{font-size:13px;font-weight:700;color:var(--hob-sub);margin-bottom:6px;letter-spacing:.2px}
.hob-t{font-size:26px;font-weight:800;line-height:1.3;margin:0}
.hob-p{font-size:15.5px;line-height:1.75;color:var(--hob-sub);margin:8px 0 0}
.hob-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 22px 22px}
.hob-dots{display:flex;gap:6px}
.hob-dots i{width:7px;height:7px;border-radius:99px;background:var(--hob-dot);transition:width .35s cubic-bezier(.2,1.2,.4,1),background .3s}
.hob-dots i.on{width:22px;background:var(--hob-fg)}
.hob-next{all:unset;cursor:pointer;font-size:15px;font-weight:800;padding:13px 26px;border-radius:999px;background:var(--hob-btn);color:var(--hob-btn-fg);
  transition:transform .2s,background .3s,padding .3s}
.hob-next:active{transform:scale(.96)}
.hob-next.go{background:var(--hob-ok);color:#fff;padding:13px 30px}
.hob-note{font-size:11.5px;color:var(--hob-sub);opacity:.8;margin-top:10px}
/* حركة الرسمة: تطلع بالتتابع، والنقطة تنط */
.hob-slide .a{opacity:0;transform:translateY(10px)}
.hob-slide.on .a{animation:hob-up .6s cubic-bezier(.2,1,.3,1) forwards}
.hob-slide.on .a2{animation-delay:.08s}.hob-slide.on .a3{animation-delay:.16s}.hob-slide.on .a4{animation-delay:.24s}
.hob-slide .pop{transform-box:fill-box;transform-origin:center;transform:scale(0)}
.hob-slide.on .pop{animation:hob-pop .55s .35s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes hob-fade{from{opacity:0}}
@keyframes hob-in{from{opacity:0;transform:translateY(24px) scale(.94);filter:blur(6px)}}
@keyframes hob-up{to{opacity:1;transform:none}}
@keyframes hob-pop{to{transform:scale(1)}}
@media (max-width:520px){.hob{place-items:end center;padding:10px}.hob-sheet{border-radius:30px}.hob-art{height:190px}}
@media (prefers-reduced-motion:reduce){.hob,.hob-sheet,.hob-slide .a,.hob-slide .pop{animation:none!important;opacity:1;transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hob-sheet{background:#fff}html.dark .hob-sheet,html[data-theme="dark"] .hob-sheet{background:#1C1C1E}}