/* موقع شبر جرافيكس · النسخة الثانية · الهوية من «00 هوية شبر\هوية شبر جرافيكس.md» (ستة ألوان بس، وأي درجة شفافة منها) */
:root{
  --paper:#F0F0EB; --ink:#1C1D1F; --tape:#F2C230; --card:#2A2C2F; --grey:#5C5F64; --line:#E3E4DE;
  --f-display:'Alexandria'; --f-text:'IBM Plex Sans Arabic'; --f-mono:'IBM Plex Mono';
  --wrap:1180px; --gutter:20px; --head:66px; --rl:28px;
  --ease:cubic-bezier(.2,.7,.2,1); --out:cubic-bezier(.16,1,.3,1);
  --r:8px;
}
@font-face{font-family:'Alexandria';src:url('../fonts/Alexandria-wght.woff') format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Medium.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/IBMPlexSansArabic-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/IBMPlexMono-Medium.woff') format('woff');font-weight:500;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 12px);background:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text),system-ui,sans-serif;font-size:17px;line-height:1.8;letter-spacing:0;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--f-display),var(--f-text),sans-serif;margin:0;line-height:1.3;letter-spacing:0}
h1,h2{text-wrap:balance}
h1{font-weight:800;font-size:clamp(46px,11.5vw,118px);line-height:1.3}
@media (min-width:900px){h1{font-size:clamp(64px,6.6vw,100px)}}
h2{font-weight:700;font-size:clamp(30px,5.6vw,60px)}
h3{font-weight:700;font-size:clamp(20px,2.2vw,24px);line-height:1.3}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
.mono,.num{font-family:var(--f-mono),ui-monospace,monospace;direction:ltr;unicode-bidi:isolate;letter-spacing:0}
.nw{white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--tape);color:var(--ink);padding:10px 14px;border-radius:var(--r);z-index:99;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--tape);outline-offset:3px}
.dark{background:var(--ink);color:var(--paper)}
.dark .muted{color:var(--line)}
.muted{color:var(--grey)}
.lead{font-size:clamp(17px,2vw,21px);line-height:1.8;max-width:34em}
section{position:relative;padding:clamp(72px,10vw,136px) 0}
/* الأقسام أوراق متراكبة: كل قسم يركب على اللي قبله بزاوية مدوّرة */
.sheet{border-radius:var(--rl) var(--rl) 0 0;margin-top:calc(-1 * var(--rl));padding-top:calc(clamp(72px,10vw,136px) + var(--rl));background:var(--paper);box-shadow:0 -1px 0 rgba(28,29,31,.06)}
.sheet.dark{background:var(--ink)}
.band{background:var(--line)}
.head{max-width:840px;margin-bottom:clamp(36px,6vw,64px)}
.head .lead{margin-top:18px}

/* العلامة الصغيرة قبل عنوان القسم: مربع قياس أصفر، رقم القسم، وخط يمتد لما يظهر */
.kicker{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;line-height:1.8;margin-bottom:16px;color:var(--grey)}
.dark .kicker{color:var(--line)}
.kicker::before{content:"";width:10px;height:10px;background:var(--tape);flex:none}
.kicker .mono{font-weight:500;font-size:13px}
.head .kicker::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25;transform:scaleX(0);transform-origin:right center;transition:transform 1.1s var(--ease) .2s}
.head.in .kicker::after,.no-js .head .kicker::after{transform:scaleX(1)}

/* الأزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 24px;border-radius:var(--r);font:600 16px/1.8 var(--f-text),system-ui,sans-serif;letter-spacing:0;text-decoration:none;border:1.5px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform .3s var(--out),background .25s,color .25s,border-color .25s,box-shadow .3s}
.btn .ic{width:20px;height:20px;flex:none}
.btn-tape{background:var(--tape);color:var(--ink);border-color:var(--tape)}
.btn-tape::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(240,240,235,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn-tape:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(242,194,48,.7)}
.btn-tape:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(240,240,235,.08)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta .btn{flex:1 1 auto}
@media (min-width:600px){.cta .btn{flex:0 0 auto}}

/* خط المقاس: خط رفيع بنهايات (علامة عمودية وشرطة 45°) يرسم نفسه عند الظهور */
.dim{position:relative;height:16px;margin:28px 0;color:var(--ink)}
.dark .dim{color:var(--paper)}
.dim::before{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform 1.1s var(--ease)}
.dim i{position:absolute;top:0;width:1px;height:16px;background:currentColor;opacity:0;transition:opacity .4s .2s}
.dim i::after{content:"";position:absolute;top:50%;left:50%;width:14px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(-45deg)}
.dim i:first-of-type{inset-inline-start:0}
.dim i:last-of-type{inset-inline-end:0;transition-delay:1s}
.dim.in::before,.no-js .dim::before{transform:scaleX(1)}
.dim.in i,.no-js .dim i{opacity:1}
.dim .n{position:absolute;top:-24px;inset-inline-start:50%;transform:translateX(50%);font:400 12px/1.8 var(--f-mono),monospace;color:var(--grey);opacity:0;transition:opacity .5s 1.1s;padding:0 8px}
.dark .dim .n{color:var(--line)}
.dim.in .n{opacity:1}

