/* איורי דף היכולות.
 *
 * קטע שהוא רק כותרת ורשימת תבליטים נקרא כמו מפרט טכני. כל
 * קטע כאן מקבל לוח כהה עם איור שמראה את מה שהטקסט מתאר, וכך
 * העין מקבלת עוגן לפני שהיא נכנסת לפרטים.
 *
 * ── האנימציות ───────────────────────────────────────
 *
 * כולן CSS בלבד, ולכן כלי הנגישות ("עצירת תנועה") והגדרת
 * המערכת prefers-reduced-motion מבטלים אותן בלי שורת קוד
 * נוספת כאן — a11y.css כבר מכבה animation גורף.
 *
 * כל איור חייב להיראות שלם גם בפריים הראשון: אנימציה היא
 * תוספת, לא התוכן.
 */

/* ═══ מבנה הקטע ══════════════════════════════════════════ */
.sec-top{
  display:grid; grid-template-columns:1fr 1.04fr;
  gap:54px; align-items:center; margin-bottom:12px;
}
/* צד האיור מתחלף בין קטע לקטע — אחרת הדף הופך לעמודה
   אחת ארוכה שהעין מפסיקה לעצור בה */
.sec-top.flip .art{order:-1}

.sec-intro .eyebrow{display:flex; align-items:center; gap:10px}
.sec-n{
  font-size:0.75rem; font-weight:800; letter-spacing:.06em;
  color:var(--ink-3); background:var(--paper-3);
  padding:3px 9px; border-radius:20px;
}
.sec-intro h2{margin-top:14px; font-size:clamp(1.75rem,3.5vw,2.625rem)}
.sec-intro .lead{margin-top:18px}

.art{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:4/3;
  background:linear-gradient(158deg,#16233D 0%,#0E1A30 56%,#070E1C 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 70px -38px rgba(7,14,28,.9);
}
/* זוהר רך שמרים את האיור מהרקע השטוח */
.art::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(540px 360px at 70% 8%, rgba(247,144,9,.16), transparent 66%);
}
.art svg{position:relative; width:100%; height:100%; display:block}


/* ═══ אוצר המילים של האיורים ═════════════════════════════
   כל הצורות נבנות מאותן שבע מחלקות, כדי ששנים עשר האיורים
   ייראו כמו סדרה אחת ולא כמו שנים עשר ניסיונות. */
.a-card{fill:rgba(255,255,255,.055); stroke:rgba(255,255,255,.13); stroke-width:1.2}
.a-card-on{fill:rgba(247,144,9,.12); stroke:rgba(247,144,9,.5); stroke-width:1.4}
.a-bar{fill:rgba(255,255,255,.2); rx:2}
.a-bar-dim{fill:rgba(255,255,255,.1)}
.a-line{fill:none; stroke:rgba(255,255,255,.17); stroke-width:1.6}
.a-ink{fill:#BFD2E8; font:700 12px "Rubik",sans-serif}
.a-ink-s{fill:#7E93AE; font:500 10.5px "Rubik",sans-serif}
.a-amber{fill:none; stroke:#F79009; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.a-amber-f{fill:#F79009}
.a-blue{fill:none; stroke:#3E86F0; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.a-blue-f{fill:#3E86F0}
.a-ok{fill:none; stroke:#2FBF7E; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.a-ok-f{fill:#2FBF7E}

/* ═══ התנועות ════════════════════════════════════════════ */

/* זרימה לאורך קו — ערוצים נכנסים, מסמך בדרך, מכל שעובר */
@keyframes a-flow{to{stroke-dashoffset:-64}}
.a-flow{stroke-dasharray:5 11; animation:a-flow 2.2s linear infinite}

/* קו שנמתח — מסלול שנבנה */
@keyframes a-draw{
  0%{stroke-dashoffset:var(--len,600)}
  58%,100%{stroke-dashoffset:0}
}
.a-draw{stroke-dasharray:var(--len,600); animation:a-draw 5s ease-in-out infinite}

/* קשת חלקית — דונט שאינו אמור להגיע למעגל שלם. חייב לבוא
   אחרי a-draw, כי שתיהן מחלקה אחת וסדר הקובץ הוא שמכריע. */
.a-arc{stroke-dasharray:var(--len,273) 999}

/* נסיעה על המסלול */
@keyframes a-ride{from{offset-distance:0%} to{offset-distance:100%}}
.a-ride{offset-rotate:auto; animation:a-ride 5s linear infinite}

/* הופעה בתור — שורות שנסמנות אחת אחרי השנייה */
@keyframes a-pop{
  0%,8%{opacity:0; transform:scale(.6)}
  18%,74%{opacity:1; transform:scale(1)}
  86%,100%{opacity:0; transform:scale(.6)}
}
.a-pop{transform-box:fill-box; transform-origin:center; animation:a-pop 4.5s ease-in-out infinite}

/* נשימה — מדד, מפלס, התראה */
@keyframes a-beat{0%,100%{opacity:1} 50%{opacity:.32}}
.a-beat{animation:a-beat 2.4s ease-in-out infinite}

/* גדילה מהבסיס — עמודות דוח */
@keyframes a-grow{
  0%{transform:scaleY(.08)}
  46%,100%{transform:scaleY(1)}
}
.a-grow{transform-box:fill-box; transform-origin:bottom; animation:a-grow 4s cubic-bezier(.3,.9,.3,1) infinite}

/* ריחוף עדין — סימון מיקום שנוחת */
@keyframes a-drop{
  0%{transform:translateY(-16px); opacity:0}
  26%,100%{transform:translateY(0); opacity:1}
}
.a-drop{transform-box:fill-box; animation:a-drop 4s ease-out infinite}

/* גל שמתפשט — מעקב חי, ניסיון גישה שנהדף */
@keyframes a-ping{
  0%{r:10; opacity:.7}
  70%,100%{r:40; opacity:0}
}

/* השהיות — כדי ששורות לא יידלקו יחד */
.d1{animation-delay:.25s} .d2{animation-delay:.5s} .d3{animation-delay:.75s}
.d4{animation-delay:1s}   .d5{animation-delay:1.25s} .d6{animation-delay:1.5s}

@media (max-width:980px){
  .sec-top{grid-template-columns:1fr; gap:34px}
  .sec-top.flip .art{order:0}
  .art{aspect-ratio:16/11}
}