/* ── symbol-01 · رسم مسارات SVG مع السكرول ──
   الخطوط بتنرسم مع تقدّم السكرول، وبالنهاية علامة بتطلع، وبعدها التسميات.
   مرجع التقنية: قسم `symbole` بـ`hagitantebi.co.il/elvea` (فُحص بالكود).
   🔑 لا يحتاج ولا صورة — أرخص حركة وأعلاها أثراً.
   🔴 الحركة بتتضبّط بالجافاسكربت (GSAP)؛ هون الشكل الساكن بس. */
.sym01{padding-block:var(--s-8);text-align:center}
.sym01 .eyebrow{font-family:var(--lat);font-size:14px;font-weight:600;
                letter-spacing:.18em;color:var(--accent);display:block;
                margin-bottom:var(--s-2)}
.sym01 h2{font-size:clamp(26px,3.6vw,40px);line-height:1.25;font-weight:800;
          letter-spacing:-.02em;margin-bottom:var(--s-2)}
.sym01 .lede{font-size:clamp(15px,1.5vw,17.5px);color:var(--muted);
             max-width:44ch;margin:0 auto var(--s-6);line-height:1.75}

.sym01 .stage{width:min(100%,320px);margin:0 auto}
.sym01 svg{width:100%;height:auto;display:block;overflow:visible}
/* كل المسارات بتُرسم بنفس القلم — اللون من الثيم لا من الملف */
.sym01 .ink{fill:none;stroke:var(--fg);stroke-width:2;
            stroke-linecap:round;stroke-linejoin:round}
.sym01 .ink.soft{stroke:var(--line);stroke-width:1.5}
.sym01 .ink.hot{stroke:var(--accent);stroke-width:2.4}
/* العلامة اللي بتطلع بالآخر */
.sym01 .spark{fill:var(--accent)}
.sym01 .halo{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.45}

.sym01 .legend{display:grid;grid-template-columns:repeat(3,1fr);
               gap:var(--s-2);max-width:640px;margin:var(--s-6) auto 0}
.sym01 .legend .item{padding:var(--s-2);border-radius:var(--r);
                     background:var(--surface);
                     box-shadow:inset 0 0 0 1px var(--line)}
.sym01 .legend b{display:block;font-size:16px;font-weight:700;margin-bottom:2px}
.sym01 .legend span{font-size:13.5px;color:var(--muted);line-height:1.6}

@media(max-width:640px){
  .sym01 .legend{grid-template-columns:1fr;max-width:320px}
}