/* HMODS section banners: animated cards on the homepage + a banner at the top of each section page. */
.hm-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px clamp(14px,3vw,30px);direction:rtl}
.hm-sec{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:230px;padding:18px;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.35);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.hm-sec__bg,.hm-banner__bg{position:absolute;inset:-6%;z-index:-2;background-size:cover;background-position:18% center;animation:hmKen 16s ease-in-out infinite alternate;will-change:transform}
.hm-sec__bg{background-position:left center}
.hm-sec__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(4,8,18,.92) 0%,rgba(4,8,18,.55) 45%,rgba(4,8,18,.12) 100%)}
.hm-sec::after,.hm-banner::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 62%);transform:translateX(-120%);animation:hmShine 7s ease-in-out infinite}
.hm-sec__logo{height:46px;width:auto;max-width:78%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));animation:hmFloat 5s ease-in-out infinite}
.hm-sec__copy b{display:block;font-size:20px;line-height:1.3}
.hm-sec__copy small{display:block;font-size:13px;opacity:.82}
.hm-sec__cta{align-self:flex-start;margin-top:6px;padding:7px 14px;border-radius:999px;font-weight:800;font-size:13px;color:#071019;background:var(--hm-accent,#f5a623);box-shadow:0 0 18px var(--hm-glow,rgba(245,166,35,.45))}
.hm-sec:hover,.hm-sec:focus-visible{transform:translateY(-4px);border-color:var(--hm-accent,#f5a623);box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 26px var(--hm-glow,rgba(245,166,35,.35));outline:none}
.hm-sec--apps{--hm-accent:#f5a623;--hm-glow:rgba(14,154,167,.55)}
.hm-sec--sports{--hm-accent:#b8f34a;--hm-glow:rgba(184,243,74,.45)}
.hm-sec--cinema{--hm-accent:#d9a441;--hm-glow:rgba(217,77,120,.45)}
.hm-sec:nth-child(2) .hm-sec__bg{animation-delay:-5s}.hm-sec:nth-child(3) .hm-sec__bg{animation-delay:-10s}
.hm-sec:nth-child(2)::after{animation-delay:2.3s}.hm-sec:nth-child(3)::after{animation-delay:4.6s}

.hm-banner{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:clamp(190px,30vw,340px);margin:14px clamp(12px,3vw,30px);padding:clamp(18px,4vw,44px);border-radius:22px;border:1px solid rgba(255,255,255,.12);color:#fff;direction:rtl}
.hm-banner__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(4,8,18,.94) 0%,rgba(4,8,18,.7) 42%,rgba(4,8,18,.08) 100%)}
.hm-banner__copy{position:relative;z-index:1;max-width:min(520px,100%)}
.hm-banner__logo{display:block;height:clamp(52px,8vw,84px);width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.hm-banner__copy p{margin:10px 0 0;font-size:clamp(14px,1.6vw,17px);line-height:1.8;opacity:.9}

.hm-banner--under-header{margin-top:90px}
.hm-banner__bg{background-position:left center}
.hm-back{position:fixed;z-index:9990;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22)!important;background:rgba(8,14,28,.82)!important;color:#fff!important;box-sizing:border-box;font:700 14px system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;direction:rtl;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .2s ease,background .2s ease}
.hm-back:hover,.hm-back:focus-visible{transform:translateY(-2px);background:rgba(20,32,58,.94)!important;outline:2px solid #f5a623;outline-offset:2px}
@media (max-width:760px){.hm-back span{display:none}.hm-back{width:46px;padding:0;justify-content:center}}
@keyframes hmKen{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.12) translate3d(-2.5%,-1.5%,0)}}
@keyframes hmShine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
@keyframes hmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

@media (max-width:760px){.hm-sections{grid-template-columns:1fr;gap:12px}.hm-sec{min-height:180px}.hm-banner__shade{background:linear-gradient(0deg,rgba(4,8,18,.94) 0%,rgba(4,8,18,.6) 55%,rgba(4,8,18,.15) 100%)}.hm-banner{align-items:flex-end}}
@media (prefers-reduced-motion:reduce){.hm-sec__bg,.hm-banner__bg,.hm-sec::after,.hm-banner::after,.hm-sec__logo{animation:none!important}}
body:not(.admin-page) .hm-back.hm-back.hm-back{background:rgba(8,14,28,.82)!important;color:#fff!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:999px!important;box-shadow:0 8px 24px rgba(0,0,0,.4)!important}

/* ---------- banner slider */
.hm-slider{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(240px,40vw,460px);margin:14px clamp(12px,3vw,30px);border-radius:22px;border:1px solid rgba(255,255,255,.12);background:#071022;direction:rtl}
.hm-slide{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(18px,4vw,48px);opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.hm-slide.is-active{opacity:1;visibility:visible;transition:opacity .9s ease}
.hm-slide::before{content:"";position:absolute;inset:-4%;z-index:-2;background:var(--img) left center/cover no-repeat,radial-gradient(ellipse at 20% 40%,rgba(30,139,255,.5),transparent 55%),#071022}
.hm-slide.is-active::before{animation:hmKen 9s ease-out forwards}
.hm-slide::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(4,8,18,.94) 0%,rgba(4,8,18,.66) 42%,rgba(4,8,18,.05) 100%)}
.hm-slide__copy{max-width:min(520px,100%);color:#fff;transform:translateY(14px);opacity:0;transition:transform .7s ease .25s,opacity .7s ease .25s}
.hm-slide.is-active .hm-slide__copy{transform:none;opacity:1}
.hm-slide__copy small{display:inline-block;font-weight:800;letter-spacing:.06em;color:var(--hm-accent,#b8f34a);font-size:12px;margin-bottom:6px}
.hm-slide__copy h2{margin:0;font-size:clamp(24px,4.4vw,44px);line-height:1.2;text-wrap:balance}
.hm-slide__copy p{margin:10px 0 16px;font-size:clamp(14px,1.7vw,17px);line-height:1.8;opacity:.9}
.hm-slide__actions{display:flex;gap:8px;flex-wrap:wrap}
.hm-slide__cta{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;font-weight:800;text-decoration:none;color:#06101f;background:var(--hm-accent,#b8f34a);box-shadow:0 0 22px var(--hm-glow,rgba(184,243,74,.4))}
.hm-slide__cta--ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none}
.hm-slider__dots{position:absolute;z-index:2;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
body:not(.admin-page) .hm-slider__dots button{width:9px;height:9px;min-width:0;padding:0!important;border-radius:999px!important;border:0!important;background:rgba(255,255,255,.4)!important;box-shadow:none!important;transition:width .3s}
body:not(.admin-page) .hm-slider__dots button[aria-current="true"]{width:26px;background:var(--hm-accent,#b8f34a)!important}
.hm-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 clamp(12px,3vw,30px);direction:rtl}
@media (max-width:900px){.hm-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hm-slider{min-height:340px}.hm-slide{align-items:flex-end}.hm-slide::after{background:linear-gradient(0deg,rgba(4,8,18,.95) 0%,rgba(4,8,18,.6) 55%,rgba(4,8,18,.1) 100%)}}
@media (max-width:420px){.hm-tools{grid-template-columns:1fr 1fr;gap:8px}.hm-tools .hm-sec{min-height:150px;padding:12px}.hm-tools .hm-sec__copy b{font-size:15px}.hm-tools .hm-sec__copy small{display:none}.hm-tools .hm-sec__cta{display:none}}
@media (prefers-reduced-motion:reduce){.hm-slide.is-active::before{animation:none}.hm-slide,.hm-slide__copy{transition:none}}

.hm-sec--live{--hm-accent:#ff3b5c;--hm-glow:rgba(255,59,92,.45)}.hm-sec--rewards{--hm-accent:#f5c542;--hm-glow:rgba(245,197,66,.45)}.hm-sec--table{--hm-accent:#1e8bff;--hm-glow:rgba(30,139,255,.45)}
.hm-tools .hm-sec{min-height:180px}
.hm-slider.hm-banner--under-header{margin-top:90px}