/* ==========================================================================
   WEAVOTECH — main.css
   أسود نقي، أحادي اللون. قصة مربوطة بالسكرول: حضور متفرق يصير نظاماً متصلاً.
   صفر مكتبات. صفر build step. transform و opacity فقط.
   ========================================================================== */

@font-face { font-family:"Readex Pro"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../fonts/readex-arabic-400.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF; }
@font-face { font-family:"Readex Pro"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("../fonts/readex-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }

:root {
  --bg:        #000;
  --bg-2:      #0a0a0a;
  --surface:   #0f0f0f;
  --surface-2: #171717;
  --line:      #4a4a4a;   /* 2.37:1 — بنية مرئية */
  --line-2:    #5a5a5a;   /* 3.04:1 — حدود عناصر تفاعلية (WCAG 1.4.11) */

  --fg:       #fff;      /* 21:1 */
  --fg-2:     #ededed;   /* 18:1 */
  --fg-dim:   #a1a1a1;   /*  8.1:1 */
  --fg-faint: #7a7a7a;   /*  4.9:1 — أصغر نص مسموح */

  --font: "Readex Pro", system-ui, "Segoe UI", Tahoma, sans-serif;
  --fs-hero: clamp(2.5rem, 10.5vw, 4.25rem);
  --fs-h2:   clamp(1.5rem, 6.4vw, 2.5rem);
  --fs-h3:   clamp(1.0625rem, .35vw + .95rem, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1.1vw + .88rem, 1.3125rem);
  --fs-body: 1rem;
  --fs-sm:   .875rem;
  --fs-xs:   .75rem;

  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem;
  --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem;
  --section-y: clamp(4rem, 9vw, 7rem);
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --maxw: 1100px;
  --r: 6px;

  --dur-1: 150ms; --dur-2: 500ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 60px;

  /* هندسة القصة — svh ثابت فلا يعيد التخطيط عند انكماش شريط عنوان iOS */
  --stage-h: 100svh;
  --scene-h: 100svh;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:var(--header-h); }
body {
  font-family:var(--font); font-size:var(--fs-body); line-height:1.75;
  color:var(--fg-2); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img { display:block; max-width:100%; }
svg { display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; padding:0; }
h1,h2,h3 { font-weight:600; line-height:1.3; color:var(--fg); }
[lang=en] h1,[lang=en] h2,[lang=en] h3 { line-height:1.1; }
button { font:inherit; }
:focus-visible { outline:2px solid var(--fg); outline-offset:3px; }
::selection { background:var(--fg); color:var(--bg); }
a,button,summary { touch-action:manipulation; }
[lang=en] h1,[lang=en] h2,[lang=en] h3,.lat { letter-spacing:-.025em; }
[lang=en] body,[lang=en] p { line-height:1.6; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
main { position:relative; z-index:1; }
section { padding-block:var(--section-y); }
.label { display:block; font-size:var(--fs-xs); color:var(--fg-faint); margin-bottom:var(--s-4); }
.h2 { font-size:var(--fs-h2); }
.lead { font-size:var(--fs-lead); color:var(--fg-dim); max-width:34em; margin-top:var(--s-4); }

/* ── الهيدر ──────────────────────────────────────────────────────────────── */
.hdr { position:sticky; top:0; z-index:50; background:rgba(0,0,0,.88); border-bottom:1px solid var(--line); }
@supports (backdrop-filter:blur(8px)) { .hdr { backdrop-filter:blur(8px); } }
.hdr-in { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); height:var(--header-h); }
.brand { display:inline-flex; align-items:center; gap:var(--s-2); min-height:44px; color:var(--fg); }
.brand svg { width:22px; height:22px; flex:none; }
.brand-txt { font-weight:600; font-size:.95rem; letter-spacing:.08em; }
.nav { display:none; gap:var(--s-6); font-size:var(--fs-sm); }
.nav a { color:var(--fg-dim); transition:color var(--dur-1); }
.nav a:hover { color:var(--fg); }
.hdr-act { display:flex; align-items:center; gap:var(--s-2); }
.lang { display:grid; place-items:center; min-width:44px; min-height:44px;
  font-size:var(--fs-xs); color:var(--fg-dim); border:1px solid var(--line); border-radius:var(--r);
  transition:color var(--dur-1),border-color var(--dur-1); }
.lang:hover { color:var(--fg); border-color:var(--line-2); }

/* واتساب في الهيدر — الجوال فقط. القصة طويلة، فالتواصل يبقى في متناول الإبهام */
.hdr-wa { display:grid; place-items:center; width:44px; height:44px;
  color:var(--bg); background:var(--fg); border-radius:var(--r);
  transition:opacity var(--dur-1),transform var(--dur-1) var(--ease); }
.hdr-wa svg { width:20px; height:20px; }
.hdr-wa:hover { opacity:.88; }
.hdr-wa:active { transform:scale(.94); }

.menu { position:relative; }
.menu summary { display:grid; place-items:center; width:44px; height:44px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); list-style:none; color:var(--fg-dim); }
.menu summary::-webkit-details-marker { display:none; }
.menu summary svg { width:18px; height:18px; }
.menu[open] summary { color:var(--fg); border-color:var(--line-2); }
.menu-panel { position:absolute; inset-inline-end:0; inset-block-start:calc(100% + 8px);
  min-width:min(62vw,220px); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s-2); box-shadow:0 16px 40px rgba(0,0,0,.8); }
.menu-panel a { display:flex; align-items:center; padding:0 var(--s-4); min-height:44px;
  font-size:var(--fs-sm); color:var(--fg-dim); border-radius:4px; }
.menu-panel a:hover { background:var(--surface-2); color:var(--fg); }
@media (min-width:880px){ .nav{display:flex} .menu{display:none} .hdr-wa{display:none} }

/* ── الأزرار ─────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  font-weight:600; font-size:var(--fs-sm); padding:var(--s-3) var(--s-5); min-height:46px;
  border:1px solid transparent; border-radius:var(--r); cursor:pointer;
  transition:transform var(--dur-1) var(--ease),background var(--dur-1),border-color var(--dur-1),opacity var(--dur-1); }
.btn svg { width:18px; height:18px; flex:none; }
.btn:active { transform:scale(.95); }
.btn-1 { background:var(--fg); color:var(--bg); }        /* 21:1 */
.btn-1:hover { opacity:.88; }
.btn-2 { background:transparent; color:var(--fg); border-color:var(--line-2); }
.btn-2:hover { border-color:var(--fg-faint); background:var(--surface); }
.btn-lg { font-size:var(--fs-body); padding:var(--s-4) var(--s-6); min-height:52px; }

/* ── الرمز التجريدي: نقطة الحضور الرقمي ─────────────────────────────────── */
.sym { width:48px; height:48px; flex:none; }
.hero-sym { width:56px; height:56px; flex:none; margin-bottom:var(--s-5); }
.sym-ring { transform-box:fill-box; transform-origin:center;
  animation:breathe 6.5s var(--ease) infinite alternate; }
@keyframes breathe {
  from { transform:scale(1);    opacity:.26; }
  to   { transform:scale(1.12); opacity:.52; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden;
  min-height:calc(100svh - var(--header-h));
  display:grid; align-content:center;
  padding-block:var(--s-8) var(--section-y); }
.hero-in { position:relative; z-index:1; }
.hero h1 { font-size:var(--fs-hero); line-height:1.25; }
.hero h1 .w { display:block; overflow:hidden; padding-bottom:.28em; margin-bottom:-.28em; }
.hero h1 .w > span { display:block; transform:translateY(108%);
  animation:up 720ms var(--ease) both; animation-delay:calc(var(--d,0) * 150ms); }
@keyframes up { to { transform:translateY(0); } }
.hero .lead { max-width:30em; }
.hero-cta { display:flex; flex-direction:column; gap:var(--s-3); margin-top:var(--s-8); }
@media (min-width:520px){ .hero-cta{ flex-direction:row; flex-wrap:wrap } }
.hero-meta { margin-top:var(--s-6); font-size:var(--fs-sm); color:var(--fg-faint); }

/* خطوط بيانات تنمو في أول ثانية ونصف — حركة مرئية قبل أي سكرول.
   تعيش داخل الحشوة السفلية للـHero (56px < 64px) فلا تعبر أي نص أبداً.
   الـkeyframes تحرك transform فقط، فتبقى شفافية كل خط كما كُتبت في الـSVG. */
.hero-fx2 { position:absolute; left:0; bottom:0; width:100%; height:56px; z-index:0; pointer-events:none; }
[dir=rtl] .hero-fx2 { transform:scaleX(-1); }
.hero-fx2 .hl { transform-box:fill-box; transform-origin:0 50%;
  animation:hlGrow 820ms var(--ease) both; animation-delay:calc(340ms + var(--d,0) * 190ms); }
@keyframes hlGrow { from { transform:scaleX(0) } to { transform:none } }
.hero-fx2 .hn { transform-box:fill-box; transform-origin:center;
  animation:hnIn 620ms var(--ease) both; animation-delay:calc(760ms + var(--d,0) * 190ms); }
@keyframes hnIn { from { transform:scale(0) } to { transform:none } }

/* صمام أمان: شاشات قصيرة — الـCTA يبقى داخل أول viewport */
@media (max-height:700px) {
  .hero h1    { font-size:clamp(2.125rem, 8.6vw, 3rem); }
  .hero .lead { font-size:1.0625rem; }
  .hero-sym   { width:44px; height:44px; margin-bottom:var(--s-4); }
  .hero-cta   { margin-top:var(--s-6); }
  .hero-meta  { margin-top:var(--s-5); }
}

/* ══════════════════════════════════════════════════════════════════════════
   القصة: مسرح ملتصق واحد + timeline مُسمّى واحد.
   حرج: ممنوع overflow على .saga أو .saga-scenes أو main أو body أو html،
   وإلا مات position:sticky صامتاً على iOS. القصّ يعيش على .stage وحدها.
   ══════════════════════════════════════════════════════════════════════════ */
.saga { position:relative; }
.saga-bg { position:sticky; top:0; height:var(--stage-h); z-index:0; pointer-events:none; }
.stage { position:relative; height:100%; overflow:clip; }
.net { position:absolute; inset:0; width:100%; height:100%; }
.sym-layer { position:absolute; inset:0; display:grid; place-items:center; }
.saga-scenes { position:relative; z-index:1; margin-top:calc(-1 * var(--stage-h)); }

.scene { min-height:var(--scene-h); display:grid; padding-block:var(--s-10); }
.scene-in { max-width:34em; margin-inline-end:auto; }
.fix { margin-top:var(--s-6); font-size:var(--fs-sm); color:var(--fg); font-weight:600; }

/* خمس بصمات مختلفة — لا شكلان متجاوران متشابهان */
.sc-a { align-content:end; }
.sc-a .fix { border-top:1px solid var(--line); padding-top:var(--s-4); }
.sc-b { align-content:start; }
.sc-c { align-content:end; }
.sc-c .fix { border-inline-start:1px solid var(--line); padding-inline-start:var(--s-4); margin-top:var(--s-5); }
.sc-d { align-content:center; }
.sc-d .scene-in { text-align:center; margin-inline:auto; max-width:22em; }
.sc-d .h2 { font-size:calc(var(--fs-h2) * 1.08); }
.sc-d .lead { margin-inline:auto; }
.sc-e { align-content:center; }
.sc-e .scene-in { max-width:26em; }
.sc-e .h2 { font-size:calc(var(--fs-h2) * 1.16); }

/* ── الرمز ينزل ─────────────────────────────────────────────────────────── */
/* الأساس = الاحتياطي (متصفحات بلا scroll-driven animations): نزول على درجات */
/* ينزل 36svh ويستقر في مركز المنظومة المتصلة — مسافة مرئية بلا بحث عنها */
.sym { transform:translate3d(0,-36svh,0) scale(.80);
  transition:transform 700ms var(--ease); will-change:transform; }
.saga[data-scene="1"] .sym { transform:translate3d(0,-27svh,0) scale(.86); }
.saga[data-scene="2"] .sym { transform:translate3d(0,-18svh,0) scale(.94); }
.saga[data-scene="3"] .sym { transform:translate3d(0,-10svh,0) scale(1.02);}
.saga[data-scene="4"] .sym { transform:translate3d(0, -4svh,0) scale(1.09);}
.saga[data-scene="5"] .sym { transform:translate3d(0,  0svh,0) scale(1.16);}

/* تراكمي: ما ظهر يبقى ظاهراً، تماماً كما يفعل fill:both في نسخة السكرول */
.sat { opacity:0; transition:opacity 550ms var(--ease); }
.saga[data-scene="1"] .sat-1,
.saga[data-scene="2"] .sat-1, .saga[data-scene="2"] .sat-2,
.saga[data-scene="3"] .sat-1, .saga[data-scene="3"] .sat-2, .saga[data-scene="3"] .sat-3,
.saga[data-scene="4"] .sat-1, .saga[data-scene="4"] .sat-2, .saga[data-scene="4"] .sat-3, .saga[data-scene="4"] .sat-4,
.saga[data-scene="5"] .sat { opacity:1; }

/* العناصر مكتوبة في وضعها النهائي المتصل — الحركة تزيحها قبله فقط */
.sat .node { transform-box:fill-box; transform-origin:center; }
.sat .link { transform-box:fill-box; transform-origin:0 0; }

@supports (animation-timeline: view()) {
  .saga { view-timeline-name:--saga; view-timeline-axis:block; view-timeline-inset:0; }
  .sym, .sat { transition:none; }

  .sym { animation:symDescend linear both;
         animation-timeline:--saga; animation-range:contain 0% contain 100%; }
  @keyframes symDescend {
    0%   { transform:translate3d(0,-36svh,0) scale(.80); }
    25%  { transform:translate3d(0,-25svh,0) scale(.88); }
    50%  { transform:translate3d(0,-15svh,0) scale(.97); }
    75%  { transform:translate3d(0, -7svh,0) scale(1.06);}
    100% { transform:translate3d(0,  0svh,0) scale(1.16);}
  }

  .sat { opacity:1; animation:satIn linear both; animation-timeline:--saga; }
  .sat .node { animation:nodeGather linear both; animation-timeline:--saga; }
  .sat .link { animation:linkGrow   linear both; animation-timeline:--saga; }
  @keyframes satIn      { from { opacity:0 } 24% { opacity:1 } to { opacity:1 } }
  @keyframes nodeGather { from { transform:translate(var(--dx,0px), var(--dy,0px)) scale(.68) }
                          to   { transform:none } }
  @keyframes linkGrow   { from { transform:scale(0) } 55% { transform:scale(0) } to { transform:none } }

  /* شرائح القصة — كل مشهد يملك خُمس نفس الـtimeline */
  .sat-1, .sat-1 .node, .sat-1 .link { animation-range:contain  2% contain 20%; }
  .sat-2, .sat-2 .node, .sat-2 .link { animation-range:contain 20% contain 40%; }
  .sat-3, .sat-3 .node, .sat-3 .link { animation-range:contain 40% contain 60%; }
  .sat-4, .sat-4 .node, .sat-4 .link { animation-range:contain 60% contain 78%; }
  .sat-5, .sat-5 .node, .sat-5 .link { animation-range:contain 76% contain 98%; }
}

/* ── الخدمات: أربعة أشكال مختلفة، ولا بطاقة واحدة ───────────────────────── */
.svc { margin-top:var(--s-10); display:grid; gap:var(--s-10); }
.svc h3 { font-size:var(--fs-h3); margin-bottom:var(--s-2); }
.svc p  { color:var(--fg-dim); font-size:var(--fs-sm); max-width:32em; }
.ic { width:36px; height:36px; color:var(--fg); margin-bottom:var(--s-5); }

/* 1 — مواقع: لوح ملء العرض، السطح المملوء الوحيد في القسم */
.svc-web { background:var(--surface); border-block:1px solid var(--line);
  margin-inline:calc(-1 * var(--gutter)); padding:var(--s-10) var(--gutter); }
.svc-web h3 { font-size:calc(var(--fs-h3) * 1.25); }
.svc-web p { font-size:var(--fs-body); color:var(--fg-2); }

/* 2 — أتمتة: صف طباعي بلا صندوق، ينزلق مع السكرول */
.svc-auto { overflow:hidden; padding-block:var(--s-6); border-bottom:1px solid var(--line); }
.svc-auto .ic { margin-bottom:var(--s-4); }
.svc-auto .row { display:flex; gap:var(--s-6); white-space:nowrap; align-items:baseline;
  font-size:var(--fs-h3); font-weight:600; color:var(--fg); }
.svc-auto .row-ghost { color:var(--fg-faint); font-weight:400; margin-top:var(--s-2); opacity:.45; }
.svc-auto p { margin-top:var(--s-5); }
@supports (animation-timeline: view()) {
  .svc-auto .row       { animation:driftA linear both; animation-timeline:view(); animation-range:cover 15% cover 85%; }
  .svc-auto .row-ghost { animation:driftB linear both; animation-timeline:view(); animation-range:cover 15% cover 85%; }
  [dir=rtl] .svc-auto .row       { animation-name:driftB; }
  [dir=rtl] .svc-auto .row-ghost { animation-name:driftA; }
  @keyframes driftA { from { transform:translateX(-5%) } to { transform:translateX(5%) } }
  @keyframes driftB { from { transform:translateX(5%) }  to { transform:translateX(-5%) } }
}

/* 3 — ذكاء اصطناعي: عمود ضيق مركّز */
.svc-ai { max-width:26em; margin-inline:auto; text-align:center; padding-block:var(--s-8); }
.svc-ai .ic { margin-inline:auto; }
.svc-ai p { margin-inline:auto; }

/* 4 — بريد واستضافة: شرائط أفقية مستقرة */
.svc-mail .ic { margin-bottom:var(--s-4); }
.svc-mail .band { padding-block:var(--s-5); border-top:1px solid var(--line); }
.svc-mail .band:last-child { border-bottom:1px solid var(--line); }

@media (min-width:900px) {
  .svc { grid-template-columns:1.35fr 1fr; gap:var(--s-12) var(--s-10);
    grid-template-areas:"web web" "auto auto" "ai mail"; }
  .svc-web  { grid-area:web; margin-inline:0; padding-inline:var(--s-10); }
  .svc-auto { grid-area:auto; }
  .svc-ai   { grid-area:ai; }
  .svc-mail { grid-area:mail; }
}

/* ── كيف نعمل: قوس على قضيب، بلا أرقام وبلا بطاقات ──────────────────────── */
.flow { margin-top:var(--s-10); position:relative;
  border-inline-start:1px solid var(--line); padding-inline-start:var(--s-6); }
.flow-i { position:relative; padding-block:var(--s-5); }
.flow-i::before { content:""; position:absolute;
  inset-inline-start:calc(-1 * var(--s-6) - 4px);
  inset-block-start:calc(var(--s-5) + .55em);
  width:7px; height:7px; background:var(--fg); border-radius:1px; }
.flow-i:nth-child(2){ margin-inline-start:var(--s-3); }
.flow-i:nth-child(3){ margin-inline-start:var(--s-6); }
.flow-i:nth-child(4){ margin-inline-start:var(--s-3); }
.flow-i h3 { font-size:var(--fs-h3); }
.flow-i p  { color:var(--fg-dim); font-size:var(--fs-sm); margin-top:var(--s-1); }
.flow::after { content:""; position:absolute; inset-block:0; inset-inline-start:-1px;
  width:1px; background:var(--fg-faint); transform:scaleY(0); transform-origin:top; }
@supports (animation-timeline: view()) {
  .flow::after { animation:railGrow linear both; animation-timeline:view();
    animation-range:entry 30% cover 70%; }
  @keyframes railGrow { to { transform:scaleY(1); } }
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cta { border-top:1px solid var(--line); position:relative; overflow:hidden; }
.cta .glow { position:absolute; inset-block-end:-60%; left:0; right:0; margin-inline:auto;
  width:min(800px,140%); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.09) 0%, transparent 62%); }
.cta-in { position:relative; z-index:1; }
.cta-row { display:flex; flex-direction:column; gap:var(--s-4); margin-top:var(--s-8); align-items:flex-start; }
@media (min-width:520px){ .cta-row{ flex-direction:row; align-items:center; gap:var(--s-6) } }
.cta-row a.mail { color:var(--fg-dim); font-size:var(--fs-sm);
  display:inline-flex; align-items:center; min-height:44px; }
.cta-row a.mail:hover { color:var(--fg); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ftr { border-top:1px solid var(--line); }
.ftr-grid { display:grid; gap:var(--s-8); padding-block:var(--s-12) var(--s-8); }
@media (min-width:680px){ .ftr-grid{ grid-template-columns:1.6fr 1fr 1fr; gap:var(--s-10) } }
.ftr .fh { font-size:var(--fs-xs); color:var(--fg-faint); margin-bottom:var(--s-4); font-weight:400; line-height:1.6; }
.ftr li + li { margin-top:0; }
.ftr p { color:var(--fg-dim); font-size:var(--fs-sm); }
.ftr a { color:var(--fg-dim); font-size:var(--fs-sm);
  display:inline-flex; align-items:center; min-height:44px; }
.ftr a:hover { color:var(--fg); }
.ftr .brand { margin-bottom:var(--s-4); }
.ftr-note { color:var(--fg-faint); margin-top:var(--s-2); }
.ftr-bar { display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:space-between;
  padding-block:var(--s-6); border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--fg-faint); }

/* ── صفحة قريباً (زينتها في soon.css) ───────────────────────────────────── */
.soon { min-height:100vh; min-height:100dvh; display:grid; place-items:center; position:relative; overflow:hidden; }
.soon-in { padding:var(--s-16) var(--gutter); max-width:560px; position:relative; z-index:1; }
.soon-in h1 { font-size:clamp(1.75rem,6vw,2.5rem); margin-block:var(--s-5) var(--s-4); }
.soon-in p { color:var(--fg-dim); }
.soon-act { display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-8); }