/* شريط المتر: الأصفر بالعلامات، في الواجهة والختام بس */
.tape{position:relative;height:30px;background-color:var(--tape);overflow:hidden;color:var(--ink)}
.tape::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(to right,var(--ink) 0 1px,transparent 1px 100px) 0 0/100% 16px no-repeat,
  repeating-linear-gradient(to right,var(--ink) 0 1px,transparent 1px 50px) 0 0/100% 11px no-repeat,
  repeating-linear-gradient(to right,var(--ink) 0 1px,transparent 1px 10px) 0 0/100% 7px no-repeat}
.tape-nums{position:absolute;inset:0;display:flex;direction:ltr;align-items:flex-end;padding-bottom:3px;pointer-events:none}
.tape-nums span{flex:0 0 100px;font:500 10px/1 var(--f-mono),monospace;padding-left:4px}
.hero .tape{will-change:transform}

/* الهيدر */
.top{position:sticky;top:0;z-index:30;background:rgba(28,29,31,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--paper)}
.nav{display:flex;align-items:center;gap:16px;height:var(--head)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand svg{height:34px;width:auto}
.links{display:none;gap:26px;margin-inline-start:auto}
.links a{text-decoration:none;font-weight:500;font-size:15px;color:var(--line);padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.links a:hover,.links a.on{color:var(--paper);border-bottom-color:var(--tape)}
.nav .btn{min-height:42px;padding:6px 14px;font-size:14px;margin-inline-start:auto}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;padding:8px;border-radius:var(--r);color:var(--paper);display:flex}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;inset-inline-end:0;top:52px;background:var(--card);border:1px solid var(--grey);border-radius:10px;padding:8px;min-width:220px;box-shadow:0 20px 40px -20px rgba(28,29,31,.8)}
.menu nav a{display:block;padding:10px 14px;text-decoration:none;border-radius:var(--r);color:var(--paper);font-weight:500}
.menu nav a:hover{background:var(--ink)}
@media (min-width:900px){.links{display:flex}.menu{display:none}.nav .btn{margin-inline-start:0}}
/* شريط التقدّم تحت الهيدر: متر صغير يمتلي مع التمرير (الشاشات اللي ما فيها مسطرة) */
.progress{height:5px;background:var(--card);position:relative;overflow:hidden}
.progress i{position:absolute;inset:0;background-color:var(--tape);background-image:repeating-linear-gradient(to right,var(--ink) 0 1px,transparent 1px 20px);transform:scaleX(0);transform-origin:right center}
@media (min-width:1340px){.progress{display:none}}

/* المسطرة: شريط ثابت على طرف الشاشة، علاماته تمشي مع الصفحة، ورأس القراءة في نص الشاشة يقول وين أنت */
.ruler{display:none}
@media (min-width:1340px){
  /* overflow:clip مو hidden: عشان ما ينسحب محتواها لو انضغط عنوان أو وصله التركيز */
  .ruler{display:block;position:fixed;top:var(--head);bottom:0;inset-inline-end:0;width:64px;z-index:25;background:var(--ink);color:var(--line);overflow:hidden;overflow:clip;border-inline-start:1px solid var(--card)}
  .r-track{position:absolute;top:0;left:0;width:100%;height:0;will-change:transform;background:
    repeating-linear-gradient(to bottom,rgba(227,228,222,.7) 0 1px,transparent 1px 100px) 0 0/22px 100% no-repeat,
    repeating-linear-gradient(to bottom,rgba(227,228,222,.45) 0 1px,transparent 1px 50px) 0 0/14px 100% no-repeat,
    repeating-linear-gradient(to bottom,rgba(227,228,222,.3) 0 1px,transparent 1px 10px) 0 0/7px 100% no-repeat}
  .r-track i{position:absolute;left:26px;margin-top:-5px;font:400 10px/1 var(--f-mono),monospace;color:var(--line);opacity:.6;direction:ltr;font-style:normal}
  .r-track a{position:absolute;left:38px;text-decoration:none;color:var(--line);opacity:.55;writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;line-height:1.8;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:8px;padding-inline:4px;transition:opacity .3s,color .3s}
  .r-track a::before{content:"";width:6px;height:6px;background:currentColor;flex:none}
  .r-track a b{font:500 11px/1.8 var(--f-mono),monospace;letter-spacing:0}
  .r-track a:hover{opacity:1}
  .r-track a.on{opacity:1;color:var(--tape)}
  .r-head{position:absolute;left:0;width:100%;top:calc(50vh - var(--head));height:0;pointer-events:none}
  .r-head::before{content:"";position:absolute;left:0;top:-1px;width:30px;height:2px;background:var(--tape)}
  .r-head::after{content:"";position:absolute;left:30px;top:-5px;width:10px;height:10px;background:var(--tape)}
  .r-head b{position:absolute;left:42px;top:-9px;font:500 11px/1.6 var(--f-mono),monospace;color:var(--tape);direction:ltr}
}

