/* ============================================================
   motion.css — رئيسية الرحال الصغير بأسلوب أكاديمية شبيكة
   ثلاثة أمزجة بالمتغيرات نفسها:
   أ المعسكر: نهار رملي دافئ · ب الدليل: ليل الصحراء (داكن) · ج العائلة: أزرق بارد فاتح
   مشغّل المشاهد داكن في الثلاثة: هو «المنتج» داخل الشريط الكحلي.
   ============================================================ */
.m-home{
  --bg:#FFF8EE;--bg2:#FBEEDD;--surface:#FFFFFF;--surface2:#FFF3E4;
  --ink:#173E5C;--muted:#5C6B76;--faint:#6B7782;--cta:#C2554A;
  --line:rgba(23,62,92,.10);--line2:rgba(23,62,92,.20);
  --acc:#D4665A;--acc-ink:#B0473C;--acc2:#23608F;--acc-soft:rgba(212,102,90,.12);--acc2-soft:rgba(35,96,143,.10);
  --on-acc:#FFFFFF;--chip-bg:#FFFFFF;--glow1:#F4B08A;--glow2:#8FB8D8;
  --f-display:"Thmanyah Serif Display","Thmanyah Serif Text","Noto Naskh Arabic",serif;
  --f-text:"Thmanyah Serif Text","Thmanyah Serif Display",serif;
  --f-body:"Thmanyah Sans","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.65;overflow-x:clip
}
body[data-theme="editorial"] .m-home{
  --bg:#0D1924;--bg2:#112130;--surface:#152838;--surface2:#1A3146;
  --ink:#F3ECDF;--muted:#A8B2BC;--faint:#8796A4;--cta:#E3BF83;
  --line:rgba(243,236,223,.09);--line2:rgba(243,236,223,.17);
  --acc:#E3BF83;--acc-ink:#E3BF83;--acc2:#EE8E80;--acc-soft:rgba(227,191,131,.13);--acc2-soft:rgba(238,142,128,.12);
  --on-acc:#0D1924;--chip-bg:#1A3146;--glow1:#E3BF83;--glow2:#23608F;--g1o:.1
}
body[data-theme="family"] .m-home{
  --bg:#F2F5F8;--bg2:#E7EEF4;--surface:#FFFFFF;--surface2:#F6F9FB;
  --ink:#15324A;--muted:#566877;--faint:#647381;--cta:#23608F;
  --line:rgba(21,50,74,.09);--line2:rgba(21,50,74,.18);
  --acc:#23608F;--acc-ink:#23608F;--acc2:#D4665A;--acc-soft:rgba(35,96,143,.10);--acc2-soft:rgba(212,102,90,.12);
  --on-acc:#FFFFFF;--chip-bg:#FFFFFF;--glow1:#9CC3E3;--glow2:#F2B3A9
}
.m-home *{box-sizing:border-box}
.m-home h1,.m-home h2,.m-home h3{font-family:var(--f-display);font-weight:700;margin:0;letter-spacing:0}
.m-home p{margin:0}
.m-in{max-width:1200px;margin-inline:auto;padding-inline:24px}