/* ── الظهور عند السكرول ──────────────────────────────────────────────────── */
html.js .reveal { opacity:0; transform:translateY(40px);
  transition:opacity var(--dur-2) var(--ease),transform 600ms var(--ease);
  transition-delay:calc(var(--i,0) * 90ms); }
html.js .reveal.in { opacity:1; transform:none; }
@supports (animation-timeline:view()) {
  html.js .reveal { opacity:1; transform:none; transition:none;
    animation:riseIn linear both; animation-timeline:view(); animation-range:entry 15% entry 85%; }
  @keyframes riseIn { from{opacity:0;transform:translateY(48px) scale(.985)} to{opacity:1;transform:none} }
}

/* ══════════════════════════════════════════════════════════════════════════
   الجوال: قصة أقصر، بلا حذف كلمة واحدة من النص
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:767px) {
  :root { --scene-h: 78svh; }
  .net .sat-x { display:none; }   /* عقد الجو التزيينية فقط */
  .sat-4      { display:none; }   /* المشهد الرابع يشارك بصريات الثالث، ونصه كامل */
  .scene-in   { max-width:none; }
  .sc-a, .sc-c { padding-block-end:10svh; }
  .sc-b        { padding-block-start:8svh; }
}
@media (max-width:767px) and (max-height:680px) { :root { --scene-h: 86svh; } }
@supports (animation-timeline: view()) {
  @media (max-width:767px) {
    .sat-3, .sat-3 .node, .sat-3 .link { animation-range:contain 40% contain 78%; }
  }
}
@media (min-width:900px) { .scene-in { max-width:30em; } }

