/* ============================================================
   ظَفَارُ… حِكَايَاتٌ مِنَ التُّرَاثِ — الأنماط
   ============================================================ */
@font-face{font-family:Cairo;src:url(../assets/fonts/cairo.ttf) format('truetype');font-weight:300 900;font-display:swap}
:root{
 --green:#174d3e;--green2:#2f6c56;--deep:#0b2f26;--ink:#1e3a31;--cream:#faf8f2;--sand:#f3e3c3;--gold:#e9b56c;--gold2:#cc8d45;--red:#c8102e;--muted:#6b7a70;--line:#e2e6d8;
 --c:#2457b8;--c2:#0d2a6b;--cs:#e8eefb; /* لون القسم الحالي */
 --nav-h:76px;--shadow:0 24px 50px -28px rgba(23,77,62,.6);
 --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.3,1.5,.5,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:Cairo,'Segoe UI',Tahoma,sans-serif;line-height:1.8;overflow-x:hidden}
html.lock,html.lock body{overflow:hidden}
img,video,svg{max-width:100%}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}

/* ---------- الخلفية الحيّة للمنصّة ---------- */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(#f7e6c8 0%,#dcecee 38%,#bfe0e6 62%,#9ccfd6 100%)}
.scene svg{position:absolute;inset:0;width:100%;height:100%;stroke:none}
.scene .cloud{fill:#fff;opacity:.85;animation:cloudRun 90s linear infinite}
.scene .cloud.c2{animation-duration:130s;animation-delay:-50s;opacity:.6}
.scene .cloud.c3{animation-duration:110s;animation-delay:-80s;opacity:.7}
@keyframes cloudRun{from{transform:translateX(-30%)}to{transform:translateX(130%)}}
.scene .wave{animation:waveMove 9s ease-in-out infinite alternate}
.scene .wave.w2{animation-duration:12s;animation-direction:alternate-reverse}
@keyframes waveMove{to{transform:translateX(-60px)}}
.scene .dhow{animation:dhow 70s linear infinite}
@keyframes dhow{from{transform:translateX(-300px)}to{transform:translateX(1900px)}}
.scene .palm{transform-box:fill-box;transform-origin:50% 100%;animation:sway 6s ease-in-out infinite alternate}
.scene .palm.p2{animation-duration:8s;animation-delay:-3s}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.8deg)}}
.scene .mist{animation:mist 22s ease-in-out infinite alternate}
@keyframes mist{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.scene .sunray{transform-origin:20% 8%;animation:rays 16s ease-in-out infinite alternate}
@keyframes rays{from{opacity:.25;transform:rotate(-3deg)}to{opacity:.6;transform:rotate(3deg)}}
.scene::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(11,47,38,.22));pointer-events:none}
body[data-view]:not([data-view=hub]) .scene{filter:saturate(.6) brightness(1.05)}
#motes{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ---------- شريط التبويبات ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:var(--nav-h);padding:10px clamp(14px,3vw,38px);background:rgba(250,248,242,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(23,77,62,.1);box-shadow:0 14px 30px -26px rgba(23,77,62,.7)}
.brand{display:flex;align-items:center;gap:11px;font-weight:900;line-height:1.25;white-space:nowrap}
.brand-mark{width:46px;height:46px;border-radius:15px 15px 4px 15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--green2));color:#f3d49b;box-shadow:0 10px 22px -10px rgba(23,77,62,.8);transition:transform .6s var(--spring)}
.brand:hover .brand-mark{transform:rotate(-10deg) scale(1.07)}
.brand-mark svg{width:26px;height:26px}
.brand b{display:block;font-size:17px;color:var(--green)}
.brand small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.tabs{position:relative;display:flex;align-items:center;gap:3px;padding:5px;border-radius:999px;background:rgba(23,77,62,.07);border:1px solid rgba(23,77,62,.09)}
.tabs a{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:10px 17px;border-radius:999px;font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap;transition:color .35s,transform .35s;overflow:hidden}
.tabs a svg{width:18px;height:18px;transition:transform .5s var(--spring)}
.tabs a:hover{transform:translateY(-1px);color:var(--green)}
.tabs a:hover svg{transform:rotate(-12deg) scale(1.12)}
.tabs a.on{color:#fff}
.glider{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:linear-gradient(135deg,var(--tabc,var(--green)),var(--tabc2,var(--green2)));box-shadow:0 12px 24px -10px var(--tabc,var(--green));transition:left .6s cubic-bezier(.7,0,.2,1),width .6s cubic-bezier(.7,0,.2,1),background .4s;z-index:0}
.ripple{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:rgba(233,181,108,.6);pointer-events:none;animation:rip .65s ease-out forwards}
@keyframes rip{to{transform:scale(12);opacity:0}}
.top-actions{display:flex;align-items:center;gap:8px}
.chip-stamps{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:800;font-size:13px}
.chip-stamps svg{width:17px;height:17px;color:var(--gold2)}
.chip-stamps b{color:var(--green)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(23,77,62,.08);border:1px solid rgba(23,77,62,.12);color:var(--green);transition:transform .35s var(--spring),background .3s}
.icon-btn:hover{transform:scale(1.1) rotate(-8deg);background:rgba(23,77,62,.14)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .off,html.muted .icon-btn .on{display:none}
html.muted .icon-btn .off{display:block}
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:linear-gradient(90deg,var(--gold),var(--green2),var(--gold));transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ---------- التبويبات السفلية للجوال ---------- */
.btabs{display:none}
@media(max-width:980px){
 .tabs{display:none}
 .brand small{display:none}
 .btabs{display:flex;position:fixed;bottom:10px;left:10px;right:10px;z-index:60;padding:7px;gap:3px;border-radius:24px;background:rgba(250,248,242,.95);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(23,77,62,.55)}
 .btabs a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:17px;font-size:10.5px;font-weight:800;color:var(--muted);overflow:hidden;transition:background .4s,color .4s,transform .4s var(--spring)}
 .btabs svg{width:20px;height:20px;transition:transform .5s var(--spring)}
 .btabs a.on{background:linear-gradient(135deg,var(--tabc,var(--green)),var(--tabc2,var(--green2)));color:#fff;transform:translateY(-3px);box-shadow:0 10px 20px -8px var(--tabc,var(--green))}
 .btabs a.on svg{transform:scale(1.15)}
 main{padding-bottom:110px}
}

/* ============================================================
   صفحة البداية
   ============================================================ */
.gate{position:fixed;inset:0;z-index:100;overflow:hidden;color:#faf8f2;background:radial-gradient(ellipse at 50% 42%,#2b6a58 0%,#174d3e 40%,#0b2f26 100%);display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;row-gap:clamp(4px,1.2vh,12px);padding:clamp(10px,2vh,22px) clamp(10px,3vw,40px);transition:opacity .9s ease,transform 1.1s var(--ease),filter .9s}
.gate.leaving{opacity:0;transform:scale(1.25);filter:blur(10px);pointer-events:none}
.g-lattice{position:absolute;inset:-20%;opacity:.05;background-image:linear-gradient(45deg,var(--gold) 25%,transparent 25%),linear-gradient(-45deg,var(--gold) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--gold) 75%),linear-gradient(-45deg,transparent 75%,var(--gold) 75%);background-size:64px 64px;background-position:0 0,0 32px,32px -32px,-32px 0;animation:latt 40s linear infinite}
@keyframes latt{to{transform:translate(64px,64px)}}
.g-glow{position:absolute;left:50%;top:46%;width:80vmin;height:80vmin;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(233,181,108,.34),transparent 62%);animation:glow 6s ease-in-out infinite}
@keyframes glow{50%{scale:1.18;opacity:.7}}
#gmotes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gate>*{position:relative;z-index:2}
.gate .g-lattice,.gate .g-glow,.gate #gmotes{position:absolute;z-index:0}
.g-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}
.siraj{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 6px;border-radius:999px;background:rgba(250,248,242,.1);border:1px solid rgba(233,181,108,.4);backdrop-filter:blur(8px);font-size:12.5px;font-weight:800;color:#f3e3c3;animation:fadeDown 1s var(--ease) .3s both}
.siraj span.t{display:grid;place-items:center;width:62px;height:30px;border-radius:99px;background:#fff;padding:3px 7px}
.siraj img{max-height:100%;max-width:100%;object-fit:contain}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.g-sound{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(250,248,242,.1);border:1px solid rgba(233,181,108,.5);color:#fff;backdrop-filter:blur(8px)}
.g-sound svg{width:21px;height:21px}
.g-sound .off,html.muted .g-sound .on{display:none}
html.muted .g-sound .off{display:block}

/* المسرح الدائري */
.orbit-stage{--S:min(88vw,62vh);--tw:calc(var(--S)*.25);--th:calc(var(--S)*.165);position:relative;align-self:center;width:var(--S);height:var(--S);max-width:720px;max-height:720px}
@media(max-width:700px){.orbit-stage{--S:min(94vw,54vh);--tw:calc(var(--S)*.27);--th:calc(var(--S)*.18)}}
.ring-svg{position:absolute;inset:-4%;width:108%;height:108%;stroke:none;animation:spin 80s linear infinite;opacity:.9}
.ring-svg text{fill:#e9b56c;font:700 15.5px Cairo,sans-serif;letter-spacing:.14em}
.ring-svg circle{fill:none;stroke:rgba(233,181,108,.35);stroke-width:1.2;stroke-dasharray:3 9}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
.orbit-wrap{position:absolute;inset:0;animation:orbitIn 2.4s var(--ease) .5s both}
@keyframes orbitIn{from{opacity:0;transform:scale(2.4) rotate(160deg)}to{opacity:1;transform:none}}
.orbit{position:absolute;inset:0;animation:spin 70s linear infinite 3s}
.tile{position:absolute;left:50%;top:50%;width:var(--tw);height:var(--th);margin:calc(var(--th)/-2) 0 0 calc(var(--tw)/-2);transform:rotate(var(--a)) translateY(calc(var(--S)*-.5 + var(--th)*.62));}
.tile .face{position:absolute;inset:0;border-radius:calc(var(--th)*.3);background:#fff;display:grid;place-items:center;padding:calc(var(--th)*.12) calc(var(--tw)*.07);box-shadow:0 18px 36px -14px rgba(0,0,0,.6),0 0 0 3px rgba(233,181,108,.75);animation:spinr 70s linear infinite 3s}
.tile .face::after{content:'';position:absolute;inset:-9px;border-radius:calc(var(--th)*.38);border:2px solid rgba(233,181,108,.55);opacity:0;animation:ringOut 3s ease-out infinite}
.tile:nth-child(2) .face::after{animation-delay:.75s}.tile:nth-child(3) .face::after{animation-delay:1.5s}.tile:nth-child(4) .face::after{animation-delay:2.25s}
@keyframes ringOut{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.25)}}
.tile img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tile.photo .face{padding:0;overflow:hidden}
.tile.photo img{width:100%;height:100%;object-fit:cover}
.medal{position:absolute;left:50%;top:50%;width:calc(var(--S)*.5);height:calc(var(--S)*.5);translate:-50% -50%;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 50% 35%,#fffaf0,#f6e8c8 70%,#ebd29b);color:var(--deep);box-shadow:0 0 0 4px #e9b56c,0 0 0 9px rgba(233,181,108,.28),0 30px 80px -20px rgba(0,0,0,.7),inset 0 0 40px rgba(204,141,69,.35);animation:medalIn 1.6s var(--ease) 1s both;overflow:hidden}
@keyframes medalIn{from{clip-path:circle(0%);transform:rotate(-200deg) scale(.4)}to{clip-path:circle(75%);transform:none}}
.medal::before{content:'';position:absolute;inset:7px;border-radius:50%;border:2px dashed rgba(204,141,69,.7);animation:spin 36s linear infinite}
.medal::after{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,transparent 0 78%,rgba(255,255,255,.7) 88%,transparent 100%);animation:spin 5s linear infinite 2.6s;mix-blend-mode:soft-light;border-radius:50%}
.medal-in{position:relative;z-index:1;padding:0 8%}
.medal .ico{display:block;width:calc(var(--S)*.1);height:calc(var(--S)*.07);margin:0 auto 1%;color:#cc8d45;animation:fadeUp 1s var(--ease) 2s both}
.g-title{margin:0;font-weight:900;line-height:1.28;perspective:800px}
.g-title .w{display:inline-block;animation:wordSwirl 1.5s var(--ease) both;animation-delay:calc(var(--i)*.22s + 1.5s)}
@keyframes wordSwirl{from{opacity:0;transform:rotate(calc(var(--a)*1deg)) translateY(-240px) rotate(calc(var(--a)*-1deg)) scale(.15)}to{opacity:1;transform:none}}
.g-title .l1{display:block;font-size:calc(var(--S)*.115);color:var(--green);letter-spacing:-.01em;background:linear-gradient(90deg,#174d3e,#2f6c56,#cc8d45,#174d3e);background-size:250% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wordSwirl 1.5s var(--ease) 1.5s both,shine 6s linear 3.2s infinite}
.g-title .l2{display:block;font-size:calc(var(--S)*.062);color:#6b4a1d}
@keyframes shine{to{background-position:250% center}}
.g-sub{margin:calc(var(--S)*.012) 0 0;font-size:calc(var(--S)*.027);font-weight:700;color:#7a5a2a;line-height:1.55;animation:fadeUp 1s var(--ease) 2.6s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* زر الاستماع */
.listen{position:relative;display:inline-flex;align-items:center;gap:13px;padding:8px 20px 8px 9px;border-radius:999px;border:1.5px solid rgba(233,181,108,.75);background:linear-gradient(135deg,rgba(233,181,108,.22),rgba(250,248,242,.07));color:#faf8f2;font:800 14.5px Cairo,sans-serif;backdrop-filter:blur(8px);box-shadow:0 14px 34px -14px rgba(233,181,108,.55);animation:fadeUp 1s var(--spring) 3.2s both;transition:transform .35s var(--spring),box-shadow .3s,background .3s}
.listen:hover{transform:translateY(-3px) scale(1.04)}
.listen .disc{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#e9b56c,#cc8d45);color:#3a2410;box-shadow:0 6px 14px -4px rgba(0,0,0,.45)}
.listen .disc svg{width:21px;height:21px;position:relative;z-index:1}
.listen .disc::before,.listen .disc::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #e9b56c;opacity:0;animation:lring 2.4s ease-out infinite}
.listen .disc::after{animation-delay:1.2s}
@keyframes lring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.1)}}
.listen .tx{display:grid;line-height:1.45;text-align:right}
.listen .tx small{font-size:11px;color:#f0d9a8;font-weight:700}
.listen .t-on,.listen .on-ic{display:none}
html:not(.muted) .listen .t-on,html:not(.muted) .listen .on-ic{display:grid}
html:not(.muted) .listen .t-off,html:not(.muted) .listen .off-ic{display:none}
html:not(.muted) .listen{background:linear-gradient(135deg,rgba(31,143,104,.35),rgba(250,248,242,.07));border-color:rgba(143,211,196,.85)}
.listen .eq{display:none;align-items:flex-end;gap:3px;height:18px}
html:not(.muted) .listen .eq{display:inline-flex}
.listen .eq i{width:4px;height:100%;border-radius:3px;background:#e9b56c;transform-origin:bottom;animation:eq 1s ease-in-out infinite alternate}
.listen .eq i:nth-child(2){animation-delay:-.3s}.listen .eq i:nth-child(3){animation-delay:-.6s}.listen .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}

/* الشريط السفلي المميز */
.g-bottom{width:min(1100px,100%);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,2vw,24px);align-items:center;margin-bottom:clamp(4px,1vh,14px)}
.plaque{position:relative;padding:12px 20px 12px 16px;border-radius:20px;background:linear-gradient(135deg,rgba(250,248,242,.13),rgba(250,248,242,.04));border:1.5px solid rgba(233,181,108,.55);backdrop-filter:blur(10px);box-shadow:0 20px 40px -22px #000,inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden}
.plaque::before{content:'';position:absolute;top:0;bottom:0;right:0;width:6px;background:linear-gradient(var(--gold),var(--gold2))}
.plaque.left::before{right:auto;left:0}
.plaque::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-130%);animation:plShine 5s ease-in-out 4s infinite}
@keyframes plShine{40%,100%{transform:translateX(130%)}}
.plaque small{display:block;font-size:12px;color:var(--gold);font-weight:800;letter-spacing:.06em}
.plaque b{display:block;font-size:clamp(14px,1.8vw,19px);font-weight:900;line-height:1.5}
.plaque.right{animation:plR 1.2s var(--ease) 3.4s both;padding-right:22px}
.plaque.left{animation:plL 1.2s var(--ease) 3.6s both;text-align:left;direction:rtl;padding-left:22px}
.plaque.left small,.plaque.left b{text-align:right}
@keyframes plR{from{opacity:0;transform:translateX(-90px) skewX(-8deg)}to{opacity:1;transform:none}}
@keyframes plL{from{opacity:0;transform:translateX(90px) skewX(8deg)}to{opacity:1;transform:none}}
.cta{position:relative;display:inline-flex;align-items:center;gap:12px;padding:15px clamp(26px,4vw,46px);border-radius:999px;border:0;background:linear-gradient(135deg,#e9b56c,#cc8d45);color:#173a30;font:900 clamp(16px,2vw,20px) Cairo,sans-serif;box-shadow:0 18px 40px -12px rgba(233,181,108,.65);animation:ctaIn 1s var(--spring) 3.8s both;transition:transform .35s var(--spring),box-shadow .35s}
.cta::before,.cta::after{content:'';position:absolute;inset:-8px;border-radius:999px;border:2px solid #e9b56c;opacity:0;animation:lring 2.4s ease-out infinite 4.6s}
.cta::after{animation-delay:5.8s}
.cta:hover{transform:translateY(-3px) scale(1.05)}
.cta svg{width:22px;height:22px;transition:transform .4s}
.cta:hover svg{transform:translateX(-6px)}
@keyframes ctaIn{from{opacity:0;transform:scale(.4) rotate(-6deg)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .g-bottom{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "c c"}
 .g-bottom .plaque.right{grid-area:a}.g-bottom .plaque.left{grid-area:b}.g-bottom .cta{grid-area:c;justify-self:center}
 .plaque{padding:9px 12px}.plaque b{font-size:13px}.plaque small{font-size:10.5px}
 .siraj{font-size:11px}
}
@media(max-height:620px){.g-sub{display:none}}

/* ============================================================
   الصفحات
   ============================================================ */
main{position:relative;z-index:2}
.view{display:none;min-height:calc(100svh - var(--nav-h))}
.view.on{display:block;animation:viewIn .8s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(26px) scale(.99)}to{opacity:1;transform:none}}
.wrap{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.reveal{opacity:0;translate:0 34px;transition:opacity .9s var(--ease) var(--d,0ms),translate .9s var(--ease) var(--d,0ms)}
.reveal.in{opacity:1;translate:0 0}

/* ---------- الخريطة الدوّارة ---------- */
.hub{padding:22px 0 60px}
.hub-head{text-align:center;margin-bottom:6px}
.hub-head .kick{display:inline-block;padding:5px 16px;border-radius:99px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border:1px solid rgba(23,77,62,.15);font-size:12.5px;font-weight:800;color:var(--green2)}
.hub-head h2{margin:8px 0 0;font-size:clamp(22px,3.4vw,34px);color:var(--deep);text-shadow:0 2px 14px rgba(255,255,255,.8)}
.hub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:clamp(10px,2vw,28px);align-items:center}
.cards-col{display:grid;gap:clamp(14px,5vh,52px)}
.bubble{position:relative;padding:20px 22px 18px;border-radius:34px 34px 34px 10px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 14%,#fff),color-mix(in srgb,var(--c) 6%,#fffdf7));border:2px solid color-mix(in srgb,var(--c) 55%,#fff);box-shadow:0 26px 50px -30px var(--c),0 4px 0 color-mix(in srgb,var(--c) 40%,transparent);cursor:pointer;transition:transform .5s var(--spring),box-shadow .4s;animation:bob 7s ease-in-out infinite;animation-delay:var(--bd,0s)}
@keyframes bob{50%{translate:0 -10px}}
.bubble:hover,.bubble.hot{transform:translateY(-6px) scale(1.03);box-shadow:0 34px 60px -28px var(--c),0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent)}
.bubble .brush{display:inline-block;margin:-34px 0 8px;padding:7px 26px 7px 22px;background:linear-gradient(100deg,var(--c2),var(--c));color:#fff;font-weight:900;font-size:clamp(17px,2vw,23px);border-radius:6px 22px 8px 26px / 14px 8px 18px 10px;transform:rotate(-2deg);box-shadow:0 10px 20px -10px var(--c2)}
.bubble .sub{display:block;font-size:13px;font-weight:800;color:var(--c2);margin-bottom:4px}
.bubble p{margin:0 0 10px;font-size:14px;line-height:1.85;color:#2f4439}
.bubble .go{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:13.5px;color:var(--c2)}
.bubble .go svg{width:17px;height:17px;transition:transform .4s var(--spring)}
.bubble:hover .go svg{transform:translateX(-6px)}
.bubble::after{content:'';position:absolute;top:50%;width:clamp(14px,3vw,46px);border-top:3px dotted color-mix(in srgb,var(--c) 70%,#fff);animation:dashw 1.2s linear infinite}
.cards-col.r .bubble::after{right:calc(-1*clamp(14px,3vw,46px) - 4px)}
.cards-col.l .bubble::after{left:calc(-1*clamp(14px,3vw,46px) - 4px)}
@keyframes dashw{to{border-top-color:transparent}}

.hub-orbit{--S:min(46vw,540px,70vh);position:relative;width:var(--S);height:var(--S);margin-inline:auto}
.hub-orbit .ring{position:absolute;inset:-3%;border-radius:50%;border:2px dashed rgba(23,77,62,.35);animation:spin 90s linear infinite}
.hub-orbit .ring2{position:absolute;inset:14%;border-radius:50%;border:1.5px dotted rgba(204,141,69,.6);animation:spinr 60s linear infinite}
.hub-core{position:absolute;left:50%;top:50%;width:46%;height:46%;translate:-50% -50%;display:grid;place-items:center;text-align:center;border-radius:42% 58% 46% 54% / 50% 44% 56% 50%;background:radial-gradient(circle at 40% 30%,#fffdf6,#f4e5c1);border:3px solid #e9b56c;box-shadow:0 0 0 7px rgba(255,255,255,.55),0 30px 60px -22px rgba(23,77,62,.8),inset 0 0 30px rgba(204,141,69,.3);animation:morph 14s ease-in-out infinite}
@keyframes morph{50%{border-radius:56% 44% 52% 48% / 44% 56% 46% 54%}}
.hub-core .tt{padding:0 8%}
.hub-core svg.icn{display:block;width:34%;margin:0 auto;color:#cc8d45;stroke-width:1.6}
.hub-core h3{margin:2% 0 0;font-size:calc(var(--S)*.1);color:var(--green);line-height:1.2}
.hub-core h3 small{display:block;font-size:.5em;font-weight:800;color:#6b4a1d;margin-top:2%}
.nodes{position:absolute;inset:0;animation:spin 80s linear infinite}
.hub-orbit:hover .nodes,.hub-orbit:hover .node-face,.hub-orbit.pause .nodes,.hub-orbit.pause .node-face{animation-play-state:paused}
.node{position:absolute;left:50%;top:50%;width:calc(var(--S)*.27);height:calc(var(--S)*.27);margin:calc(var(--S)*-.135) 0 0 calc(var(--S)*-.135);transform:rotate(var(--a)) translateY(calc(var(--S)*-.5 + var(--S)*.04))}
.node-face{position:absolute;inset:0;animation:spinr 80s linear infinite;display:block}
.node-pic{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:5px solid #fff;box-shadow:0 0 0 4px var(--c),0 24px 40px -14px rgba(0,0,0,.55);transition:transform .5s var(--spring)}
.node-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.node:hover .node-pic,.node.hot .node-pic{transform:scale(1.14)}
.node:hover .node-pic img,.node.hot .node-pic img{transform:scale(1.12)}
.node .num{position:absolute;top:-4%;right:-2%;width:30%;height:30%;display:grid;place-items:center;border-radius:50%;background:var(--c2);color:#fff;font-weight:900;font-size:calc(var(--S)*.04);border:3px solid #fff;z-index:2}
.node .lab{position:absolute;left:50%;bottom:-9%;translate:-50% 0;white-space:nowrap;padding:3px 14px;background:linear-gradient(100deg,var(--c2),var(--c));color:#fff;font-weight:900;font-size:calc(var(--S)*.042);border-radius:5px 16px 6px 18px / 10px 6px 14px 8px;box-shadow:0 8px 16px -8px var(--c2);z-index:2}
.node::before{content:'';position:absolute;inset:-14%;border-radius:50%;border:2px solid var(--c);opacity:0;animation:lring 3.2s ease-out infinite;animation-delay:var(--pd,0s)}
@media(max-width:980px){
 .hub-grid{grid-template-columns:1fr;gap:34px}
 .hub-orbit{--S:min(86vw,460px);order:-1}
 .cards-col{grid-template-columns:1fr 1fr;gap:34px 14px}
 .bubble::after{display:none}
 .bubble{padding:16px 14px 14px;border-radius:26px 26px 26px 8px}
 .bubble p{font-size:12.5px}
}
@media(max-width:600px){.cards-col{grid-template-columns:1fr}}
.hub-foot{display:flex;justify-content:center;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;border:0;font-weight:900;font-size:15px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;box-shadow:0 14px 30px -14px var(--green);transition:transform .35s var(--spring),box-shadow .3s;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:0;inset-inline-start:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:inset-inline-start .8s}
.btn:hover{transform:translateY(-3px)}
.btn:hover::before{inset-inline-start:130%}
.btn svg{width:18px;height:18px}
.btn.alt{background:#fff;color:var(--green);border:1.5px solid var(--green);box-shadow:none}
.btn.gold{background:linear-gradient(135deg,#e9b56c,#cc8d45);color:#3a2410}

/* ---------- شاشة دخول القسم (قزحية دائرية) ---------- */
.iris{position:fixed;inset:0;z-index:95;display:grid;place-items:center;text-align:center;color:#fff;background:linear-gradient(135deg,var(--c2),var(--c));clip-path:circle(0% at 50% 50%);pointer-events:none;transition:clip-path 0s}
.iris.show{clip-path:circle(150% at 50% 50%);transition:clip-path .85s cubic-bezier(.7,0,.2,1);pointer-events:auto}
.iris.hide{clip-path:circle(0% at 50% 50%);transition:clip-path .8s cubic-bezier(.7,0,.2,1) .05s}
.iris .pat{position:absolute;inset:0;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 6l9 19 19-9-9 19 19 9-19 9 9 19-19-9-9 19-9-19-19 9 9-19-19-9 19-9-9-19 19 9z' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");animation:latt 30s linear infinite}
.iris .in{position:relative;padding:20px}
.iris .n{font-size:clamp(70px,16vw,150px);font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.65);opacity:0}
.iris .t{font-size:clamp(40px,9vw,96px);font-weight:900;line-height:1.25;opacity:0}
.iris .k{display:inline-block;margin-top:6px;padding:6px 20px;border-radius:99px;background:rgba(255,255,255,.18);font-weight:800;font-size:clamp(14px,2vw,20px);opacity:0}
.iris .ic{width:clamp(80px,14vw,120px);height:clamp(80px,14vw,120px);margin:0 auto 10px;border-radius:30%;display:grid;place-items:center;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.6);opacity:0}
.iris .ic svg{width:55%;height:55%}
.iris.show .n{animation:irisIn .9s var(--ease) .5s both}
.iris.show .ic{animation:icPop 1s var(--spring) .55s both}
.iris.show .t{animation:irisUp .9s var(--ease) .75s both}
.iris.show .k{animation:irisUp .9s var(--ease) 1s both}
@keyframes irisIn{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:none}}
@keyframes irisUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes icPop{0%{opacity:0;transform:scale(0) rotate(-200deg)}100%{opacity:1;transform:none}}

/* ---------- قسم الحكاية ---------- */
.sec{--cs:color-mix(in srgb,var(--c) 10%,#fffdf7);padding-bottom:50px}
.sec[data-s=nila]{--c:#2457b8;--c2:#0d2a6b}
.sec[data-s=burqa]{--c:#8a3f9e;--c2:#46204f}
.sec[data-s=baraa]{--c:#d97b2a;--c2:#7a3a0d}
.sec[data-s=khobz]{--c:#1e9a8a;--c2:#0b4d46}
.banner{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(260px,38vh,380px);display:grid;align-items:end;padding:clamp(22px,4vw,48px);margin-top:18px;border-radius:34px;color:#fff;background:var(--c2);box-shadow:0 36px 70px -36px var(--c2)}
.banner .bg{position:absolute;inset:-6%;z-index:-2;width:112%;height:112%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.14) translate(-2%,-1%)}}
.banner::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in srgb,var(--c2) 96%,#000) 6%,color-mix(in srgb,var(--c2) 62%,transparent) 48%,color-mix(in srgb,var(--c) 22%,transparent))}
.banner .pat{position:absolute;inset:0;z-index:-1;opacity:.1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 6l9 19 19-9-9 19 19 9-19 9 9 19-19-9-9 19-9-19-19 9 9-19-19-9 19-9-9-19 19 9z' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");animation:latt 40s linear infinite}
.banner .kick{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);font-weight:800;font-size:13.5px}
.banner h1{margin:8px 0 4px;font-size:clamp(40px,7.5vw,86px);line-height:1.15;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.banner p{max-width:640px;margin:0;font-size:clamp(14px,1.7vw,18px);color:#eef3ee}
.banner .motif{position:absolute;left:clamp(10px,3vw,40px);top:50%;translate:0 -50%;width:clamp(120px,22vw,260px);aspect-ratio:1;z-index:0;opacity:.95;pointer-events:none}
.banner .motif svg{width:100%;height:100%;stroke:none;fill:none}
.m-ring{fill:none;stroke:#fff;stroke-opacity:.5;stroke-width:1.6;stroke-dasharray:3 8;transform-origin:center;animation:spin 40s linear infinite}
.m-ring.r2{animation-direction:reverse;animation-duration:26s;stroke:var(--gold);stroke-opacity:.75}
.m-star{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:2.2;stroke-linejoin:round;transform-origin:center;animation:spin 60s linear infinite reverse}
.m-dot{fill:var(--gold);transform-origin:center;animation:dotp 3s ease-in-out infinite}
@keyframes dotp{50%{transform:scale(1.5)}}
@media(max-width:700px){.banner .motif{opacity:.35;width:150px}.banner{border-radius:24px}}

.block{margin-top:30px}
.block>h2{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:clamp(22px,3vw,30px);color:var(--c2)}
.block>h2 .no{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;font-size:17px;box-shadow:0 10px 20px -8px var(--c)}
.block>.lead{margin:0 0 16px;color:var(--muted);font-size:14.5px}
.card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(16px,2.4vw,26px);box-shadow:0 18px 40px -30px rgba(23,77,62,.7)}
.card.tint{background:var(--cs);border-color:color-mix(in srgb,var(--c) 22%,#fff)}
.pg{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:99px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c2);font-size:12px;font-weight:800;border:1px solid color-mix(in srgb,var(--c) 25%,#fff)}
.pg svg{width:13px;height:13px}

/* الفيديو */
.vgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:center}
.vframe{position:relative;border-radius:26px;overflow:hidden;background:#000;box-shadow:0 30px 60px -28px var(--c2),0 0 0 6px color-mix(in srgb,var(--c) 40%,#fff);isolation:isolate}
.vframe video{display:block;width:100%;max-height:78vh;background:#000;object-fit:contain}
.vframe.tall{width:min(100%,380px);margin-inline:auto;border-radius:30px}
.vframe.tall video{max-height:74vh}
.vcap h3{margin:0 0 6px;font-size:22px;color:var(--c2)}
.vcap p{margin:0 0 10px;color:#41584d;font-size:15px}
.vcap .tag{display:inline-block;padding:3px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:800;color:var(--muted);margin-inline-end:6px}
@media(max-width:860px){.vgrid{grid-template-columns:1fr}}

/* شرائح ومعلومات */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 30%,#fff);font-weight:800;font-size:14px;color:var(--c2);box-shadow:0 8px 18px -12px var(--c);transition:transform .35s var(--spring),background .3s,color .3s}
.chip:hover{transform:translateY(-3px);background:var(--c);color:#fff}
.chip svg{width:17px;height:17px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.fact{padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line);text-align:center;box-shadow:0 14px 30px -24px var(--c)}
.fact .big{display:block;font-size:clamp(30px,4.5vw,46px);font-weight:900;color:var(--c);line-height:1.1}
.fact small{display:block;margin-top:4px;color:var(--muted);font-weight:700;font-size:13px}
.tabsm{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tabsm button{padding:9px 20px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--c) 40%,#fff);background:#fff;color:var(--c2);font-weight:800;font-size:14px;transition:all .3s}
.tabsm button.on{background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;border-color:transparent;box-shadow:0 10px 20px -10px var(--c);transform:translateY(-2px)}
.pane{animation:paneIn .55s var(--ease) both}
@keyframes paneIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.list li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--c) 6%,#fff);border:1px solid color-mix(in srgb,var(--c) 14%,#fff);font-size:14.5px}
.list li::before{content:'';flex:none;width:10px;height:10px;margin-top:9px;border-radius:50%;background:var(--c)}
.dh{position:relative;overflow:hidden;border-radius:26px;padding:clamp(18px,3vw,30px);background:linear-gradient(135deg,var(--c2),var(--c));color:#fff;box-shadow:0 30px 60px -34px var(--c2)}
.dh::before{content:'';position:absolute;top:-40%;left:-10%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(233,181,108,.4),transparent 65%);animation:glow 7s ease-in-out infinite}
.dh h3{position:relative;margin:0 0 8px;font-size:22px;display:flex;align-items:center;gap:10px}
.dh h3 svg{width:26px;height:26px;color:var(--gold)}
.dh .list li{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.dh .list li::before{background:var(--gold)}
.flip{perspective:900px;height:210px;cursor:pointer}
.flip>div{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--spring)}
.flip.on>div{transform:rotateY(180deg)}
.flip .f,.flip .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:26px;padding:22px;display:grid;place-items:center;text-align:center}
.flip .f{background:linear-gradient(135deg,var(--c2),var(--c));color:#fff;font-size:clamp(20px,3vw,28px);font-weight:900;box-shadow:0 26px 50px -30px var(--c2)}
.flip .f small{display:block;font-size:13px;font-weight:700;opacity:.85;margin-top:6px}
.flip .b{transform:rotateY(180deg);background:#fff;border:2px solid var(--c);color:#2f4439;font-size:15px;line-height:1.9}
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* ---------- النيلة: قدر الصبغة ---------- */
.pot-lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:center}
@media(max-width:860px){.pot-lab{grid-template-columns:1fr}}
.pot-box{position:relative;border-radius:26px;padding:12px;background:linear-gradient(#fbe9c2,#f2d9a4);border:2px solid #e4c681;overflow:hidden;box-shadow:0 26px 50px -32px #7a5a1a}
.pot-box svg{display:block;width:100%;height:auto;stroke:none}
.pot-box[data-step="0"]{--liq:#9fd3d8;--liq2:#78b7c0}
.pot-box[data-step="1"]{--liq:#7fb85a;--liq2:#4f9a3d}
.pot-box[data-step="2"]{--liq:#a9b53f;--liq2:#7b8a27}
.pot-box[data-step="3"]{--liq:#1d3f9a;--liq2:#0f2766}
.pot-box[data-step="4"]{--liq:#1d3f9a;--liq2:#0f2766}
.pot-box[data-step="5"]{--liq:#1d3f9a;--liq2:#0f2766}
.liq{fill:var(--liq,#9fd3d8);transition:fill 1.4s ease}
.liq2{fill:var(--liq2,#78b7c0);transition:fill 1.4s ease}
.leaf{fill:#4f9a3d;opacity:0;transform-origin:center;transition:opacity .6s}
.pot-box[data-step="1"] .leaf,.pot-box[data-step="2"] .leaf{opacity:1;animation:leafDrop 1.6s var(--ease) both}
.pot-box[data-step="1"] .leaf:nth-of-type(2n),.pot-box[data-step="2"] .leaf:nth-of-type(2n){animation-delay:.3s}
@keyframes leafDrop{from{transform:translateY(-90px) rotate(-60deg);opacity:0}to{transform:none;opacity:1}}
.pot-box[data-step="3"] .leaf{opacity:.0}
.sunx{opacity:0;transform-origin:50% 50%;transition:opacity .6s}
.pot-box[data-step="2"] .sunx{opacity:1;animation:spin 20s linear infinite}
.swirl{opacity:0;transform-origin:center;transform-box:fill-box}
.pot-box[data-step="2"] .swirl,.pot-box[data-step="3"] .swirl{opacity:.8;animation:spin 2.4s linear infinite}
.beater{opacity:0;transform-origin:50% 100%;transform-box:fill-box}
.pot-box[data-step="3"] .beater{opacity:1;animation:beat .7s ease-in-out infinite alternate}
@keyframes beat{from{transform:rotate(-12deg) translateY(-4px)}to{transform:rotate(12deg) translateY(10px)}}
.bub{fill:rgba(255,255,255,.7);opacity:0}
.pot-box[data-step="3"] .bub{animation:bubUp 1.6s ease-in infinite}
.bub:nth-of-type(2){animation-delay:.4s!important}.bub:nth-of-type(3){animation-delay:.9s!important}.bub:nth-of-type(4){animation-delay:1.2s!important}
@keyframes bubUp{0%{transform:translateY(40px);opacity:0}30%{opacity:.9}100%{transform:translateY(-30px);opacity:0}}
.sed{fill:#0a1c55;opacity:0;transform-origin:bottom;transform-box:fill-box;transform:scaleY(0)}
.pot-box[data-step="4"] .sed,.pot-box[data-step="5"] .sed{opacity:1;animation:sedUp 2s var(--ease) both}
@keyframes sedUp{to{transform:scaleY(1)}}
.drain{opacity:0}
.pot-box[data-step="4"] .drain{opacity:1}
.cakes{opacity:0}
.pot-box[data-step="5"] .cakes{opacity:1}
.pot-box[data-step="5"] .cake{animation:cakeIn .7s var(--spring) both;transform-box:fill-box;transform-origin:center}
.cake:nth-child(2){animation-delay:.12s!important}.cake:nth-child(3){animation-delay:.24s!important}.cake:nth-child(4){animation-delay:.36s!important}
@keyframes cakeIn{from{transform:scale(0) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
.pot-box[data-step="5"] .liqwrap{opacity:.12;transition:opacity 1s}
.colorstrip{display:flex;height:16px;border-radius:99px;overflow:hidden;margin:10px 0 4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.colorstrip i{flex:1}
.colorstrip i:nth-child(1){background:#7fb85a}.colorstrip i:nth-child(2){background:#a9b53f}.colorstrip i:nth-child(3){background:#1d3f9a}
.cslab{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--muted)}
.steps-nav{display:grid;gap:8px}
.step{display:flex;gap:12px;align-items:flex-start;text-align:right;width:100%;padding:11px 14px;border-radius:18px;border:1.5px solid color-mix(in srgb,var(--c) 18%,#fff);background:#fff;transition:all .35s var(--ease)}
.step .n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:14px;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c2);transition:all .35s}
.step b{display:block;font-size:14.5px;color:var(--c2)}
.step small{display:block;font-size:12.5px;color:var(--muted);line-height:1.6}
.step.on{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 14%,#fff),#fff);border-color:var(--c);transform:translateX(-6px);box-shadow:0 14px 26px -18px var(--c)}
.step.on .n{background:var(--c);color:#fff;transform:scale(1.12)}
.ctrl{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}

/* ---------- البرقع: مخطط تفاعلي ---------- */
.bq-lab{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:center}
@media(max-width:860px){.bq-lab{grid-template-columns:1fr}}
.bq-box{position:relative;border-radius:26px;padding:14px;background:radial-gradient(circle at 50% 30%,#fff,color-mix(in srgb,var(--c) 10%,#fff));border:1px solid color-mix(in srgb,var(--c) 22%,#fff);box-shadow:0 26px 50px -34px var(--c2)}
.bq-box svg{display:block;width:100%;height:auto;stroke:none;max-height:560px}
.bq-fill{fill:var(--bq,#46204f);transition:fill .7s ease}
.hs{cursor:pointer}
.hs .pulse{fill:rgba(233,181,108,.4);stroke:none;transform-box:fill-box;transform-origin:center;animation:hsp 2s ease-out infinite}
@keyframes hsp{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.hs .core{fill:var(--gold);stroke:#fff;stroke-width:3}
.hs.on .core{fill:var(--red)}
.hs text{fill:#fff;font:900 16px Cairo,sans-serif;text-anchor:middle;stroke:none}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.sw{width:42px;height:42px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.12),0 8px 14px -6px rgba(0,0,0,.4);transition:transform .35s var(--spring)}
.sw:hover{transform:scale(1.15)}
.sw.on{box-shadow:0 0 0 3px var(--c),0 8px 14px -6px rgba(0,0,0,.4);transform:scale(1.1)}
.infobox{min-height:130px;padding:16px 18px;border-radius:22px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 28%,#fff);box-shadow:0 18px 36px -26px var(--c)}
.infobox h4{margin:0 0 4px;font-size:19px;color:var(--c2)}
.infobox p{margin:0;font-size:14.5px;color:#3a5045}
.infobox .tag{font-size:12px;font-weight:800;color:var(--muted)}
.carousel{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(135deg,var(--c2),var(--c));color:#fff;padding:clamp(18px,3vw,30px);min-height:220px;box-shadow:0 30px 60px -34px var(--c2)}
.slide{display:none;animation:paneIn .6s var(--ease) both}
.slide.on{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.slide .no{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:36px;font-weight:900;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55)}
.slide h4{margin:0 0 4px;font-size:clamp(19px,2.6vw,26px)}
.slide p{margin:0;font-size:15px;color:#ecf2ee}
.dots{display:flex;gap:7px;margin-top:16px;align-items:center}
.dots button{width:10px;height:10px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.4);transition:all .4s var(--spring)}
.dots button.on{width:34px;background:var(--gold)}
.dots .sp{margin-inline-start:auto;display:flex;gap:8px}
.dots .sp button{width:auto;height:auto;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.2);color:#fff;font-weight:800;font-size:12.5px}
.dots .sp button:hover{background:rgba(255,255,255,.35)}

/* ---------- البرعة: العرض والآلات ---------- */
.show-lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
@media(max-width:860px){.show-lab{grid-template-columns:1fr}}
.arena{position:relative;aspect-ratio:1;max-width:460px;margin-inline:auto;width:100%;border-radius:50%;background:radial-gradient(circle,#fff6e4,#f6dfb4 62%,#e9c689);border:3px solid #e1b66a;box-shadow:0 30px 60px -30px #7a3a0d,inset 0 0 40px rgba(204,141,69,.35)}
.arena::before,.arena::after{content:'';position:absolute;inset:7%;border-radius:50%;border:2px solid rgba(217,123,42,.5);animation:lring 3.6s ease-out infinite}
.arena::after{animation-delay:1.8s}
.arena .core{position:absolute;left:50%;top:50%;width:26%;height:26%;translate:-50% -50%;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;box-shadow:0 14px 28px -10px var(--c2);animation:thump 1.2s ease-in-out infinite}
@keyframes thump{50%{transform:scale(1.12)}}
.arena .core svg{width:55%;height:55%}
.ringp{position:absolute;inset:0;animation:spin 40s linear infinite}
.ringp.r2{inset:15%;animation-direction:reverse;animation-duration:30s}
.pp{position:absolute;left:50%;top:50%;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;transform:rotate(var(--a)) translateY(var(--r))}
.pp .d{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--c2);border:3px solid var(--k,var(--c));box-shadow:0 10px 18px -8px rgba(0,0,0,.5);animation:spinr 40s linear infinite,hop 1.2s ease-in-out infinite;animation-delay:0s,var(--hd,0s);cursor:pointer;transition:background .3s,color .3s}
.ringp.r2 .pp .d{animation:spin 30s linear infinite,hop 1.2s ease-in-out infinite;animation-delay:0s,var(--hd,0s)}
@keyframes hop{50%{margin-top:-8px}}
.pp .d svg{width:56%;height:56%}
.pp .d.on,.pp .d:hover{background:var(--k,var(--c));color:#fff}
.legend{display:grid;gap:10px}
.lg{display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:18px;background:#fff;border:1.5px solid color-mix(in srgb,var(--k,var(--c)) 30%,#fff);transition:transform .35s var(--spring),box-shadow .3s}
.lg .dot{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--k,var(--c));color:#fff}
.lg .dot svg{width:20px;height:20px}
.lg b{display:block;font-size:15px;color:var(--c2)}
.lg small{color:var(--muted);font-size:12.5px;line-height:1.6}
.lg.on{transform:translateX(-8px);box-shadow:0 16px 30px -20px var(--k,var(--c))}
.inst{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.in-card{position:relative;padding:20px 12px 16px;text-align:center;border-radius:26px;background:#fff;border:1.5px solid color-mix(in srgb,var(--c) 25%,#fff);overflow:hidden;transition:transform .45s var(--spring),box-shadow .4s}
.in-card:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 26px 40px -26px var(--c)}
.in-card .ico{width:74px;height:74px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 20%,#fff),#fff);color:var(--c2)}
.in-card .ico svg{width:46px;height:46px;stroke-width:1.6}
.in-card:hover .ico svg{animation:wob .6s ease-in-out}
@keyframes wob{25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}
.in-card b{display:block;font-size:16px;color:var(--c2)}
.in-card small{color:var(--muted);font-size:12px}

/* ---------- خبز القالب ---------- */
.kb-lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center}
@media(max-width:860px){.kb-lab{grid-template-columns:1fr}}
.mold-box{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin-inline:auto}
.dough,.mold{position:absolute;inset:6%;border-radius:50%}
.dough{background:radial-gradient(circle at 40% 35%,#f6dfae,#e3b878 70%,#c99650);box-shadow:inset 0 -10px 30px rgba(120,70,20,.35),0 30px 50px -26px #5a3a12;transition:transform .8s var(--spring)}
.dough svg{position:absolute;inset:0;width:100%;height:100%;stroke:none;opacity:0;transform:scale(1.15)}
.mold-box.pressed .dough svg{opacity:1;transform:none;transition:opacity 1s ease .3s,transform 1s var(--spring) .3s}
.mold{background:radial-gradient(circle at 35% 30%,#a8683a,#6b3c1c);border:6px solid #4a2a12;box-shadow:0 26px 40px -22px #2a1608,inset 0 0 0 4px rgba(233,181,108,.4);display:grid;place-items:center;transition:transform .9s var(--spring),opacity .6s;transform:translateY(-130%) rotate(-30deg);opacity:.0}
.mold svg{position:absolute;inset:0;width:100%;height:100%;stroke:none;animation:spin 50s linear infinite}
.mold-box.stamp .mold{transform:none;opacity:1}
.mold-box.pressed .mold{transform:translateY(-130%) rotate(30deg);opacity:0}
.mold-box.stamp .dough{transform:scale(.96)}
.tl{position:relative;display:grid;gap:14px;padding-inline-start:0}
.tl::before{content:'';position:absolute;top:10px;bottom:10px;right:21px;width:3px;background:linear-gradient(var(--c),var(--c2));border-radius:3px;opacity:.35}
.tl .it{position:relative;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.tl .it .nn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;box-shadow:0 10px 20px -10px var(--c);z-index:1}
.tl .it .bx{padding:12px 16px;border-radius:20px;background:#fff;border:1px solid color-mix(in srgb,var(--c) 22%,#fff);box-shadow:0 14px 28px -24px var(--c)}
.tl .it b{display:block;color:var(--c2);font-size:16px}
.tl .it p{margin:0;font-size:14px;color:#3c5247}

/* ---------- صور الموسوعة ---------- */
.scans{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.scan{position:relative;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);cursor:zoom-in;transition:transform .45s var(--spring),box-shadow .4s;text-align:center}
.scan:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 26px 40px -26px var(--c)}
.scan img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.scan span{display:block;padding:9px 6px;font-weight:800;font-size:13px;color:var(--c2);background:color-mix(in srgb,var(--c) 7%,#fff)}
.lb{position:fixed;inset:0;z-index:120;background:rgba(5,16,12,.92);backdrop-filter:blur(6px);display:grid;grid-template-rows:auto 1fr;animation:fade .3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;color:#fff;font-weight:800}
.lb-bar button{padding:8px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font-weight:800}
.lb-view{overflow:auto;display:grid;place-items:start center;padding:0 12px 20px}
.lb-view img{width:min(100%,900px);height:auto;cursor:zoom-in;transition:width .4s var(--ease)}
.lb-view.zoom img{width:min(220%,2000px);cursor:zoom-out}

/* ---------- الاختبار ---------- */
.quiz{position:relative;border-radius:30px;padding:clamp(18px,3vw,32px);background:linear-gradient(160deg,var(--c2),var(--c));color:#fff;box-shadow:0 36px 70px -38px var(--c2);overflow:hidden}
.quiz::before{content:'';position:absolute;inset:0;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 6l9 19 19-9-9 19 19 9-19 9 9 19-19-9-9 19-9-19-19 9 9-19-19-9 19-9-9-19 19 9z' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");animation:latt 40s linear infinite}
.quiz>*{position:relative}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.q-top b{font-size:15px}
.q-bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ffe9a8);transition:width .6s var(--ease)}
.q-text{margin:6px 0 14px;font-size:clamp(19px,2.6vw,26px);line-height:1.6}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.q-opts{grid-template-columns:1fr}}
.qo{display:flex;gap:12px;align-items:center;text-align:right;width:100%;padding:13px 16px;border-radius:18px;border:2px solid rgba(255,255,255,.28);background:rgba(255,255,255,.1);color:#fff;font-weight:800;font-size:15.5px;line-height:1.55;transition:transform .3s var(--spring),background .3s,border-color .3s;animation:optIn .5s var(--spring) both;animation-delay:calc(var(--i)*.07s)}
@keyframes optIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.qo:hover:not(:disabled){transform:translateY(-3px);background:rgba(255,255,255,.2)}
.qo .l{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(0,0,0,.22);font-size:14px}
.qo.ok{background:#1fa971;border-color:#fff;animation:okp .6s}
.qo.no{background:#a8283a;border-color:#fff;animation:shake .5s}
.qo.dim{opacity:.4}
@keyframes okp{40%{transform:scale(1.05)}}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.q-fb{margin-top:14px;padding:13px 16px;border-radius:18px;background:#fff;color:var(--ink);font-size:14.5px;border-inline-start:8px solid #1fa971;animation:paneIn .4s both}
.q-fb.bad{border-inline-start-color:#c8102e}
.q-fb b{display:block;font-size:16px;margin-bottom:2px}
.q-fb .pg{margin-top:6px}
.q-next{margin-top:12px}
.q-res{text-align:center;padding:10px 0}
.q-res h3{margin:6px 0;font-size:clamp(24px,4vw,36px)}
.stars{display:flex;justify-content:center;gap:10px;margin:8px 0 14px}
.stars svg{width:62px;height:62px;fill:rgba(255,255,255,.15);stroke:rgba(255,255,255,.4);stroke-width:1.2}
.stars svg.on{fill:#ffd24a;stroke:#fff3b0;filter:drop-shadow(0 0 14px rgba(255,210,74,.8));animation:starPop .7s var(--spring) both}
@keyframes starPop{from{transform:scale(0) rotate(-120deg)}to{transform:none}}
.stamp{display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border-radius:99px;background:rgba(255,255,255,.16);border:2px dashed rgba(255,255,255,.7);font-weight:900;margin:6px 0 12px}
.stamp svg{width:26px;height:26px;color:var(--gold)}

/* التنقّل بين القصص والتوثيق */
.nextbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:34px;padding:18px 22px;border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 10%,#fff),#fffaf0);border:1px solid color-mix(in srgb,var(--c) 22%,#fff)}
.nextbar span{font-weight:800;color:var(--c2)}
.cite{margin-top:26px;padding:16px 20px;border-radius:22px;background:#fff;border:1px dashed color-mix(in srgb,var(--c) 45%,#fff);font-size:13.5px;color:#41584d}
.cite b{color:var(--c2)}
.cite code{display:block;margin:6px 0;padding:8px 12px;border-radius:12px;background:#f5f4ec;font-family:inherit;font-size:13px;direction:rtl}
.copy{padding:4px 12px;border-radius:99px;border:1px solid var(--line);background:#fff;font-weight:800;font-size:12px;color:var(--c2)}

/* ---------- المصادر والمبادرة ---------- */
.about{--c:#174d3e;--c2:#0b2f26;padding-bottom:50px}
.team{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.team{grid-template-columns:1fr}}
.tm{position:relative;overflow:hidden;padding:22px 24px;border-radius:26px;background:linear-gradient(135deg,var(--c2),var(--green2));color:#fff;border:2px solid var(--gold);box-shadow:0 26px 50px -30px var(--c2)}
.tm small{display:block;color:var(--gold);font-weight:800;font-size:13px}
.tm b{display:block;font-size:clamp(18px,2.4vw,24px)}
.tm svg{position:absolute;left:14px;top:50%;translate:0 -50%;width:70px;height:70px;opacity:.14;stroke-width:1.2}
.logos{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.lt{width:150px;height:100px;border-radius:22px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:12px;box-shadow:0 16px 30px -24px var(--c);transition:transform .4s var(--spring)}
.lt:hover{transform:translateY(-6px) rotate(-2deg)}
.lt img{max-width:100%;max-height:100%;object-fit:contain}
.lt.ph{padding:0;overflow:hidden}.lt.ph img{width:100%;height:100%;object-fit:cover}
.passport{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.ps{padding:18px 10px;border-radius:24px;text-align:center;background:#fff;border:2px dashed #d9d3c0;color:#a7a28f;transition:all .6s var(--spring)}
.ps svg{width:44px;height:44px;margin:0 auto 6px;display:block}
.ps b{display:block;font-size:15px}
.ps.got{border:2px solid var(--k);color:var(--k);background:color-mix(in srgb,var(--k) 8%,#fff);transform:rotate(-2deg);box-shadow:0 20px 34px -24px var(--k)}
.refs{display:grid;gap:12px}
.ref{padding:14px 18px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.ref b{color:var(--c)}
.ref code{display:block;margin-top:6px;padding:8px 12px;border-radius:12px;background:#f5f4ec;font-family:inherit;font-size:13.5px}
footer.foot{position:relative;z-index:2;margin-top:30px;padding:26px 0 40px;text-align:center;color:#51655a;font-size:13px}
footer.foot .l{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;font-weight:900;color:var(--green)}

/* احتفال */
#confetti{position:fixed;inset:0;z-index:130;pointer-events:none}
.toast{position:fixed;left:50%;bottom:90px;translate:-50% 20px;z-index:140;padding:11px 22px;border-radius:99px;background:var(--deep);color:#fff;font-weight:800;font-size:14px;opacity:0;pointer-events:none;transition:all .4s var(--spring);box-shadow:0 18px 36px -14px #000}
.toast.show{opacity:1;translate:-50% 0}
.fin{position:fixed;inset:0;z-index:125;display:grid;place-items:center;background:rgba(5,16,12,.78);backdrop-filter:blur(6px);animation:fade .4s both;padding:18px}
.fin .box{width:min(520px,100%);padding:30px 24px;border-radius:32px;text-align:center;color:#fff;background:linear-gradient(160deg,var(--green),var(--deep));border:2px solid var(--gold);box-shadow:0 40px 90px -30px #000;animation:finIn .8s var(--spring) both}
@keyframes finIn{from{opacity:0;transform:scale(.6) rotate(-6deg)}to{opacity:1;transform:none}}
.fin h3{margin:6px 0;font-size:30px;color:#ffe9a8}
.fin p{margin:0 0 16px;color:#d8e6dc}
.fin .st{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.fin .st svg{width:50px;height:50px;color:var(--gold);fill:rgba(233,181,108,.25);animation:starPop .7s var(--spring) both}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 .reveal{opacity:1;translate:none}
}