/* الواجهة */
.hero{padding:0;overflow:hidden;isolation:isolate;padding-bottom:var(--rl)}
.hero .wrap{position:relative;padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(56px,8vw,110px)}
.hero-bg{position:absolute;inset:-10% 0;z-index:-1;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.08;-webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 60% at 50% 45%,#000 20%,transparent 100%);will-change:transform}
.hero .dot{position:absolute;width:14px;height:14px;background:var(--tape);z-index:-1;opacity:0;will-change:transform}
.hero .d1{top:12%;inset-inline-start:5%}.hero .d2{top:88%;inset-inline-end:8%;width:10px;height:10px}.hero .d3{bottom:9%;inset-inline-start:44%;width:18px;height:18px}.hero .d4{top:20%;inset-inline-start:38%;width:8px;height:8px}
@media (max-width:899px){.hero .d1,.hero .d2{display:none}.hero .d3{bottom:auto;top:58%;inset-inline-start:3%;width:14px;height:14px}.hero .d4{bottom:auto;top:76%;inset-inline-end:4%;width:10px;height:10px}}
.js.ready .hero .dot{opacity:.9;animation:float 9s ease-in-out infinite alternate}
.js.ready .hero .d2{animation-duration:12s;animation-delay:-3s}.js.ready .hero .d3{animation-duration:10s;animation-delay:-6s}.js.ready .hero .d4{animation-duration:8s;animation-delay:-2s}
@keyframes float{from{transform:translate3d(0,0,0)}to{transform:translate3d(6px,-18px,0)}}
.hero-grid{display:grid;gap:48px;align-items:center}
.hero h1 .m{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .14em;margin:-.08em -.06em -.14em}
.hero h1 .w{display:inline-block}
.hero .lead{margin-top:20px;max-width:30em}
.hero .dim{margin:26px 0 0;max-width:420px}
.hero .dim .n{top:-26px}
.hero-visual{position:relative;display:flex;justify-content:center;min-height:480px;perspective:1600px}
/* المسرح مسطّح (مو preserve-3d) عشان الجوال يبقى قدام المتصفح طول حركة الدخول، والمنظور فيه نفسه */
.stage{position:relative;display:flex;justify-content:center;width:100%;transform-style:flat;perspective:1600px;transition:transform .8s var(--out)}
.phone{position:relative;width:min(272px,80vw);aspect-ratio:9/19;background:var(--card);border-radius:40px;padding:12px;box-shadow:0 0 0 1px var(--grey)}
.phone::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:96px;height:24px;background:var(--card);border-radius:0 0 14px 14px;z-index:2}
.phone-screen{position:relative;height:100%;border-radius:30px;overflow:hidden;background:var(--paper)}
.phone-screen img{width:100%;height:auto;will-change:transform}
.laptop{display:none}
/* شروحات المقاس حول الأجهزة */
.ann{position:absolute;color:var(--line);font-size:12px;line-height:1.8;opacity:0;transition:opacity .6s 1.4s}
.ann i{position:absolute;background:currentColor}
.ann span{position:absolute;white-space:nowrap}
.ann-x{top:-30px;inset-inline:0;height:14px}
.ann-x::before{content:"";position:absolute;inset-inline:0;top:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 1s var(--ease) 1.2s}
.ann-x i{top:0;width:1px;height:14px}.ann-x i:first-of-type{inset-inline-start:0}.ann-x i:last-of-type{inset-inline-end:0}
.ann-x span{top:-26px;inset-inline-start:50%;transform:translateX(50%)}
.ann-y{top:0;bottom:0;inset-inline-end:-30px;width:14px}
.ann-y::before{content:"";position:absolute;inset-block:0;left:7px;width:1px;background:currentColor;transform:scaleY(0);transform-origin:top;transition:transform 1s var(--ease) 1.4s}
.ann-y i{left:0;height:1px;width:14px}.ann-y i:first-of-type{top:0}.ann-y i:last-of-type{bottom:0}
.ann-y span{top:-30px;left:50%;transform:translateX(-50%)}
.js.ready .ann{opacity:1}
.js.ready .ann-x::before{transform:scaleX(1)}.js.ready .ann-y::before{transform:scaleY(1)}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1fr 1fr;gap:48px;min-height:calc(100vh - var(--head))}
  .hero-visual{min-height:0;display:block}
  /* التكوين على الكمبيوتر: إطار متصفح فيه الرئيسية كاملة من فوق، والجوال مستقيم متداخل في زاويته السفلى (اليسار)، والمجموعة في نص الواجهة عمودياً */
  .stage{display:block;aspect-ratio:1/0.92}
  .laptop{display:block;position:relative;width:100%;background:var(--card);border-radius:14px;padding:10px 10px 12px;box-shadow:0 0 0 1px var(--grey),0 40px 80px -30px rgba(0,0,0,.7)}
  .laptop-bar{display:flex;gap:6px;padding:4px 4px 10px;direction:ltr;align-items:center}
  .laptop-bar i{width:9px;height:9px;border-radius:50%;background:var(--grey);display:block}
  .laptop-bar i:first-child{background:var(--tape)}
  .laptop-bar span{margin-left:12px;font:400 11px/1.4 var(--f-mono),monospace;color:var(--line);background:var(--ink);padding:4px 10px;border-radius:4px;flex:1;text-align:center;direction:ltr}
  .laptop img{border-radius:6px;width:100%;height:auto}
  .phone{position:absolute;z-index:2;inset-inline-end:-2%;bottom:0;width:35%;max-width:272px;box-shadow:0 0 0 1px var(--grey),0 30px 60px -20px rgba(0,0,0,.6)}
}
@media (max-width:899px){.ann-x{display:none}.ann-y{inset-inline-end:-34px}}
@media (min-width:1600px){.hero-grid{grid-template-columns:1.1fr .9fr}.hero-visual{width:122%;margin-inline-end:-22%}}