/* شريط تقدّم التمرير */
.m-progress{position:fixed;inset-inline:0;top:0;height:3px;z-index:120;background:linear-gradient(to left,#D4665A,#23608F);transform-origin:right;transform:scaleX(0);pointer-events:none}

/* ---------------- الأزرار ---------------- */
.m-home .cta{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;padding-inline:8px 26px;border-radius:999px;background:var(--cta,var(--acc));color:var(--on-acc);font-family:var(--f-text);font-weight:700;font-size:17px;overflow:hidden;border:0;
  box-shadow:0 12px 30px -12px var(--acc);transition:transform .25s var(--ease),box-shadow .25s}
.m-home .cta i{width:38px;height:38px;border-radius:50%;background:var(--bg);color:var(--acc);display:grid;place-items:center;font-style:normal;transition:transform .3s var(--ease)}
.m-home .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(120%);transition:transform .7s var(--ease)}
.m-home .cta:hover{transform:translateY(-2px)}
.m-home .cta:hover i{transform:translateX(-3px) rotate(-8deg)}
.m-home .cta:hover::after{transform:translateX(-120%)}
.m-home .ghost{display:inline-flex;align-items:center;gap:10px;height:54px;padding-inline:22px;border-radius:999px;color:var(--ink);background:transparent;font-family:var(--f-text);font-weight:700;font-size:16px;border:1px solid var(--line2);cursor:pointer;transition:border-color .2s}
.m-home .ghost:hover{border-color:var(--ink)}
.m-home .ghost .play-ico{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:9px}

/* ---------------- البطل ---------------- */
.m-hero{position:relative;padding:64px 0 100px;isolation:isolate}
.m-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.m-hero-bg .net{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 40%,#000 20%,transparent 75%);animation:m-drift 24s linear infinite}
.m-hero-bg .glow{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(90px)}
.m-hero-bg .g1{background:var(--glow1);opacity:var(--g1o,.28);top:-220px;left:-140px;animation:m-float 14s ease-in-out infinite}
.m-hero-bg .g2{background:var(--glow2);opacity:.3;bottom:-280px;right:-160px;animation:m-float 18s ease-in-out infinite reverse}
@keyframes m-drift{to{background-position:56px 56px}}
@keyframes m-float{50%{transform:translate(40px,30px) scale(1.08)}}
.m-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow-g{display:inline-flex;align-items:center;gap:10px;color:var(--acc-ink);font-weight:600;font-size:14px;margin-bottom:22px!important;padding:6px 14px 6px 6px;border:1px solid var(--acc-soft);border-radius:999px;background:var(--acc-soft)}
.eyebrow-g .dot{width:8px;height:8px;border-radius:50%;background:var(--acc2);margin-inline-start:8px;animation:m-ping 2s infinite}
@keyframes m-ping{0%{box-shadow:0 0 0 0 var(--acc2)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.m-hero h1{font-size:clamp(40px,5.4vw,72px);line-height:1.22;letter-spacing:-.01em}
.m-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em}
.m-hero h1 .ln>span{display:inline-block;transform:translateY(105%);animation:m-lineUp 1s var(--ease) forwards;animation-delay:var(--d)}
.m-hero h1 em{font-style:normal;color:var(--acc);position:relative}
.m-hero h1 em svg{position:absolute;inset-inline:0;bottom:-.1em;width:100%;height:.3em;overflow:visible}
.m-hero h1 em path{stroke:var(--acc);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;animation:m-dash 1.1s var(--ease) 1.3s forwards}
@keyframes m-lineUp{to{transform:none}}
@keyframes m-dash{to{stroke-dashoffset:0}}
.m-hero .lead{color:var(--muted);font-size:19px;max-width:34em;margin:24px 0 34px}
.m-hero .acts{display:flex;gap:12px;flex-wrap:wrap}
.m-trust{display:flex;gap:32px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap}
.m-trust b{display:block;font-family:var(--f-display);font-weight:900;font-size:34px;line-height:1.1}
.m-trust div>span{font-size:14px;color:var(--muted)}

/* موشن البطل */
.viz{position:relative;container-type:inline-size;aspect-ratio:1/1.02;max-width:540px;width:100%;justify-self:center}
.ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line2);animation:m-spin 70s linear infinite}
.ring.r2{inset:12%;animation-duration:46s;animation-direction:reverse;border-style:solid;border-color:var(--line)}
.orbit{position:absolute;inset:-2%;border-radius:50%;pointer-events:none;animation:m-spin 70s linear infinite}
.orbit.o2{inset:12%;animation-duration:46s;animation-direction:reverse}
.orbit .coin{position:absolute;top:50%;left:50%;height:36px;margin-top:-18px;transform:rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)) translateX(-50%)}
.orbit .coin>span{display:block;padding:0 14px;height:36px;line-height:36px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--line2);font:700 13px var(--f-body);color:var(--acc-ink);white-space:nowrap;box-shadow:0 8px 22px -12px rgba(0,0,0,.35);animation:m-spin 70s linear infinite reverse}
.orbit.o2 .coin>span{animation-duration:46s;animation-direction:normal;color:var(--acc2)}
@keyframes m-spin{to{transform:rotate(360deg)}}
.viz-card{position:absolute;inset:17% 9%;background:var(--surface);border:1px solid var(--line2);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 80px -36px rgba(10,30,45,.55);opacity:0;transform:translateY(30px) scale(.96);animation:m-cardIn 1s var(--ease) .5s forwards}
@keyframes m-cardIn{to{opacity:1;transform:none}}
.vc-media{position:relative;flex:1;overflow:hidden;background:var(--bg2)}
.vc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 1s ease,transform 6s linear}
.vc-media img.on{opacity:1;transform:scale(1)}
.vc-media::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.35),transparent)}
.vc-note{position:absolute;z-index:1;left:12px;bottom:10px;font-size:11px;color:#fff;opacity:.85}
.vc-body{padding:16px 18px 14px;display:flex;flex-direction:column;gap:6px}
.vc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vc-top small{display:block;color:var(--muted);font-size:13px}
.vc-top b{display:block;font-family:var(--f-display);font-size:clamp(20px,5cqw,26px);line-height:1.3}
.badge{font:700 13px var(--f-body);padding:6px 12px;border-radius:999px;background:var(--acc-soft);color:var(--acc-ink);white-space:nowrap}
.flip{animation:m-flip .6s var(--ease)}
@keyframes m-flip{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.route{width:100%;height:30px;overflow:visible}
.route .rb{fill:none;stroke:var(--line2);stroke-width:2;stroke-dasharray:4 6}
.route .rl{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
#routeDot{fill:var(--acc);stroke:var(--surface);stroke-width:2}
#routeHalo{fill:var(--acc);opacity:.18}
.vc-stages{display:flex;justify-content:space-between;font-size:12px;color:var(--faint)}
.vc-stages span{transition:color .3s;font-weight:600}
.vc-stages span.on{color:var(--acc-ink)}
.float-chip{position:absolute;z-index:4;background:var(--chip-bg);border:1px solid var(--line2);border-radius:16px;padding:10px 16px;font-size:13px;color:var(--muted);box-shadow:0 18px 40px -18px rgba(0,0,0,.45);opacity:0;
  animation:m-chipIn .8s var(--ease) forwards,m-bob 6s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .8s)}
.float-chip b{display:block;font-family:var(--f-display);font-size:19px;color:var(--ink)}
.float-chip.c1{top:7%;right:-3%} .float-chip.c1 b{color:var(--acc-ink)}
.float-chip.c2{bottom:-2%;left:-6%} .float-chip.c2 b{color:var(--acc2)}
@keyframes m-chipIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes m-bob{50%{translate:0 -8px}}

/* شارة الشعار المرسومة */
.lmark{display:block;overflow:visible}
.lmark path{fill:none;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.lmark .b{stroke:#23608F}.lmark .r{stroke:#D4665A}
body[data-theme="editorial"] .lmark .b{stroke:#7FB3DB}
.lmark.on path,.lmark.mini path{animation:m-draw 1.6s var(--ease) forwards}
.lmark.on .r{animation-delay:.35s}.lmark.on .r2{animation-delay:.7s}
.lmark.mini{width:30px;height:26px}.lmark.mini path{animation-duration:.01s}
.lmark.big{width:84px;height:72px;margin:0 auto 18px}
@keyframes m-draw{to{stroke-dashoffset:0}}

/* ---------------- شريط القيم ---------------- */
.ticker{border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;padding:18px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-track{display:flex;width:max-content;animation:m-marquee 45s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:16px;padding-inline:22px;font-family:var(--f-text);font-weight:700;font-size:19px;color:var(--muted);white-space:nowrap}
.ticker span::after{content:"";width:0;height:0;border-inline:5px solid transparent;border-bottom:9px solid var(--acc);opacity:.8}
@keyframes m-marquee{to{transform:translateX(50%)}}

/* ---------------- الأقسام ---------------- */
.m-sec{padding:110px 0;scroll-margin-top:80px}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.m-kicker{color:var(--acc-ink);font-weight:700;font-size:14px;margin-bottom:14px!important;display:flex;align-items:center;gap:10px}
.sec-head.center .m-kicker{justify-content:center}
.m-kicker::before{content:"";width:28px;height:1.5px;background:var(--acc)}
.sec-head h2{font-size:clamp(32px,3.8vw,48px);line-height:1.3;letter-spacing:-.01em}
.sec-head p{color:var(--muted);margin-top:14px!important;font-size:18px}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{position:relative;padding:34px 28px;border-radius:24px;background:var(--surface);border:1px solid var(--line);overflow:hidden;transition:transform .4s var(--ease),border-color .3s}
.pcard::before{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),var(--acc-soft),transparent 45%);opacity:0;transition:opacity .3s}
.pcard:hover{transform:translateY(-4px);border-color:var(--acc)}
.pcard:hover::before{opacity:1}
.picon{width:64px;height:64px;margin-bottom:24px;position:relative}
.picon *{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.picon .draw{stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);transition:stroke-dashoffset 1.6s var(--ease) var(--dd,.2s)}
.pcard.on .picon .draw{stroke-dashoffset:0}
.pcard .step{position:absolute;top:24px;left:26px;font:700 14px var(--f-body);color:var(--faint)}
.pcard h3{font-size:28px;margin-bottom:10px;position:relative}
.pcard p{color:var(--muted);position:relative}

.m-paths{background:var(--bg2);border-block:1px solid var(--line)}
.journey{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.journey .rail{position:absolute;top:27px;right:28px;left:28px;height:2px;background:var(--line2)}
.journey .rail b{position:absolute;inset:0;background:linear-gradient(to left,var(--acc),var(--acc2));transform-origin:right;transform:scaleX(var(--p,0));transition:transform .2s linear}
.track{position:relative;display:flex;flex-direction:column}
.node{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--line2);font:700 18px var(--f-display);color:var(--muted);position:relative;z-index:1;transition:all .4s}
.track.lit .node{border-color:var(--acc);color:var(--on-acc);background:var(--acc);box-shadow:0 0 0 8px var(--acc-soft)}
.tcard{margin-top:24px;flex:1;padding:24px;border-radius:22px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px;transition:border-color .3s,transform .4s var(--ease)}
.tcard:hover{border-color:var(--line2);transform:translateY(-4px)}
.lvl{align-self:flex-start;font-size:13px;font-weight:700;padding:4px 12px;border-radius:999px;background:var(--acc-soft);color:var(--acc-ink)}
.tcard h3{font-size:23px}
.tcard p{color:var(--muted);font-size:15px}
.tcard ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.tcard li{display:flex;gap:10px;align-items:baseline}
.tcard li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--acc);transform:translateY(-2px)}
.m-home .tgo{display:inline-flex;justify-content:space-between;align-items:center;gap:14px;margin-top:auto;padding:10px 18px;border-radius:999px;border:1px solid var(--line2);font-family:var(--f-text);font-weight:700;font-size:15px;color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.m-home .tgo span{transition:transform .25s var(--ease)}
.m-home .tgo:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.m-home .tgo:hover span{transform:translateX(-4px)}

/* أداة البحث */
.finder{display:grid;grid-template-columns:380px 1fr;gap:24px;align-items:stretch}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:28px}
.field+.field{margin-top:28px}
.field label,.flabel{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;margin-bottom:12px}
.field output{font:700 18px var(--f-display);color:var(--acc-ink)}
.m-home input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(to left,var(--acc) var(--fill,50%),var(--line2) var(--fill,50%));outline:none;cursor:pointer;direction:rtl;border:0;padding:0}
.m-home input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--surface);border:5px solid var(--acc);box-shadow:0 0 0 6px var(--acc-soft);transition:transform .15s}
.m-home input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--surface);border:5px solid var(--acc)}
.m-home input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.hint{display:flex;justify-content:space-between;font-size:13px;color:var(--faint);margin-top:8px}
.segbtn{display:flex;padding:4px;border-radius:999px;background:var(--bg2);border:1px solid var(--line)}
.segbtn button{flex:1;border:0;background:transparent;color:var(--muted);height:40px;border-radius:999px;font:700 15px var(--f-body);cursor:pointer;transition:all .25s var(--ease)}
.segbtn button.on{background:var(--surface);color:var(--ink);box-shadow:0 4px 14px -6px rgba(0,0,0,.3)}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchips button{border:1px solid var(--line2);background:transparent;color:var(--muted);padding:7px 14px;border-radius:999px;font:600 14px var(--f-body);cursor:pointer;transition:all .2s}
.fchips button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.note{margin-top:26px!important;font-size:13px;color:var(--faint);line-height:1.7}
.result{display:flex;flex-direction:column}
.res-top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{padding:16px 18px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.stat small{display:block;color:var(--muted);font-size:13px}
.stat b{display:flex;align-items:center;gap:6px;font:700 clamp(20px,2.2vw,28px)/1.3 var(--f-display)}
.stat.total b{color:var(--acc-ink)} .stat.gain b{color:var(--acc2)}
.stat .riyal{width:.75em;height:.85em}
body[data-theme="editorial"] .m-home .riyal{filter:invert(1)}
.flist{display:flex;flex-direction:column;gap:10px;margin-top:20px;min-height:260px}
.frow{display:grid;grid-template-columns:64px 1fr auto auto;align-items:center;gap:16px;padding:10px 14px 10px 10px;border-radius:18px;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  animation:m-rowIn .5s var(--ease) both;animation-delay:calc(var(--i) * 70ms);transition:border-color .2s,transform .25s var(--ease)}
.frow:hover{border-color:var(--acc);transform:translateX(-4px)}
.frow img{width:64px;height:52px;border-radius:12px;object-fit:cover}
.fr-main b{display:block;font-family:var(--f-display);font-size:19px;line-height:1.3}
.fr-main small{color:var(--muted);font-size:13px}
.fr-val{font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--acc-soft);color:var(--acc-ink);white-space:nowrap}
.frow .riyal{width:.75em;height:.85em}
.fr-price{display:flex;align-items:center;gap:5px;font:700 19px var(--f-display);white-space:nowrap}
@keyframes m-rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fempty{flex:1;display:grid;place-content:center;text-align:center;gap:6px;border:1px dashed var(--line2);border-radius:18px;color:var(--muted)}
.fempty b{font-family:var(--f-display);font-size:22px;color:var(--ink)}

