/* ---------- tokens ---------- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;600;700;800&family=Noto+Kufi+Arabic:wght@400;500;700&display=swap');

:root{
  --sky-1:#9ED6F6; --sky-2:#E4F4FF;
  --sand:#F0CE94; --sand-2:#FBEBCB;
  --red:#BE1E2D; --green:#00843D; --blue:#2563EB;
  --ink:#123047; --ink-2:#41637A; --muted:#7A93A6;
  --card:#FFFFFF; --line:rgba(18,48,71,.10);
  --shadow-clay:0 18px 40px rgba(18,48,71,.14), 0 6px 14px rgba(18,48,71,.08);
  --shadow-soft:0 10px 26px rgba(18,48,71,.10);
  --r-lg:36px; --r-md:26px; --r-sm:16px;
  --font-head:'Baloo Bhaijaan 2','Noto Kufi Arabic',system-ui,sans-serif;
  --font-body:'Noto Kufi Arabic',system-ui,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--sky-2);
  direction:rtl; text-align:right; line-height:1.85; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-head); line-height:1.35; margin:0 0 .6rem}
a{color:inherit}
.wrap{width:min(1080px,92vw); margin-inline:auto}


/* ---------- background motif ---------- */
.bg{position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg,var(--sky-1) 0%, var(--sky-2) 55%, #FFF7E6 100%)}
.blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; animation:drift 18s ease-in-out infinite}
.blob.b1{width:320px;height:320px;background:#BFE7FF;top:-80px;right:-60px}
.blob.b2{width:260px;height:260px;background:var(--sand-2);bottom:8%;left:-70px;animation-delay:-6s}
.blob.b3{width:180px;height:180px;background:#D8F0E2;top:42%;right:6%;animation-delay:-11s}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,20px)}}

/* ---------- hero ---------- */
.hero{padding:clamp(2.2rem,5vw,4rem) 0 1.4rem; text-align:center}
.kicker{
  display:inline-block; background:#fff; color:var(--green); font-weight:700;
  padding:.45rem 1.1rem; border-radius:999px; box-shadow:var(--shadow-soft); font-size:.92rem;
}
.hero h1{font-size:clamp(1.9rem,5.2vw,3.2rem); font-weight:800; margin:1rem 0 .5rem; letter-spacing:-.5px}
.hero p.lead{margin:0 auto 1.1rem; max-width:44rem; color:var(--ink-2); font-size:clamp(.98rem,2.2vw,1.12rem)}
.badges{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; padding:0; margin:0; list-style:none}
.badges li{
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.35rem .95rem;
  font-size:.85rem; color:var(--ink-2); display:flex; align-items:center; gap:.4rem;
}
.badges svg{width:16px;height:16px;color:var(--green)}

/* ---------- player card ---------- */
.player{
  background:var(--card); border-radius:var(--r-lg); padding:clamp(.9rem,2vw,1.4rem);
  box-shadow:var(--shadow-clay); margin:1.4rem auto 2.4rem; position:relative;
}
.tabs{display:flex; gap:.5rem; justify-content:center; margin-bottom:.9rem; flex-wrap:wrap}
.tab{
  font-family:var(--font-body); font-size:.9rem; font-weight:700; cursor:pointer;
  border:1px solid var(--line); background:#F6FAFD; color:var(--ink-2);
  padding:.5rem 1.1rem; border-radius:999px; transition:all .25s ease;
}
.tab:hover{transform:translateY(-2px); box-shadow:var(--shadow-soft)}
.tab.active{background:var(--green); color:#fff; border-color:transparent}
.player video{width:100%; border-radius:var(--r-md); display:block; background:#0b1c26; box-shadow:var(--shadow-soft)}


.actions{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; cursor:pointer;
  padding:.7rem 1.3rem; border-radius:var(--r-sm); font-weight:700; font-size:.92rem;
  border:1px solid transparent; transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn svg{width:18px;height:18px}
.btn.primary{background:linear-gradient(135deg,var(--green),#22A05C); color:#fff}
.btn.red{background:linear-gradient(135deg,var(--red),#E24A56); color:#fff}
.btn.ghost{background:#fff; border-color:var(--line); color:var(--ink)}
.btn:hover{transform:translateY(-3px); box-shadow:var(--shadow-clay)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--blue); outline-offset:3px}

/* ---------- content cards ---------- */
.grid{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{
  background:var(--card); border-radius:var(--r-md); padding:clamp(1.1rem,2.4vw,1.8rem);
  box-shadow:var(--shadow-clay);
}
.card h2{font-size:1.28rem; display:flex; align-items:center; gap:.6rem}
.card h2 svg{width:22px;height:22px;color:var(--red)}
.card p{margin:.2rem 0 .8rem; color:var(--ink-2)}
.script-list{list-style:none; padding:0; margin:0; display:grid; gap:.65rem}
.script-list li{
  display:flex; gap:.8rem; align-items:flex-start; background:#F7FBFE;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem .9rem;
}
.time{
  flex:0 0 auto; font-family:var(--font-head); font-weight:700; font-size:.82rem;
  background:var(--ink); color:#fff; border-radius:999px; padding:.15rem .7rem;
}
.plain{list-style:none; padding:0; margin:0; display:grid; gap:.55rem}
.plain li{display:flex; gap:.6rem; align-items:flex-start}
.plain li::before{
  content:""; flex:0 0 auto; width:10px; height:10px; margin-top:.65rem; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 4px rgba(0,132,61,.12);
}
.activities{margin-top:1.2rem}
.chips{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.4rem}
.chip{
  background:var(--sand-2); border:1px solid rgba(190,30,45,.14); border-radius:999px;
  padding:.45rem 1rem; font-size:.88rem; color:#7A4A1F; font-weight:600;
}


/* ---------- animation + footer ---------- */
.reveal{opacity:0; transform:translateY(18px); animation:fadeUp .8s cubic-bezier(.2,.7,.3,1) forwards}
.reveal:nth-child(2){animation-delay:.12s}
.reveal:nth-child(3){animation-delay:.24s}
@keyframes fadeUp{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none; opacity:1; transform:none}
  .blob{animation:none}
  .btn:hover,.tab:hover{transform:none}
}
footer{padding:2.4rem 0 3rem; text-align:center; color:var(--ink-2); font-size:.88rem}
footer strong{color:var(--ink)}
footer .src{margin-top:.4rem; color:var(--muted); font-size:.82rem}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .badges li{font-size:.78rem}
  .actions .btn{width:100%; justify-content:center}
  .tabs .tab{flex:1 1 auto}
  .player{border-radius:24px}
}
@media (min-width:1024px){
  .player{padding:1.6rem}
}

/* ---------- credit line ---------- */
.hero .credit{
  display:inline-flex; align-items:center; gap:.45rem; margin:.9rem 0 0;
  background:linear-gradient(135deg,rgba(0,132,61,.10),rgba(190,30,45,.10));
  border:1px solid var(--line); border-radius:999px; padding:.4rem 1.1rem;
  font-size:.9rem; color:var(--ink-2);
}
.hero .credit strong{color:var(--ink); font-weight:800}
.hero .credit svg{width:16px; height:16px; color:var(--green)}
.note{margin:.8rem 0 0; font-size:.85rem; color:var(--muted); line-height:1.7}