/* الحركة عند التحميل (الواجهة): الكلمات تطلع من تحت قناع، والباقي يصفى ويطلع */
.js .hero .w{transform:translateY(125%)}
.js .hero .lead,.js .hero .cta,.js .hero .kicker{opacity:0;transform:translateY(22px);filter:blur(6px)}
.js .hero .phone,.js .hero .laptop{opacity:0;transform:translateY(60px) rotateX(10deg)}
.js.ready .hero .w{transform:none;transition:transform 1.05s var(--out)}
.js.ready .hero .lead,.js.ready .hero .cta,.js.ready .hero .kicker{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease),transform .9s var(--out),filter .8s var(--ease)}
.js.ready .hero .kicker{transition-delay:.05s}
.js.ready .hero .m:nth-child(1) .w{transition-delay:.15s}.js.ready .hero .m:nth-child(2) .w{transition-delay:.27s}.js.ready .hero .m:nth-child(4) .w{transition-delay:.42s}.js.ready .hero .m:nth-child(5) .w{transition-delay:.54s}
.js.ready .hero .lead{transition-delay:.7s}.js.ready .hero .cta{transition-delay:.84s}
.js.ready .hero .laptop{opacity:1;transform:none;transition:opacity 1s .4s var(--ease),transform 1.3s .4s var(--out)}
.js.ready .hero .phone{opacity:1;transform:none;transition:opacity 1s .6s var(--ease),transform 1.3s .6s var(--out)}
/* على الكمبيوتر: الجوال يدخل بصعود نظيف بس (بدون ميلان) وهو دايماً قدام المتصفح */
@media (min-width:900px){.js .hero .phone{transform:translateY(48px)}.js.ready .hero .phone{transform:none}}
@keyframes shotScroll{0%,6%{transform:translateY(0)}94%,100%{transform:translateY(calc(-100% + var(--screen-h,560px)))}}
.ready .phone-screen img{animation:shotScroll 34s linear infinite alternate 1.8s}

/* الظهور عند التمرير */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--out)}
.js [data-reveal].in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .9s var(--out)}
.js .stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.1s}.stagger.in>*:nth-child(3){transition-delay:.2s}.stagger.in>*:nth-child(4){transition-delay:.3s}.stagger.in>*:nth-child(5){transition-delay:.4s}.stagger.in>*:nth-child(6){transition-delay:.5s}

