:root{--bg:#15110f;--bg2:#1d1815;--ink:#f6efe6;--mut:#b9aca0;--red:#ef3f4a;--yel:#f5c518;--grn:#1fa65a;--ln:#ffffff1f;--f:'Alexandria','IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;--e:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--bg);color:var(--ink);font:400 1rem/1.8 var(--f);overflow-x:hidden}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
.badge{display:grid;place-items:center;background:#fff;border-radius:50%;overflow:hidden;width:min(40vw,170px);aspect-ratio:1}.badge img{width:88%}.badge.s{width:44px}
#intro{position:fixed;inset:0;z-index:99;background:var(--bg);display:grid;place-items:center;pointer-events:none;animation:out .7s 1.05s var(--e) forwards}
#intro .badge{animation:pop .9s var(--e) both}
@keyframes pop{from{transform:scale(.6) rotate(-12deg);opacity:0}}@keyframes out{to{clip-path:inset(0 0 100% 0);visibility:hidden}}
header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:1rem;padding:.6rem 1.2rem;transition:background .4s,box-shadow .4s}
header.on{background:#15110fe6;box-shadow:0 1px var(--ln);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.2rem}
nav#nav{display:flex;gap:1.6rem;margin-inline-start:auto}nav#nav a{position:relative;font-weight:500;padding:.3rem 0}
nav#nav a:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--red);transform:scaleX(0);transition:transform .35s var(--e)}nav#nav a:hover:after{transform:scaleX(1)}
#burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}#burger i{display:block;height:2px;background:var(--ink);margin:7px 10px;transition:transform .35s var(--e)}
.btn{display:inline-block;background:var(--red);color:#fff;font:700 1rem var(--f);padding:.8rem 1.6rem;border-radius:99px;border:1px solid var(--red);cursor:pointer;transition:transform .25s var(--e),background .25s}
.btn:hover{transform:translateY(-3px)}.btn:active{transform:scale(.96)}.btn.ghost{background:transparent;border-color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:var(--bg)}.btn.sm{padding:.45rem 1.1rem}
.hero{min-height:100svh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:2rem;padding:6rem 5vw 3rem;background:radial-gradient(70% 60% at 85% 30%,#ef3f4a33,transparent),var(--bg)}
.eyebrow{color:var(--yel);letter-spacing:.05em;font-weight:500}
h1{font-weight:800;line-height:1.05;margin:.4rem 0 1rem;font-size:clamp(2.6rem,7vw,5.2rem)}h1 .big{display:block;font-size:1.9em;color:var(--red);line-height:1.1}
.w{display:inline-block;overflow:hidden}.js .w{opacity:0;transform:translateY(60%) skewY(6deg);animation:up .9s var(--d) var(--e) forwards}
@keyframes up{to{opacity:1;transform:none}}
.sub{font-size:clamp(1.1rem,2.4vw,1.5rem);color:var(--mut)}.open{display:flex;gap:.5rem;align-items:center;margin:.6rem 0 1.6rem;color:#7be0a4}.open i{width:9px;height:9px;border-radius:50%;background:var(--grn)}
.acts{display:flex;gap:.8rem;flex-wrap:wrap}.acts.col{flex-direction:column}
.hero-i{position:relative}.frame{overflow:hidden;border-radius:240px 240px 24px 24px;aspect-ratio:3/4;max-height:78vh;margin-inline:auto;box-shadow:0 30px 60px #0008;border:1px solid var(--ln)}
.js .frame{clip-path:inset(100% 0 0 0);animation:rev 1.3s .85s var(--e) forwards}@keyframes rev{to{clip-path:inset(0)}}
.frame img{width:100%;height:115%;object-fit:cover;will-change:transform}
.tag{position:absolute;width:38%;aspect-ratio:1;object-fit:cover;border-radius:18px;inset:auto auto -6% -4%;border:4px solid var(--bg);box-shadow:0 14px 30px #0009}
.sec{padding:clamp(3.5rem,9vw,7rem) 5vw}.dark{background:var(--bg2)}
.hd{margin-bottom:2rem}.hd h2,.team h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.3}.hd h2:after{content:"";display:block;width:64px;height:5px;background:linear-gradient(90deg,var(--red),var(--yel));border-radius:3px;margin-top:.4rem}.hd p{color:var(--mut)}
.rv{transition:opacity .9s var(--e),transform .9s var(--e);transition-delay:var(--d,0s)}.js .rv{opacity:0;transform:translateY(28px)}.js .rv.in{opacity:1;transform:none}
.js .hero .rv{animation:up .9s var(--d) var(--e) forwards;transition:none}
.mask{overflow:hidden;border-radius:14px}.js .mask{clip-path:inset(0 0 0 100%);transition:clip-path 1.1s var(--e)}.js .mask.in{clip-path:inset(0)}.mask img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e)}.mask:hover img{transform:scale(1.06)}
.tools{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.seg{display:flex;background:var(--bg2);border:1px solid var(--ln);border-radius:99px;padding:4px}
.seg button{background:none;border:0;color:var(--mut);font:600 .95rem var(--f);padding:.5rem 1.2rem;border-radius:99px;cursor:pointer;transition:.3s}.seg button[aria-selected=true]{background:var(--yel);color:#1a1200}
.search{flex:1;min-width:230px;position:relative}.search input{width:100%;background:var(--bg2);border:1px solid var(--ln);color:var(--ink);font:500 1rem var(--f);padding:.75rem 1.2rem;border-radius:99px}.search input:focus{border-color:var(--yel);outline:0}
#clr{position:absolute;inset-inline-start:.5rem;top:50%;translate:0 -50%;width:34px;height:34px;border-radius:50%;border:0;background:#fff2;color:var(--ink);font-size:1.3rem;cursor:pointer}
.chips{display:flex;gap:.5rem;overflow-x:auto;padding:.4rem 0 1rem;scrollbar-width:none}.chips button{flex:none;background:none;border:1px solid var(--ln);color:var(--ink);font:500 .92rem var(--f);padding:.4rem 1rem;border-radius:99px;cursor:pointer;transition:.25s}.chips button[aria-pressed=true]{background:var(--red);border-color:var(--red)}
.cat{margin-bottom:2rem;animation:fade .45s var(--e)}@keyframes fade{from{opacity:0;transform:translateY(14px)}}
.cat h3{font-size:1.5rem;color:var(--yel);padding-bottom:.4rem;border-bottom:1px solid var(--ln);margin-bottom:.4rem}
.it{display:flex;align-items:baseline;gap:.6rem;padding:.55rem 0;border-bottom:1px dashed #ffffff14;font-size:1.08rem}.it .n{font-weight:500}.it .dot{flex:1;border-bottom:2px dotted #ffffff30;translate:0 -4px}
.p{font-weight:800;color:var(--yel);white-space:nowrap}.p small{font-weight:400;color:var(--mut);font-size:.72em}
.it.t{flex-wrap:wrap}.it.t .pp{display:flex;gap:.4rem;flex-wrap:wrap;margin-inline-start:auto}.pp .c{background:var(--bg2);border:1px solid var(--ln);border-radius:10px;padding:.1rem .6rem;text-align:center;min-width:64px;line-height:1.5}.c small{display:block;color:var(--mut);font-size:.72rem}.c b{color:var(--yel)}
#none{text-align:center;color:var(--mut);padding:2rem}#none button,#clr2{background:none;border:0;color:var(--yel);font:700 1rem var(--f);text-decoration:underline;cursor:pointer}
.atm{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.atm .mask{aspect-ratio:3/4}.big-q{grid-column:1/-1;font-size:clamp(1.4rem,4vw,2.4rem);font-weight:700;max-width:22ch}.big-q em{color:var(--red);font-style:normal}
.gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:.8rem}.gal button{border:0;padding:0;cursor:zoom-in}.g1{grid-column:span 2;grid-row:span 3}.g2{grid-column:span 4;grid-row:span 2}.g3{grid-column:span 2;grid-row:span 2}.g4{grid-column:span 2;grid-row:span 2}.g5{grid-column:span 2;grid-row:span 1}
dialog{border:0;background:#000d;max-width:100vw;max-height:100vh;width:100%;height:100%;place-items:center}dialog[open]{display:grid}dialog img{max-height:88vh;object-fit:contain;animation:pop .5s var(--e)}#lbx{position:absolute;top:1rem;inset-inline-start:1rem;width:48px;height:48px;border-radius:50%;border:0;font-size:1.6rem;cursor:pointer}
.team{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}.team p{color:var(--mut);margin-top:1rem;max-width:34ch}
.rate{text-align:center}.score{font-size:clamp(4rem,14vw,8rem);font-weight:800;color:var(--yel);line-height:1}.rate p{margin:.8rem 0 1.4rem}.rate small{color:var(--mut)}
.ct{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:center;background:var(--bg2);border:1px solid var(--ln);border-radius:20px;padding:clamp(1.4rem,4vw,3rem)}.addr{font-size:1.4rem;font-weight:700;margin-bottom:.6rem}
footer{background:#0d0a09;text-align:center;padding:3rem 5vw 2rem;display:grid;gap:1rem;justify-items:center;border-top:4px solid var(--red)}footer nav{display:flex;gap:1.5rem}footer p{color:var(--mut)}
.credit{color:var(--yel)!important;letter-spacing:.08em;font-size:.9rem;padding-top:1rem;border-top:1px solid var(--ln);width:min(100%,420px)}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding-top:5.5rem;text-align:start}.hero-i{order:-1}.frame{max-height:46vh;aspect-ratio:4/3;border-radius:120px 120px 20px 20px}.tag{display:none}
#burger{display:block;margin-inline-start:auto}.btn.call{margin-inline-start:0}nav#nav{position:fixed;inset:0 0 0 0;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;font-size:1.6rem;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--e);z-index:-1}
nav#nav.open{clip-path:inset(0)}#burger[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}#burger[aria-expanded=true] i:last-child{transform:translateY(-5px) rotate(-45deg)}
.atm,.team{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.gal button{grid-column:auto!important;grid-row:span 2!important}.g2{grid-column:span 2!important}.seg{width:100%}.seg button{flex:1}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important;scroll-behavior:auto}#intro{display:none}.js .w,.js .rv,.js .mask,.js .frame{opacity:1;transform:none;clip-path:none}}

.hero.cine{display:block;position:relative;padding:0;min-height:100svh;overflow:hidden;background:#000}
.stage,.scene{position:absolute;inset:0}.scene{opacity:0;transition:opacity 1.5s ease}.scene.on{opacity:1}
.scene img{width:100%;height:100%;object-fit:cover;transform:scale(1.02)}.scene.on img{animation:kb 7s ease-out forwards}@keyframes kb{to{transform:scale(1.16) translate(1.2%,1%)}}
.cine:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000d 8%,#0000 62%),linear-gradient(90deg,#0006,#0000 70%);z-index:1}
.bar{position:absolute;inset-inline:0;background:#000;z-index:4;height:7vh;animation:bars 1.4s 1s var(--e) backwards}.bar.t{top:0}.bar.b{bottom:0}@keyframes bars{from{height:50vh}}
.dots{position:absolute;top:calc(7vh + 14px);inset-inline:5vw;display:flex;gap:6px;z-index:5}.dots i{width:28px;height:3px;background:#fff4;border-radius:2px;transition:.5s}.dots i.on{background:var(--yel)}
.cine .hero-t{position:absolute;z-index:5;inset-inline:5vw;bottom:calc(7vh + 1.4rem);max-width:640px}.cine h1{margin:.2rem 0 .6rem}.badge.big{width:84px;margin-bottom:.4rem}#cap{transition:opacity .5s;min-height:1.8em;color:#f0e6d8}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln);border-radius:16px;overflow:hidden;margin-bottom:1.6rem}.facts div{background:var(--bg2);padding:1.4rem;text-align:center}.facts b{display:block;font-size:clamp(1.6rem,4vw,2.6rem);color:var(--yel);line-height:1.2}.facts span{color:var(--mut);font-size:.92rem}
.lead{font-size:1.4rem;font-weight:700;margin-bottom:.8rem}.lnk{color:var(--yel);text-decoration:underline}.team .wide{grid-column:1/-1;aspect-ratio:21/9}
@media(max-width:820px){.facts{grid-template-columns:1fr 1fr}.cine h1{font-size:2.4rem}.cine .hero-t{inset-inline:1.2rem}}

.sec{padding:clamp(2.2rem,5vw,3.8rem) 5vw}.hd{margin-bottom:1.2rem}.cat{margin-bottom:1.2rem}.facts{margin-bottom:1rem}footer{padding-top:2rem}
.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s;z-index:1}.bgv.on{opacity:1}
.add{margin-inline-start:.2rem;width:34px;height:34px;border-radius:50%;border:0;background:var(--red);color:#fff;font:700 1.3rem/1 var(--f);cursor:pointer;transition:transform .2s}.add:active,.c:active{transform:scale(.85)}.add.ok{background:var(--grn)}
button.c{font:inherit;color:inherit;cursor:pointer}button.c:hover{border-color:var(--yel)}
#cbar{position:fixed;z-index:60;inset-inline-start:1rem;bottom:1rem;background:var(--yel);color:#1a1200;border:0;border-radius:99px;padding:.8rem 1.3rem;font:800 1rem var(--f);cursor:pointer;box-shadow:0 10px 30px #000a}
#fab{position:fixed;z-index:60;inset-inline-end:1rem;bottom:1rem;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
#fb{width:54px;height:54px;border-radius:50%;border:0;background:var(--red);color:#fff;font:700 1.8rem/1 var(--f);cursor:pointer;box-shadow:0 10px 30px #000a}
#fm{display:grid;gap:.4rem;background:var(--bg2);border:1px solid var(--ln);border-radius:16px;padding:.6rem;animation:fade .3s var(--e)}#fm[hidden]{display:none}#fm a{padding:.6rem 1rem;border-radius:10px;font-weight:600}#fm a:hover{background:#fff1}
#cart{max-width:480px;width:94vw;margin:auto;border:1px solid var(--ln);border-radius:20px;background:var(--bg2);color:var(--ink);padding:1.2rem;max-height:92vh;overflow:auto}#cart::backdrop{background:#000b}
#cart label{display:block;margin:.6rem 0;font-weight:500}#cart input:not([type=radio]){display:block;width:100%;margin-top:.2rem;background:var(--bg);border:1px solid var(--ln);color:var(--ink);font:inherit;padding:.6rem .9rem;border-radius:10px}
#cart fieldset{border:0;display:flex;gap:1rem;padding:0;margin:.4rem 0}#cx{position:absolute;inset-inline-start:.8rem;top:.8rem;background:none;border:0;color:var(--ink);font-size:1.6rem;cursor:pointer}
.cr{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px dashed var(--ln)}.cr span{flex:1}.cr button{width:30px;height:30px;border-radius:50%;border:1px solid var(--ln);background:none;color:var(--ink);cursor:pointer}
.tot{font-size:1.2rem;margin:.8rem 0}.tot b{color:var(--yel)}.hint{color:var(--mut);font-size:.85rem;margin:.6rem 0}#er{color:#ff8a8a;min-height:1.4em}#sb{width:100%}#ok{text-align:center;padding:1rem}#ok h2{color:var(--yel)}
.dev{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;padding:1rem 5vw;background:var(--bg2);border-top:1px solid var(--ln);color:var(--mut);font-size:.9rem}.dev div{display:grid;line-height:1.4;text-align:center}.dev b{color:var(--ink)}.dev a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--ln);transition:.3s}.dev a:hover{background:var(--yel);color:#1a1200}
@media(max-width:820px){#cbar{bottom:5.2rem;inset-inline:1rem}}