/* ══════════════════════════════════════════════════════════════════════════
   prefers-reduced-motion: القصة تنهار إلى مقال عادي برسم واحد ساكن.
   الـSVG مكتوب في وضعه النهائي، فـ transform:none هي اللوحة المكتملة.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  .saga-bg     { position:static; height:auto; }
  .saga-scenes { margin-top:0; }
  .stage       { height:clamp(240px,44svh,420px); }
  .scene       { min-height:0; padding-block:var(--section-y); }
  .sat-4       { display:revert; }

  html.js .reveal { opacity:1 !important; transform:none !important;
    transition:none !important; animation:none !important; }
  .hero h1 .w > span,
  .hero-fx2 .hl, .hero-fx2 .hn,
  .sym, .sat, .sat .node, .sat .link, .sym-ring,
  .svc-auto .row, .svc-auto .row-ghost {
    animation:none !important; transition:none !important;
    transform:none !important; opacity:1 !important; }
  .flow::after { animation:none !important; transform:scaleY(1) !important; }
  .btn:active, .hdr-wa:active { transform:none; }
}

/* >>> WEAVO:start */
/* ══════════════════════════════════════════════════════════════════════════
   WE ARE WEAVO — ست بلاطات تُبنى من الأساس إلى القمة.
   هندسة إسقاط ثابتة (yaw 38°، pitch 28°) محسوبة مرة واحدة: كل وجه أمامي
   هو matrix() أفينية، فالنص HTML حقيقي يتبع منظور البلاطة تماماً.
   الأساس = الحالة النهائية المكتملة (بلا JS، بلا scroll-driven، reduced motion).
   الحركة تُضاف فقط داخل no-preference + @supports.
   ══════════════════════════════════════════════════════════════════════════ */