/* البطاقات: ضوء يتبع المؤشر، وأيقونة ترسم نفسها */
.cards{display:grid;gap:16px}
.card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:transform .5s var(--out),border-color .4s,box-shadow .5s}
.card .ic{width:36px;height:36px;color:var(--ink);position:relative}
.card p{color:var(--grey);font-size:16px;position:relative}
.card h3{position:relative}
.dark .card{background:var(--card);border-color:transparent}
.dark .card .ic{color:var(--tape)}
.dark .card p{color:var(--line)}
.card .idx{font-size:13px;color:var(--grey);position:relative}
.dark .card .idx{color:var(--tape)}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(242,194,48,.22),transparent 70%);opacity:0;transition:opacity .5s;pointer-events:none}
.spot:hover::before{opacity:1}
.card:hover{transform:translateY(-4px);border-color:rgba(242,194,48,.55);box-shadow:0 24px 50px -30px rgba(28,29,31,.35)}
.dark .card:hover{box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.draw path,.draw circle,.draw rect{stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset 1.6s var(--ease) .3s}
.in .draw path,.in .draw circle,.in .draw rect,.no-js .draw path,.no-js .draw circle,.no-js .draw rect{stroke-dashoffset:0}
@media (min-width:700px){.cards{grid-template-columns:repeat(2,1fr);gap:20px}.cards-3{grid-template-columns:repeat(3,1fr)}}
.chain{margin:0 0 28px;display:none}
@media (min-width:700px){.chain{display:block}}
/* الخاتمة: الكلمات تنوّر وأنت تمرّ عليها */
.close{margin-top:clamp(48px,7vw,80px);font-size:clamp(26px,4.6vw,48px);line-height:1.3;max-width:20em}
.close b{display:block;font-weight:800}
.js .close .w{color:var(--grey);transition:color .45s var(--ease)}
.js .close .w.lit{color:var(--ink)}

/* وش نسوي: قصة بثلاثة فصول، مشهد كل فصل يثبت وأنت تقرا نصه */
.story{display:grid;gap:0;border-top:1px solid var(--line)}
.chapter{display:block;padding:clamp(28px,5vw,56px) 0 clamp(40px,6vw,72px);border-bottom:1px solid var(--line)}
.scene{position:sticky;top:calc(var(--head) + 8px);z-index:2;background:var(--ink);color:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(28,29,31,.6)}
.scene .sc{width:100%;height:auto}
.sc-d,.plan-d{display:none}   /* نسخ الكمبيوتر من المشاهد: تظهر من 900px (الجوال يبقى على نسخه) */
.chapter .text{padding-top:28px}
.chapter h3{font-size:clamp(24px,3vw,32px)}
.list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.list li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.list li::before{content:"";flex:none;width:10px;height:10px;margin-top:9px;background:var(--tape)}
@media (min-width:900px){
  /* على الكمبيوتر: مشهد كل فصل يثبت ويعبّي الشاشة وأنت تقرا نصه، ولما يخلص الفصل مشهد الفصل اللي بعده يستلم منه (يدفعه لفوق)
     مع تلاشي خفيف مربوط بالتمرير (في السكربت)، بدون قفزة ولا فراغ ميت */
  .story{border-top:0}
  .chapter{display:grid;grid-template-columns:1fr 1.3fr;column-gap:64px;align-items:start;min-height:calc(100vh + 320px);padding:0;border:0}
  .chapter .text{grid-column:1;grid-row:1;align-self:center;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
  .scene{grid-column:2;grid-row:1;top:calc(var(--head) + 24px);height:min(calc(100vh - var(--head) - 48px),760px);margin-bottom:16px;display:flex;flex-direction:column;justify-content:center;padding:24px;
    background-image:linear-gradient(var(--card) 1px,transparent 1px),linear-gradient(90deg,var(--card) 1px,transparent 1px);background-size:20px 20px;will-change:opacity,transform}
  .scene .bgp{display:none}
  .sc-m,.plan-m{display:none}
  .sc-d{display:block;width:100%;height:100%}
  .plan-d{display:block;flex:1 1 auto;min-height:0;width:100%;height:100%}
  .s-monthly{padding:24px}
  .s-monthly .counts{margin-top:16px}
  .js .scene{transition:none}
  .story.static .chapter{min-height:0;padding:40px 0}
  .story.static .scene{position:static;height:auto;opacity:1!important;transform:none!important}
}
@media (min-width:1600px){.chapter{grid-template-columns:1fr 1.45fr}}
/* عناصر المشاهد تطلع وحدة وحدة */
.js .scene .el,.js .scene .an,.js .scene .dl{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) var(--d,0s),transform .8s var(--out) var(--d,0s)}
.js .scene.in .el,.js .scene.in .an,.js .scene.in .dl{opacity:1;transform:none}
.scene .lb{font-family:var(--f-text),sans-serif;font-size:12px;fill:var(--line)}
.scene .lb.sm{font-size:10px;fill:var(--paper)}
.scene .lb.dk{fill:var(--ink)}
.s-monthly{padding:22px 22px 14px}
.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;border-top:1px solid var(--card);padding-top:12px}
.count{text-align:center}
.count b{display:block;font-size:clamp(24px,3vw,34px);font-weight:500;color:var(--tape);line-height:1.2}
.count span{display:block;font-size:11px;line-height:1.8;color:var(--line);padding:0 2px}
.monthly .kicker{margin-bottom:12px}
.monthly .h2like{font-size:clamp(24px,3vw,34px)}
.rows{margin-top:24px;display:grid;gap:0}
.row{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line);align-items:start}
.row .num{font-size:40px;line-height:1.1;font-weight:500;color:var(--ink);padding-top:2px}
.row .num.sq{display:block;width:14px;height:14px;background:var(--tape);margin:12px 0 0 auto}
.row b{display:block;font-family:var(--f-display),sans-serif;font-weight:700;font-size:19px;line-height:1.3;margin-bottom:4px}
.row p{color:var(--grey);font-size:15px}
.note{margin-top:20px;font-size:14px;color:var(--grey);padding-inline-start:14px;border-inline-start:2px solid var(--tape)}

/* المخطط اللي يرسم نفسه ويتلوّن ويتأثث */
.plan{width:100%;height:auto}
.plan .wall{fill:none;stroke:var(--paper);stroke-width:5;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.4s var(--ease)}
.plan .wall.thin{stroke-width:2.5;stroke-dasharray:900;stroke-dashoffset:900}
.plan .room{fill:var(--card);opacity:0;transition:opacity .9s var(--ease)}
.plan .room.hi{fill:var(--tape)}
.plan text{font-family:var(--f-text),sans-serif;font-size:13px;fill:var(--line);opacity:0;transition:opacity .6s}
.plan text.hi{fill:var(--ink);font-weight:600}
.plan .fur{stroke:var(--line);stroke-width:1.2;stroke-linecap:round}
.plan .fur *{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s var(--ease) 2.6s}
.plan .hi ~ .fur{stroke:var(--ink)}
.plan.plan-d .fur{stroke:var(--line)}
.plan.plan-d .fur-hi{stroke:var(--ink)}
.plan .d{stroke:var(--line);stroke-width:1;opacity:0;transition:opacity .6s}
.plan .dn{font-family:var(--f-mono),monospace;font-size:11px;fill:var(--line);opacity:0;transition:opacity .6s;direction:ltr;unicode-bidi:isolate}
.plan .stamp rect{fill:var(--tape)}
.plan .stamp text{font-family:var(--f-text),sans-serif;font-size:11px;font-weight:600;fill:var(--ink);opacity:1}
.plan .stamp{opacity:0;transform:scale(.8);transform-origin:348px 18px;transition:opacity .5s 3.2s,transform .6s var(--out) 3.2s}
.plan.in .wall{stroke-dashoffset:0}
.plan.in .room{opacity:1}
.plan.in .room:nth-of-type(1){transition-delay:1.2s}.plan.in .room:nth-of-type(2){transition-delay:1.45s}.plan.in .room:nth-of-type(3){transition-delay:1.7s}.plan.in .room:nth-of-type(4){transition-delay:1.95s}.plan.in .room:nth-of-type(5){transition-delay:2.2s}.plan.in .room:nth-of-type(6){transition-delay:2.45s}
.plan.in text,.plan.in .d,.plan.in .dn{opacity:1;transition-delay:2.6s}
.plan.in .fur *{stroke-dashoffset:0}
.plan.in .stamp{opacity:1;transform:none}
.no-js .plan .wall{stroke-dashoffset:0}.no-js .plan .room,.no-js .plan text,.no-js .plan .d,.no-js .plan .dn,.no-js .plan .stamp{opacity:1;transform:none}.no-js .plan .fur *{stroke-dashoffset:0}