/* ---------------- الشريط الكحلي + المشغّل ---------------- */
.band{padding:110px 0;background:radial-gradient(70% 60% at 50% 0%,rgba(212,102,90,.16),transparent 60%),linear-gradient(180deg,#0F2638,#0B1C2B);color:#F3ECDF;scroll-margin-top:60px}
.band .sec-head p{color:#B7C3CE}
.band .m-kicker{color:#F0A095}.band .m-kicker::before{background:#F0A095}
body[data-theme="editorial"] .band{background:radial-gradient(70% 60% at 50% 0%,rgba(227,191,131,.16),transparent 60%),linear-gradient(180deg,#14304A,#10263A);border-block:1px solid var(--line2)}
body[data-theme="editorial"] .band .m-kicker{color:#E3BF83}body[data-theme="editorial"] .band .m-kicker::before{background:#E3BF83}
.player{--st-bg:#102739;--st-ink:#F3ECDF;--st-muted:#A9B6C2;--st-faint:#6E8192;--st-line:rgba(243,236,223,.10);--st-line2:rgba(243,236,223,.18);
  --sa:#F0A095;--sa-soft:rgba(240,160,149,.14);--sw:#8CC4EE;--sw-soft:rgba(140,196,238,.13);--good:#6FD39A;--good-soft:rgba(111,211,154,.13);--bad:#F07A6B;--bad-soft:rgba(240,122,107,.13);
  container-type:inline-size;max-width:1020px;margin-inline:auto;background:#0C2031;color:var(--st-ink);font-family:var(--f-body);padding:22px;border:1px solid var(--st-line);border-radius:30px;text-align:start;box-shadow:0 50px 100px -50px #000}
body[data-theme="editorial"] .player{--sa:#E3BF83;--sa-soft:rgba(227,191,131,.14)}
.player *{letter-spacing:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.topbar .who{display:flex;align-items:center;gap:10px}
.topbar b{font-family:var(--f-display);font-size:18px}
.topbar .live{font:600 13px var(--f-body);color:var(--good);display:flex;align-items:center;gap:7px}
.topbar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);animation:m-ping 2s infinite}
.tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none}
.tab{appearance:none;border:1px solid var(--st-line);background:transparent;color:var(--st-muted);padding:8px 16px;border-radius:999px;font:600 14px var(--f-body);cursor:pointer;white-space:nowrap;transition:all .2s}
.tab small{opacity:.7;margin-right:6px}
.tab[aria-current="true"]{background:var(--sa);color:#0C2031;border-color:var(--sa)}
.tab:hover{border-color:var(--st-line2);color:var(--st-ink)}
.stage{--h1:5.6cqw;--h2:4cqw;--body:1.95cqw;--small:1.45cqw;--pad:5cqw;--gap:2cqw;
  position:relative;aspect-ratio:16/9;background:radial-gradient(120% 90% at 85% 0%,#17405C 0%,var(--st-bg) 55%);border:1px solid var(--st-line);border-radius:20px;overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--st-line) 1px,transparent 1px),linear-gradient(90deg,var(--st-line) 1px,transparent 1px);background-size:4cqw 4cqw;opacity:.4;mask-image:linear-gradient(to bottom,#000,transparent 80%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 80%);pointer-events:none}
@container (max-width:900px){.stage{--h1:6.4cqw;--h2:4.8cqw;--body:2.5cqw;--small:2cqw;--gap:2.3cqw;aspect-ratio:4/3.1}}
@container (max-width:600px){.stage{--h1:8.6cqw;--h2:6.8cqw;--body:4.3cqw;--small:3.5cqw;--pad:6cqw;--gap:3.6cqw;aspect-ratio:9/17}}
.scene{position:absolute;inset:0;padding:var(--pad);padding-bottom:calc(var(--pad) + var(--small)*2.2);display:flex;flex-direction:column;justify-content:center;gap:var(--gap);visibility:hidden}
.scene.active{visibility:visible}
.scene ol{list-style:none;padding:0;margin:0}
.scene h1,.scene h2{font-family:var(--f-display);font-weight:700;line-height:1.3;color:var(--st-ink)}
.scene h1{font-size:var(--h1);max-width:16em} .scene h2{font-size:var(--h2)}
.scene h3{font-family:var(--f-body);font-weight:700;font-size:1.15em;line-height:1.35;margin:0}
.s-eye{font-size:var(--small);font-weight:700;color:var(--sa)}
.s-lead{font-size:var(--body);line-height:1.65;color:var(--st-muted);max-width:46ch}
.s-head{display:flex;flex-direction:column;gap:calc(var(--gap)*.4)}
.scene mark{background:none;color:var(--sa)}
.s-grid{display:grid;gap:var(--gap)} .g3{grid-template-columns:repeat(3,1fr)} .s-grid>*{min-width:0}
.s-card{border:1px solid var(--st-line);border-radius:14px;padding:1.1em 1.2em;display:flex;flex-direction:column;gap:.5em;font-size:var(--body);background:rgba(8,22,34,.55)}
.s-card p{line-height:1.6;color:var(--st-muted)}
.s-card.hi{border:2px solid var(--sa);background:var(--sa-soft)} .s-card.hi p{color:var(--st-ink)}
.tagline{font-size:var(--small);font-weight:700;color:var(--st-muted)}
.nlist{display:flex;flex-direction:column;gap:calc(var(--gap)*.45);font-size:var(--body)}
.nlist li{display:flex;gap:.9em;align-items:center;line-height:1.5}
.n{flex:none;width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;border:2px solid var(--sa);color:var(--sa);font-weight:700;font-size:.85em}
.formula{display:flex;gap:calc(var(--gap)*.5);font-size:var(--body);align-items:stretch}
.slot{flex:1 1 0;min-width:0;border-radius:14px;padding:.9em 1em;display:flex;flex-direction:column;gap:.25em;border:2px solid}
.slot small{font-size:var(--small);opacity:.85}
.slot b{font-family:var(--f-display);font-size:1.55em;line-height:1.3}
.k1{border-color:var(--st-line2)} .k2{border-color:var(--sw);color:var(--sw);background:var(--sw-soft)} .k3{border-color:var(--sa);color:var(--sa);background:var(--sa-soft)}
.pipe{font-family:var(--f-display);font-size:2.2em;color:var(--st-muted);align-self:center}
.exrow{display:grid;grid-template-columns:6em 1fr;gap:1em;align-items:center;padding:.9em 1.1em;border-radius:14px;border:1px solid var(--st-line);font-size:var(--body)}
.exrow .lab{font-size:var(--small);font-weight:700}
.exrow.weak{background:var(--bad-soft)} .exrow.weak .lab{color:var(--bad)} .exrow.strong{background:var(--good-soft)} .exrow.strong .lab{color:var(--good)}
.strike{position:relative} .strike::after{content:"";position:absolute;right:0;top:55%;height:2px;width:0;background:var(--bad)}
.scene.active .strike::after{animation:m-strike .5s ease var(--s,1s) forwards}
.big{font-family:var(--f-display);font-weight:900;font-size:calc(var(--h1)*2.4);line-height:1;color:var(--sa)}
.scene.chap{background:radial-gradient(90% 90% at 50% 120%,rgba(240,160,149,.2),transparent 60%),#0A1A28}
.scene.chap.photo{background:linear-gradient(to left,rgba(8,20,32,.94) 30%,rgba(8,20,32,.55) 70%,rgba(8,20,32,.25)),var(--img) center/cover}
.scene.chap.photo.active{animation:m-kb 9s ease-out forwards}
@keyframes m-kb{from{background-size:auto,112%}to{background-size:auto,100%}}
.scene.chap::after{content:attr(data-n);position:absolute;left:3cqw;top:50%;translate:0 -50%;font:900 36cqw/1 var(--f-display);color:transparent;-webkit-text-stroke:1px rgba(240,160,149,.4);pointer-events:none;opacity:0}
.scene.chap.active::after{animation:m-wm 1.4s var(--ease) .3s forwards}
@keyframes m-wm{from{opacity:0;transform:translateX(-4cqw) scale(.92)}to{opacity:1;transform:none}}
.daynum{font-family:var(--f-display);font-weight:900;font-size:calc(var(--h1)*2.1);line-height:1.1}
.daynum span{color:var(--sa)}
.pills{display:flex;gap:.6em;flex-wrap:wrap;font-size:var(--small)}
.pills span{border:1px solid var(--st-line2);padding:.4em .9em;border-radius:99px;color:var(--st-muted);background:rgba(8,20,32,.4)}
.brandbug{position:absolute;left:calc(var(--pad)*.6);bottom:calc(var(--pad)*.45);font:600 var(--small) var(--f-body);color:var(--st-faint);pointer-events:none;z-index:2;direction:ltr}
@container (max-width:600px){.g3{grid-template-columns:1fr}.formula{flex-direction:column}.pipe{display:none}.scene.chap::after{font-size:70cqw;top:auto;bottom:4cqw;translate:none}.scene.chap.photo{background:linear-gradient(to top,rgba(8,20,32,.95) 45%,rgba(8,20,32,.35)),var(--img) center/cover}}
.scene.active .a{animation:m-rise .7s var(--ease) var(--d,0s) both}
.scene.active .a.pop{animation-name:m-pop}
.scene.active .a.slide{animation-name:m-slide}
@keyframes m-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes m-pop{from{opacity:0;transform:scale(.85)}60%{transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes m-slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes m-strike{to{width:100%}}
.stage.paused *,.stage.paused *::before,.stage.paused *::after,.stage.paused .scene{animation-play-state:paused!important}
.scene.full *,.scene.full *::before,.scene.full *::after{animation-delay:-120s!important}
.bar-ui{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.pbtn{appearance:none;border:1px solid var(--st-line2);background:transparent;color:var(--st-ink);height:44px;min-width:44px;padding:0 16px;border-radius:999px;font:700 14px var(--f-body);cursor:pointer;transition:border-color .2s}
.pbtn:hover{border-color:var(--st-ink)}
.pbtn.primary{background:var(--sa);color:#0C2031;border-color:var(--sa);min-width:100px}
.segs{flex:1 1 260px;display:flex;gap:5px;min-width:0}
.seg{flex:1;appearance:none;border:0;padding:12px 0;background:none;cursor:pointer;min-width:0}
.seg i{display:block;height:4px;border-radius:99px;background:var(--st-line2);overflow:hidden}
.seg i b{display:block;height:100%;width:0;background:var(--sa)}
.now{font:500 13px var(--f-body);color:var(--st-muted);width:100%}
.now strong{color:var(--st-ink)}

/* الرحلات القادمة داخل الرئيسية */
.m-trips{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.m-trips>div{min-width:0}
.m-trips .trip-card{height:100%}

/* أصوات الأسر */
.m-voices{padding:10px 0 90px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.voices-track{display:flex;gap:16px;width:max-content;animation:m-marquee 50s linear infinite}
.m-voices:hover .voices-track{animation-play-state:paused}
.voice{margin:0;min-width:300px;padding:22px 24px;border-radius:22px;background:var(--surface);border:1px solid var(--line)}
.voice blockquote{margin:0 0 10px;font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.4}
.voice blockquote::before{content:"“";color:var(--acc);margin-inline-end:4px}
.voice figcaption{font-size:14px;color:var(--muted)}
.voice figcaption b{color:var(--ink)}

/* الختام */
.m-closing{padding:20px 0 120px}
.closing-box{position:relative;overflow:hidden;border-radius:34px;padding:72px 48px 64px;text-align:center;background:radial-gradient(80% 120% at 50% 0%,var(--acc-soft),transparent 60%),var(--surface);border:1px solid var(--line2)}
.closing-box h2{font-size:clamp(32px,4.2vw,54px);line-height:1.3;max-width:16em;margin:0 auto 16px}
.closing-box p{color:var(--muted);max-width:40em;margin-inline:auto}
.closing-box .acts{margin-top:32px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.closing-box .disc{margin-top:28px;font-size:13px;color:var(--faint)}
.closing-box .rings{position:absolute;inset:auto 50% -380px auto;width:760px;height:760px;transform:translateX(50%);pointer-events:none}
.closing-box .rings span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--acc);opacity:0;animation:m-ripple 6s ease-out infinite}
.closing-box .rings span:nth-child(2){animation-delay:2s}.closing-box .rings span:nth-child(3){animation-delay:4s}
@keyframes m-ripple{from{transform:scale(.4);opacity:.5}to{transform:scale(1.1);opacity:0}}
.closing-box>*:not(.rings){position:relative}

/* ظهور عند التمرير */
.m-home .rv{opacity:0}
.m-home .rv.on{animation:m-reveal .9s var(--ease) var(--rd,0s) both}
.m-hero .rv{animation:m-reveal .9s var(--ease) calc(var(--rd,0s) + .3s) both}
@keyframes m-reveal{from{opacity:0;transform:translateY(28px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ---------------- لمسات كل اتجاه ---------------- */
/* أ: زوايا أنعم وبطاقة صورة بإطار أبيض كأنها صورة مطبوعة */
body[data-theme="camp"] .viz-card{border:8px solid #fff;border-radius:30px;transform:translateY(30px) rotate(-1.5deg)}
@keyframes m-cardInCamp{to{opacity:1;transform:rotate(-1.5deg)}}
body[data-theme="camp"] .viz-card{animation-name:m-cardInCamp}
body[data-theme="camp"] .pcard,body[data-theme="camp"] .tcard,body[data-theme="camp"] .panel{box-shadow:0 18px 40px -26px rgba(23,62,92,.35);border-color:transparent}
/* ب: داكن تحريري، خطوط رفيعة بدل الظلال */
body[data-theme="editorial"] .viz-card{border-radius:4px 4px 26px 26px}
body[data-theme="editorial"] .pcard,body[data-theme="editorial"] .tcard{border-radius:18px}
body[data-theme="editorial"] .m-trips .trip-card{background:var(--surface);border-color:var(--line)}
/* ج: لوحة واضحة، بطاقات بيضاء وظل خفيف */
body[data-theme="family"] .pcard,body[data-theme="family"] .tcard,body[data-theme="family"] .panel,body[data-theme="family"] .voice{box-shadow:0 1px 2px rgba(21,50,74,.05),0 14px 30px -18px rgba(21,50,74,.22);border-color:transparent}
body[data-theme="family"] .m-hero .cta{border-radius:16px}body[data-theme="family"] .m-hero .cta i{border-radius:11px}

/* ---------------- الجوال ---------------- */
@media (max-width:1024px){
  .m-hero-grid{grid-template-columns:1fr;gap:48px}
  .viz{max-width:470px}
  .journey{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .journey .rail,.journey .node{display:none}
  .tcard{margin-top:0}
  .finder{grid-template-columns:1fr}
  .m-trips{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){.pillars{grid-template-columns:1fr}.m-sec,.band{padding:80px 0}}
@media (max-width:600px){
  .m-in{padding-inline:16px}
  .m-hero{padding:28px 0 72px}
  .m-hero .lead{font-size:17px}
  .m-trust{gap:22px}.m-trust b{font-size:28px}
  .journey,.m-trips,.res-top{grid-template-columns:1fr}
  .panel{padding:22px}
  .player{padding:12px;border-radius:22px}
  .closing-box{padding:52px 22px}
  .viz{aspect-ratio:1/1.12}
  .viz-card{inset:13% 1%}
  .float-chip{padding:7px 12px;font-size:12px}.float-chip b{font-size:16px}
  .float-chip.c1{top:0;right:0}.float-chip.c2{bottom:0;left:0}
  .orbit .coin>span{height:30px;line-height:30px;font-size:11px;padding:0 10px}
  .frow{grid-template-columns:54px 1fr auto;gap:12px}.frow .fr-val{display:none}.frow img{width:54px;height:46px}
  .sec-head.row{flex-direction:column;align-items:flex-start}
  .voice{min-width:250px}
}
@media (prefers-reduced-motion:reduce){
  .m-home .rv{opacity:1!important;animation:none!important}
  .m-hero h1 .ln>span{transform:none!important}.m-hero h1 em path{stroke-dashoffset:0!important}
  .viz-card,.float-chip,.viz-tiles{opacity:1!important;transform:none!important}
  .lmark path{stroke-dashoffset:0!important}
  .vc-media img{transition:none!important}
  .m-home *,.m-home *::before,.m-home *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* ---------------- ب داكن: يمتد إلى الهيدر والفوتر والصفحات ---------------- */
body[data-theme="editorial"]{--paper:#0D1924;--card:#152838;--ink:#F3ECDF;--muted:#A8B2BC;--line:rgba(243,236,223,.12);--soft:#112130;--gold:#E3BF83;background:#0D1924}
body[data-theme="editorial"] .site-header{background:rgba(13,25,36,.86);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
body[data-theme="editorial"] .brand img,body[data-theme="editorial"] .footer-brand img{background:#F3ECDF;border-radius:14px;padding:6px 10px}
body[data-theme="editorial"] .menu-btn span{background:#F3ECDF}
body[data-theme="editorial"] footer{background:#0A141D;border-top:1px solid var(--line)}
body[data-theme="editorial"] .search,body[data-theme="editorial"] .phone input,body[data-theme="editorial"] .newsletter input{background:#152838;color:var(--ink)}
body[data-theme="editorial"] .heart,body[data-theme="editorial"] .value-chip{background:rgba(13,25,36,.85);color:#F3ECDF}
body[data-theme="editorial"] .floating-card,body[data-theme="editorial"] .login-card{background:#152838;color:var(--ink)}
body[data-theme="editorial"] .primary{background:#E3BF83;color:#0D1924}
body[data-theme="editorial"] .riyal{filter:invert(1)}
/* هيدر يصير زجاجيًا عند التمرير في الاتجاهين الفاتحين */
body[data-theme="camp"] .site-header.scrolled{box-shadow:0 10px 30px -20px rgba(23,62,92,.35)}

/* ============ تكوين بطل مختلف لكل اتجاه ============ */
.viz-tiles,.viz-cap{display:none}
.sec-head h2,.closing-box h2,.m-hero h1{text-wrap:balance}

/* ب: إطار فيلم طولي تحريري، بلا مدار */
body[data-theme="editorial"] .m-hero-grid{grid-template-columns:1fr 1fr}
body[data-theme="editorial"] .ring,body[data-theme="editorial"] .orbit{display:none}
body[data-theme="editorial"] .viz{aspect-ratio:4/5;max-width:500px;margin-top:44px}
body[data-theme="editorial"] .viz-card{inset:0;border-radius:4px;border:1px solid rgba(227,191,131,.35);box-shadow:0 60px 120px -50px #000}
body[data-theme="editorial"] .vc-body{padding:20px 22px 18px}
body[data-theme="editorial"] .vc-top b{font-size:clamp(24px,6cqw,32px)}
body[data-theme="editorial"] .viz-cap{display:flex;position:absolute;top:-40px;inset-inline:0;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);border-bottom:1px solid rgba(227,191,131,.35);padding-bottom:8px}
body[data-theme="editorial"] .viz-cap b{font-family:var(--f-display);font-size:15px;color:var(--acc)}
body[data-theme="editorial"] .float-chip{border-radius:4px;border-color:rgba(227,191,131,.35);background:#0D1924}
body[data-theme="editorial"] .float-chip.c1{top:16%;right:auto;left:-34px}
body[data-theme="editorial"] .float-chip.c2{bottom:30%;left:auto;right:-30px}

/* ج: لوحة معلومات: بطاقة كبيرة وتحتها مربعات */
body[data-theme="family"] .ring,body[data-theme="family"] .orbit,body[data-theme="family"] .float-chip{display:none}
body[data-theme="family"] .viz{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;max-width:560px}
body[data-theme="family"] .viz-card{position:relative;inset:auto;height:420px;border:0;border-radius:24px;box-shadow:0 1px 2px rgba(21,50,74,.06),0 24px 50px -24px rgba(21,50,74,.3)}
body[data-theme="family"] .viz-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;order:2;opacity:0;animation:m-cardIn .9s var(--ease) .9s forwards}
.viz-tiles>div{background:var(--surface);border-radius:20px;padding:16px 20px;display:flex;flex-direction:column;gap:2px;box-shadow:0 1px 2px rgba(21,50,74,.05),0 14px 30px -18px rgba(21,50,74,.22)}
.viz-tiles>div:first-child{border-inline-start:4px solid var(--acc2)}
.viz-tiles small{font-size:13px;color:var(--muted)}
.viz-tiles b{font-family:var(--f-display);font-size:26px;line-height:1.3;color:var(--ink)}
.viz-tiles span{font-size:13px;color:var(--faint)}

@media (max-width:1024px){body[data-theme="editorial"] .m-hero-grid{grid-template-columns:1fr}body[data-theme="editorial"] .float-chip.c1{left:-8px}body[data-theme="editorial"] .float-chip.c2{right:-8px}}
@media (max-width:600px){
  .m-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .m-trust b{font-size:26px}
  .res-top{grid-template-columns:repeat(3,1fr)!important;gap:8px}
  .stat{padding:10px 12px}.stat b{font-size:18px}
  .orbit{display:none}
  body[data-theme="camp"] .viz{aspect-ratio:1/1}
  body[data-theme="camp"] .viz-card{inset:6% 3%}
  body[data-theme="family"] .viz-card{height:340px}
  body[data-theme="editorial"] .float-chip{display:none}
}
@container (max-width:600px){.stage{aspect-ratio:4/5}}

/* ب: الصفحات الداخلية الداكنة */
body[data-theme="editorial"] input[type=checkbox]{accent-color:#E3BF83}
body[data-theme="editorial"] .auth-visual .kicker{color:#FFE2B8}
body[data-theme="editorial"] .login-card{border-radius:22px;border:1px solid var(--line)}