.weavo { --k:.83; --boxh:600px; --wv-light:233,238,251;
  position:relative;
  background:linear-gradient(#000, #070707 8vh, #070707 calc(100% - 8vh), #000); }
.wv-defs { position:absolute; width:0; height:0; overflow:hidden; }
.weavo-stage { overflow:clip; }
.weavo-grid { display:grid; gap:var(--s-8); }
.weavo-copy { max-width:36rem; }
.wv-eyebrow { font-size:var(--fs-xs); font-weight:600; letter-spacing:.32em; color:var(--fg-faint); }
.wv-h { font-size:clamp(1.875rem, 4.4vw, 3.75rem); line-height:1.22; margin-top:var(--s-4); }
[lang=en] .wv-h { line-height:1.04; letter-spacing:-.035em; }
.wv-h1, .wv-h2 { display:block; }
.wv-h2 { color:var(--fg-dim); font-weight:400; }
.wv-end { font-size:var(--fs-body); color:var(--fg); font-weight:600; }

/* الصندوق يحجز الأبعاد النهائية فلا CLS مهما تغيّر --k */
.stack-box { width:calc(413px * var(--k)); height:calc(var(--boxh) * var(--k));
  justify-self:center; direction:ltr; }
.stack { position:relative; width:413px; height:var(--boxh);
  transform:scale(var(--k)); transform-origin:0 0; }
.slabs { position:absolute; inset:0; margin:0; }
.lv { position:absolute; left:0; width:413px; height:265px; }
.lv-1 { bottom:24px; z-index:1; }
.lv-2 { bottom:82.3px; z-index:2; }
.lv-3 { bottom:140.5px; z-index:3; }
.lv-4 { bottom:198.8px; z-index:4; }
.lv-5 { bottom:257.1px; z-index:5; }
.lv-6 { bottom:315.4px; z-index:6; }
.slab { position:absolute; inset:0; transform-origin:206.4px 135.4px; }
.slab-body, .slab-seam, .slab-pulse, .wv-cap, .wv-floor {
  position:absolute; left:0; top:0; width:413px; height:265px; overflow:visible; }
.wv-floor { top:auto; bottom:24px; }
.slab-seam  { opacity:.5; }
.slab-pulse { opacity:0; }
.wv-cap     { opacity:.9; }

/* النص على الوجه الأمامي: matrix أفينية مطابقة لإسقاط الوجه */
.slab-label { position:absolute; left:0; top:0; width:300px; height:62px;
  padding-inline-start:54px; line-height:62px; white-space:nowrap; text-align:left;
  font-size:16px; font-weight:600; letter-spacing:.11em; color:#c7ccd4;
  transform-origin:0 0; transform:matrix(0.7880, 0.2890, 0, 0.8829, -4.19, 117.51);
  pointer-events:none; }
.lv-6 .slab-label { font-size:22px; letter-spacing:.2em; color:#e4e8ef; }
.slab-label-hi { color:#fff !important;
  text-shadow:0 0 14px rgba(var(--wv-light),.75), 0 0 3px rgba(255,255,255,.9); }

/* هالة التجميع — تدرج شعاعي ثابت، بلا filter:blur */
.wv-halo { position:absolute; left:-154px; bottom:-10px; width:720px; height:640px; z-index:0;
  border-radius:50%; pointer-events:none; opacity:.34;
  background:radial-gradient(closest-side, rgba(var(--wv-light),.16), rgba(var(--wv-light),.05) 55%, transparent); }

/* الخيوط الرقمية تحمل البلاطة من الأسفل — مخفية في الحالة النهائية */
.wv-threads i { position:absolute; width:1.5px; height:120px; margin-left:-.75px; opacity:0;
  transform-origin:50% 100%;
  background:linear-gradient(to top, rgba(var(--wv-light),0), rgba(var(--wv-light),.95)); }
.wv-bloom { position:absolute; left:114px; top:215.6px; width:320px; height:90px;
  margin:-45px 0 0 -160px; border-radius:50%; opacity:0; pointer-events:none;
  transform:rotate(20.1deg);
  background:radial-gradient(closest-side, rgba(var(--wv-light),.6), rgba(var(--wv-light),.14) 55%, transparent); }

@media (min-width:768px) {
  .weavo { --k:.86; --boxh:708px; }
  .weavo-grid { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr); column-gap:var(--s-12); }
  .weavo-copy { grid-area:1/1; align-self:start; }
  .wv-end     { grid-area:1/1; align-self:end; font-size:var(--fs-lead); }
  .stack-box  { grid-area:1/2; align-self:end; justify-self:end; }
}
/* --k محسوب من ارتفاع المسرح المتاح: boxh × k + الهيدر + الحواف ≤ ارتفاع الشاشة */
@media (min-width:1100px) and (min-height:900px)  { .weavo { --k:1; } }
@media (min-width:1440px) and (min-height:1000px) { .weavo { --k:1.1; } }
@media (min-width:768px) and (max-height:760px) { .weavo { --k:.74; } }
@media (min-width:768px) and (max-height:650px) { .weavo { --k:.62; } }
@media (max-width:360px) { .weavo { --k:.78; } }
@media (max-width:767px) and (max-height:700px) { .weavo { --k:.74; } }
@media (max-width:767px) and (max-height:620px) { .weavo { --k:.66; } }

/* ── الحركة: مربوطة بالسكرول بالكامل، لا مؤقّت ولا اختطاف للتمرير ──────── */
@media (prefers-reduced-motion:no-preference) {
  @supports (animation-timeline: view()) {
    .weavo { height:380svh; padding-block:0; view-timeline-name:--wv; view-timeline-axis:block; view-timeline-inset:0; }
    .weavo-stage { position:sticky; top:0; height:100svh; display:grid;
      padding-block:calc(var(--header-h) + 4svh) 4svh; }
    .weavo-grid { height:100%; }
    .weavo-grid > * { min-height:0; }

    .slab { animation:wvDrop both cubic-bezier(.3,.7,.35,1); animation-timeline:--wv; }
    .wv-threads i { animation:wvThread both cubic-bezier(.3,.7,.35,1); animation-timeline:--wv; }
    .wv-bloom { animation:wvBloom both linear; animation-timeline:--wv; }
    .slab-pulse { animation:wvPulse both linear; animation-timeline:--wv; }
    .slab-seam { animation:wvSeams both linear; animation-timeline:--wv; animation-range:contain 91% contain 100%; }
    .wv-cap, .slab-label-hi { animation:wvCap both linear; animation-timeline:--wv; animation-range:contain 79% contain 86%; }
    .wv-halo { animation:wvHalo both linear; animation-timeline:--wv; animation-range:contain 84% contain 100%; }
    .wv-floor { animation:wvFloor both linear; animation-timeline:--wv; animation-range:contain 0% contain 16%; }
    .wv-end { animation:wvEnd both linear; animation-timeline:--wv; animation-range:contain 92% contain 99%; }
    .lv-1 .slab, .lv-1 .wv-threads i { animation-range:contain 5% contain 16%; }
    .lv-1 .wv-bloom { animation-range:contain 14.6% contain 20.6%; }
    .lv-1 .slab-pulse { animation-range:contain 82% contain 85.5%; }
    .lv-2 .slab, .lv-2 .wv-threads i { animation-range:contain 17.5% contain 28.5%; }
    .lv-2 .wv-bloom { animation-range:contain 27.1% contain 33.1%; }
    .lv-2 .slab-pulse { animation-range:contain 83.6% contain 87.1%; }
    .lv-3 .slab, .lv-3 .wv-threads i { animation-range:contain 30% contain 41%; }
    .lv-3 .wv-bloom { animation-range:contain 39.6% contain 45.6%; }
    .lv-3 .slab-pulse { animation-range:contain 85.2% contain 88.7%; }
    .lv-4 .slab, .lv-4 .wv-threads i { animation-range:contain 42.5% contain 53.5%; }
    .lv-4 .wv-bloom { animation-range:contain 52.1% contain 58.1%; }
    .lv-4 .slab-pulse { animation-range:contain 86.8% contain 90.3%; }
    .lv-5 .slab, .lv-5 .wv-threads i { animation-range:contain 55% contain 66%; }
    .lv-5 .wv-bloom { animation-range:contain 64.6% contain 70.6%; }
    .lv-5 .slab-pulse { animation-range:contain 88.4% contain 91.9%; }
    .lv-6 .slab, .lv-6 .wv-threads i { animation-range:contain 67.5% contain 78.5%; }
    .lv-6 .wv-bloom { animation-range:contain 77.1% contain 83.1%; }
    .lv-6 .slab-pulse { animation-range:contain 90% contain 93.5%; }

    @keyframes wvDrop {
      0%   { transform:translate3d(0,-120px,0) rotate(-2deg); opacity:0; }
      22%  { opacity:1; }
      80%  { transform:translate3d(0,-8px,0) rotate(-.25deg); }
      91%  { transform:translate3d(0,1.5px,0) rotate(.05deg); }
      100% { transform:translate3d(0,0,0) rotate(0deg); opacity:1; }
    }
    @keyframes wvThread {
      0%   { transform:scaleY(1); opacity:0; }
      22%  { opacity:.9; }
      80%  { transform:scaleY(.0667); opacity:.9; }
      91%  { transform:scaleY(0); opacity:0; }
      100% { transform:scaleY(0); opacity:0; }
    }
    @keyframes wvBloom {
      0%   { opacity:0; transform:rotate(20.1deg) scale(.7); }
      35%  { opacity:1; transform:rotate(20.1deg) scale(1); }
      100% { opacity:0; transform:rotate(20.1deg) scale(1.12); }
    }
    @keyframes wvPulse { 0% { opacity:0 } 45% { opacity:1 } 100% { opacity:0 } }
    @keyframes wvSeams { 0% { opacity:0 } 18% { opacity:1 } 60% { opacity:1 } 100% { opacity:.5 } }
    @keyframes wvCap   { from { opacity:0 } to { opacity:.9 } }
    @keyframes wvHalo  {
      0%   { opacity:0; transform:scale(.8); }
      45%  { opacity:1; transform:scale(1); }
      100% { opacity:.34; transform:scale(1); }
    }
    @keyframes wvFloor { from { opacity:1 } 70% { opacity:1 } to { opacity:.6 } }
    @keyframes wvEnd   { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }

    /* الجوال: دوران أخف، هالة أهدأ، ومسافة سكرول أقصر */
    @media (max-width:767px) {
      .weavo { height:300svh; }
      /* العنوان يعبر أولاً ثم يُخلي المسرح للبلاطات، وسطر الختام يأخذ مكانه في النهاية */
      .weavo-grid { grid-template-rows:minmax(0,1fr); }
      .weavo-copy, .wv-end, .stack-box { grid-area:1/1; }
      .weavo-copy { align-self:start; animation:wvCopyOut both linear; animation-timeline:--wv; animation-range:contain 2% contain 11%; }
      .wv-end { align-self:start; }
      .stack-box { align-self:end; }
      @keyframes wvCopyOut { from { opacity:1; transform:none } to { opacity:0; transform:translateY(-28px) } }
      .slab { animation-name:wvDropM; }
      .wv-halo { animation-name:wvHaloM; }
      @keyframes wvDropM {
        0%   { transform:translate3d(0,-120px,0) rotate(-1deg); opacity:0; }
        22%  { opacity:1; }
        80%  { transform:translate3d(0,-8px,0) rotate(-.1deg); }
        91%  { transform:translate3d(0,1.5px,0) rotate(0deg); }
        100% { transform:translate3d(0,0,0) rotate(0deg); opacity:1; }
      }
      @keyframes wvHaloM { 0% { opacity:0 } 45% { opacity:.6 } 100% { opacity:.24 } }
    }
  }
}
@media (max-width:767px) {
  .wv-halo { width:560px; left:-74px; }
  .wv-bloom { width:240px; margin-left:-120px; }
}
/* <<< WEAVO:end */