/* أعمالنا: شبكة على الكمبيوتر، وشريط ينسحب على الجوال؛ القطعة تنقاس لما تمرّ عليها */
.works{display:grid;gap:28px}
@media (max-width:639px){
  .works{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .works::-webkit-scrollbar{display:none}
  .work{flex:0 0 82%;scroll-snap-align:center}
}
@media (min-width:640px){.works{grid-template-columns:repeat(2,1fr);gap:28px 24px}}
@media (min-width:1000px){.works{grid-template-columns:repeat(3,1fr);gap:40px 28px}}
.work{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transform-style:preserve-3d;transition:transform .6s var(--out)}
.work .frame{position:relative}
.work .media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:12px;background:var(--line);transition:box-shadow .5s}
.work .media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}
.work .media::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(28,29,31,.08);pointer-events:none}
.work:hover .media{box-shadow:0 30px 60px -36px rgba(28,29,31,.5)}
.work .media.tile{background:var(--ink);display:flex;align-items:center;justify-content:center;padding:18%}
.work .media.tile img{object-fit:contain;transition:none}
.work .tag{position:absolute;top:14px;inset-inline-start:14px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;line-height:1.8;padding:4px 10px;border-radius:4px;display:flex;align-items:center;gap:8px}
.work .tag::before{content:"";width:8px;height:8px;background:var(--tape)}
.work .tag-b{top:auto;bottom:14px;inset-inline-start:auto;inset-inline-end:14px}
/* خطوط المقاس اللي تطلع على القطعة */
.work .mx,.work .my{position:absolute;color:var(--ink);opacity:0;transition:opacity .4s;pointer-events:none}
.work .mx{top:-22px;inset-inline:0;height:14px}
.work .mx::before{content:"";position:absolute;inset-inline:0;top:7px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.work .mx::after,.work .my::after{content:"";position:absolute;background:currentColor}
.work .mx::after{top:0;inset-inline-start:0;width:1px;height:14px;box-shadow:calc(-1 * var(--mxw,300px)) 0 0 currentColor}
.work .mx span{position:absolute;top:-24px;inset-inline-start:0;font-size:12px;line-height:1.8;white-space:nowrap;background:var(--paper);padding:0 6px;border-radius:3px}
.band .work .mx span{background:var(--line)}
.work .my{top:0;bottom:0;inset-inline-end:-22px;width:14px}
.work .my::before{content:"";position:absolute;inset-block:0;left:7px;width:1px;background:currentColor;transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease)}
.work .my::after{left:0;top:0;width:14px;height:1px;box-shadow:0 var(--myh,400px) 0 currentColor}
.work .my span{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);font-size:11px}
@media (hover:hover){
  .work:hover .media img{transform:scale(1.03)}
  .work:hover .mx,.work:hover .my{opacity:1}
  .work:hover .mx::before{transform:scaleX(1)}.work:hover .my::before{transform:scaleY(1)}
}
.work .meta{display:flex;gap:12px;align-items:baseline}
.work .idx{font-size:13px;color:var(--grey);flex:none}
.work h3{font-size:20px}
.work p{color:var(--grey);font-size:15px;margin-top:4px}
.work .more{font-weight:600;font-size:14px;margin-top:8px;display:inline-flex;gap:6px;align-items:center}
.work .more .ic{width:16px;height:16px;transition:transform .3s}
.work:hover .more .ic{transform:translateX(-4px)}
.works-bar{display:none;align-items:center;gap:16px;margin-top:14px}
@media (max-width:639px){.works-bar{display:flex}}
.works-bar .dim{flex:1;margin:0}
.works-bar .dim b{position:absolute;top:50%;height:3px;width:var(--w,16.6%);inset-inline-start:var(--x,0);transform:translateY(-50%);background:var(--tape);transition:inset-inline-start .2s}
.works-bar .mono{font-size:12px;color:var(--grey)}

/* المثال الحي: المتصفح يميل ويثبت، وتبديل كمبيوتر / جوال */
.live-grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.live-grid{grid-template-columns:.9fr 1.1fr}}
.pulse{display:inline-block;width:8px;height:8px;background:var(--tape);margin-inline-start:4px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.seg{display:inline-flex;margin-top:24px;border:1px solid var(--grey);border-radius:var(--r);padding:3px;gap:3px;background:var(--card)}
.seg button{font:500 14px/1.8 var(--f-text),sans-serif;letter-spacing:0;background:transparent;color:var(--line);border:0;padding:6px 16px;border-radius:5px;cursor:pointer;transition:background .25s,color .25s}
.seg button.on{background:var(--tape);color:var(--ink)}
.devices{position:relative;perspective:1600px}
.browser{background:var(--card);border-radius:14px;padding:10px 10px 12px;box-shadow:0 0 0 1px var(--grey),0 40px 80px -40px rgba(0,0,0,.8);transition:opacity .6s var(--ease),transform 1s var(--out)}
.browser .laptop-bar{display:flex;gap:6px;padding:4px 4px 10px;direction:ltr;align-items:center}
.browser .laptop-bar i{width:9px;height:9px;border-radius:50%;background:var(--grey);display:block}
.browser .laptop-bar i:first-child{background:var(--tape)}
.browser .laptop-bar span{margin-left:12px;font:400 11px/1.4 var(--f-mono),monospace;color:var(--line);background:var(--ink);padding:4px 10px;border-radius:4px;flex:1;text-align:center;direction:ltr}
.browser img{border-radius:6px;width:100%;height:auto}
.js .devices.in .browser{transform:none}
.js .devices .browser{transform:rotateX(14deg) translateY(30px)}
.js .devices.in .browser{transform:rotateX(0) translateY(0)}
.live-phone{position:absolute;inset-inline-start:50%;top:0;transform:translateX(50%) translateY(24px);width:min(272px,70vw);opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .8s var(--out)}
.devices.show-phone .browser{opacity:0;transform:translateY(-16px) scale(.97);pointer-events:none;position:absolute;inset:0}
.devices.show-phone .live-phone{opacity:1;transform:translateX(50%) translateY(0);pointer-events:auto;position:relative}
.live .small{font-size:14px;color:var(--line);margin-top:14px}
@media (min-width:900px){
  /* على الكمبيوتر: الإطارين في نفس الخانة، فارتفاع القسم ثابت، والتبديل تلاشي وتصغير خفيف 400ms */
  .live-grid{perspective:1600px}
  .devices{display:grid;grid-template-columns:1fr;place-items:center}
  .devices .browser,.devices .live-phone{grid-area:1/1;transition:opacity .4s var(--ease),transform .4s var(--out)}
  .devices .browser{width:100%}
  .js .devices .browser,.js .devices.in .browser{transform:none}
  .js .devices[data-reveal]{transform:rotateX(14deg) translateY(30px)}
  .js .devices[data-reveal].in{transform:none}
  .devices .live-phone,.devices.show-phone .live-phone{position:static;inset:auto;width:min(272px,70vw)}
  .devices .live-phone{opacity:0;transform:scale(.94);pointer-events:none}
  .devices.show-phone .live-phone{opacity:1;transform:none;pointer-events:auto}
  .js .devices.show-phone .browser,.js .devices.show-phone.in .browser{opacity:0;transform:scale(.94);pointer-events:none;position:static;inset:auto}
}

/* كيف نشتغل: خط زمني يمتلي مع التمرير، وكل خطوة تنوّر لما توصلها */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.rail{position:absolute;inset-inline-start:21px;top:24px;bottom:24px;width:2px;background:var(--line)}
.rail i{position:absolute;inset:0;background:var(--tape);transform:scaleY(0);transform-origin:top}
.step{position:relative;padding:14px 0 26px;padding-inline-start:68px}
.step .n{position:absolute;inset-inline-start:0;top:18px;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r);font:500 15px/1 var(--f-mono),monospace;color:var(--grey);background:var(--paper);border:2px solid var(--line);transition:background .4s,color .4s,border-color .4s,transform .5s var(--out)}
.step.on .n{background:var(--tape);border-color:var(--tape);color:var(--ink);transform:scale(1.06)}
.step h3{font-size:20px;margin-top:10px}
.step p{color:var(--grey);font-size:15px;margin-top:6px}
.step .sbody{opacity:.55;transition:opacity .5s}
.step.on .sbody{opacity:1}
@media (min-width:900px){
  .rail{inset-inline-start:50%;margin-inline-start:-1px}
  .step{width:50%;padding-inline-start:0;padding-inline-end:56px;padding-block:18px 34px}
  .step .n{inset-inline-start:auto;inset-inline-end:-22px}
  .step:nth-child(odd){margin-inline-start:50%;padding-inline-end:0;padding-inline-start:56px}
  .step:nth-child(odd) .n{inset-inline-end:auto;inset-inline-start:-22px}
}

/* من نحن */
.about-grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:72px}}
.about .statement{font-size:clamp(28px,4.4vw,48px);line-height:1.3;font-family:var(--f-display),sans-serif;font-weight:700}
.about .lead{margin-top:20px}
.why{margin-top:36px;padding:24px;border-radius:12px;background:var(--paper)}
.why h3{font-size:18px;margin-bottom:8px}
.why p{font-size:16px}
.grid-art{width:100%;height:auto}
.grid-art .g{stroke:rgba(92,95,100,.35);stroke-width:1}
.grid-art .u{fill:var(--ink)}
.grid-art .y{fill:var(--tape)}
.grid-art .dl{stroke:var(--grey);stroke-width:1}
.grid-art .t{font-family:var(--f-mono),monospace;font-size:10px;fill:var(--grey);direction:ltr;unicode-bidi:isolate}
.js .grid-art .u,.js .grid-art .y{opacity:0;transform:translateY(-40px);transform-box:fill-box;transition:opacity .5s var(--ease),transform .9s var(--out)}
.js .grid-art.in .u,.js .grid-art.in .y{opacity:1;transform:none}
.grid-art.in .u:nth-of-type(2){transition-delay:.1s}.grid-art.in .u:nth-of-type(3){transition-delay:.2s}.grid-art.in .u:nth-of-type(4){transition-delay:.3s}
.grid-art.in .y:nth-of-type(1){transition-delay:.55s}.grid-art.in .y:nth-of-type(2){transition-delay:.68s}.grid-art.in .y:nth-of-type(3){transition-delay:.81s}
.js .grid-art .dl,.js .grid-art .t{opacity:0;transition:opacity .6s 1.1s}
.js .grid-art.in .dl,.js .grid-art.in .t{opacity:1}

/* تواصل */
.contact h2{font-size:clamp(40px,8vw,96px);line-height:1.3;font-weight:800}
.contact .lead{color:var(--line);margin-top:20px}
.tiles{display:grid;gap:16px;margin-top:40px}
@media (min-width:700px){.tiles{grid-template-columns:1fr 1fr}}
.tile{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid transparent;border-radius:14px;padding:28px 24px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .4s var(--out),border-color .4s}
.tile:hover{transform:translateY(-4px);border-color:rgba(242,194,48,.55)}
.tile>*{position:relative}
.tile .lbl{display:flex;align-items:center;gap:10px;color:var(--line);font-size:14px;font-weight:600}
.tile .lbl .ic{width:22px;height:22px;color:var(--tape)}
.tile .val{font-size:clamp(17px,4.4vw,30px);font-weight:500;text-align:start;overflow-wrap:anywhere;color:var(--paper);line-height:1.4}
.tile .hint{font-size:14px;color:var(--line)}
.contact .small{margin-top:20px;font-size:14px;color:var(--line)}

/* الفوتر */
footer{background:var(--ink);color:var(--line);padding:36px 0 44px;font-size:14px}
.foot{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.foot .brand svg{height:32px}
.foot .en{font-family:var(--f-mono),monospace;direction:ltr;letter-spacing:.32em;font-size:12px;color:var(--line)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot nav a{text-decoration:none;color:var(--line)}
.foot nav a:hover{color:var(--paper)}
.foot .copy{width:100%;color:var(--line);display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}

/* السهم الخفي (الشاشات الواسعة بس): في الزاوية تحت يسار، داخل عمود المسطرة عشان ما يغطي أي محتوى. ينزل للقسم اللي بعده ويختفي في آخر قسم.
   مفاتيح الأسهم وPage Down تشتغل من 900px حتى لو السهم مخفي */
.next{display:none}
@media (min-width:1340px){
  .next{display:grid;place-items:center;position:fixed;bottom:20px;left:12px;z-index:26;width:40px;height:40px;border-radius:var(--r);border:1px solid var(--grey);background:var(--ink);color:var(--paper);cursor:pointer;padding:0;box-shadow:0 10px 30px -12px rgba(0,0,0,.7);transition:opacity .3s var(--ease),transform .3s var(--out),background .2s,color .2s,border-color .2s}
  .next svg{width:20px;height:20px}
  .next:hover{background:var(--tape);color:var(--ink);border-color:var(--tape);transform:translateY(-2px)}
  .next.hide{opacity:0;pointer-events:none;transform:translateY(10px)}
  .js.ready .next svg{animation:nudge 2.4s ease-in-out infinite}
}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* المسافة بين العنوان الصغير والكبير (كمبيوتر): النقاط والشدّات والهمزات ما تلمس اللي فوقها */
@media (min-width:900px){.kicker{margin-bottom:26px}.hero .kicker{margin-bottom:22px}.monthly .kicker{margin-bottom:20px}.contact .kicker{margin-bottom:34px}}

/* 404 */
.nf{min-height:calc(100vh - var(--head));display:grid;place-items:center;text-align:center;padding:60px 0}
.nf .code{font-family:var(--f-mono),monospace;font-size:clamp(90px,24vw,220px);line-height:1;color:var(--tape);font-weight:500;direction:ltr}
.nf h1{font-size:clamp(30px,6vw,56px);margin-top:12px}
.nf p{margin-top:12px;color:var(--line)}

/* تقليل الحركة: كل شي ظاهر وثابت، بدون مسطرة ولا شريط تقدّم */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .hero .w,.js .hero .lead,.js .hero .cta,.js .hero .kicker,.js .hero .phone,.js .hero .laptop,.js [data-reveal],.js .stagger>*{opacity:1;transform:none;filter:none}
  .hero .dot{opacity:.9}
  .ann,.ann-x::before,.ann-y::before{opacity:1;transform:none}
  .ready .phone-screen img{animation:none}
  .dim::before{transform:scaleX(1)}.dim i,.dim .n{opacity:1}
  .head .kicker::after{transform:scaleX(1)}
  .plan .wall,.plan .fur *{stroke-dashoffset:0}.plan .room,.plan text,.plan .d,.plan .dn,.plan .stamp{opacity:1;transform:none}
  .js .grid-art .u,.js .grid-art .y,.js .grid-art .dl,.js .grid-art .t{opacity:1;transform:none}
  .js .scene .el,.js .scene .an,.js .scene .dl{opacity:1;transform:none}
  .js .close .w{color:inherit}
  .draw path,.draw circle,.draw rect{stroke-dashoffset:0}
  .js .devices .browser{transform:none}
  .step .sbody{opacity:1}
  .hero .tape,.hero-bg,.hero-visual,.stage{transform:none!important}
  .ruler,.progress{display:none}
  .js .scene{opacity:1!important;transform:none!important}
}