/* ── פלטה ─────────────────────────────────────────────────────────────
   איריס ואקווה, על נייר חם.

   הכיוון הסגול נשאר, אבל הוא זז למקום משלנו. שלוש הבחנות מכוונות מול
   ליברי, כדי שהדמיון יהיה בז'אנר ולא בזהות:

     1. הסגול עמוק יותר ופחות ממתק. #5D3FD3 במקום #9966FF - אותו
        משפחה, רוויה וכהות אחרות לגמרי.
     2. מבטא משני של אקווה (#0FA3A3) במקום כחול מלכותי. ליברי מונוכרום
        סגול; שני הגוונים כאן הם החתימה שלנו, והאקווה גם נקרא מדעי.
     3. הנייר חם (#F7F4EE) ולא אפור קריר. זה גם מה שמגשר אל 113 המצגות
        שנשארות בקרם.

   גם הצורה שונה: כפתורים ברדיוס מתון ולא גלולות מלאות. גלולה שמורה
   כאן לתגיות בלבד.

   התפקידים, ואין צבע דקורטיבי:
     iris     פעולה. כפתור, לשונית פעילה, הדבר שכדאי ללחוץ עליו.
     aqua     ידע. תאוריה, הסבר, רמז.
     lilac    הקשר. תגיות, שיוך, "משלב".
     ink      רצינות. פתיח, כותרת תחתונה, מדורים מובילים.

   אין אדום ואין צהוב. שני החריגים הם משוב על תשובה - ירוק לנכון,
   ורוד-שזיף ללא נכון - ושם הצבע הוא מידע ולא קישוט.
   ──────────────────────────────────────────────────────────────────── */
:root {
  --bg: #F7F4EE;
  --surface: #FFFDFA;
  --border: #E7DFD1;
  --border-strong: #D2C7B5;
  --text: #262036;
  --text-heading: #1B1236;
  --text-muted: #6C6579;

  /* הגוון הראשי - הפעולה */
  --iris: #5D3FD3;
  --iris-deep: #40289C;
  --iris-soft: #ECE7FB;
  --iris-pale: #B9A6F5;

  /* המבטא המשני - הידע. זה הצבע שמבדיל אותנו. */
  --aqua: #0FA3A3;
  --aqua-deep: #0A6F70;
  --aqua-soft: #DCF1F0;

  /* הקשר ושיוך */
  --lilac: #E6E0F9;
  --lilac-deep: #574A80;

  /* משוב על תשובה. מידע, לא קישוט. */
  --ok: #2E7D5B;
  --ok-soft: #E2F2EA;
  --no: #9B4A72;
  --no-soft: #F7E9F0;

  /* סולם דרגות הקושי - מדרג של האיריס, מבהיר לכהה */
  --lv1: #F2EFF9;      --lv1-ink: #6A6284;
  --lv2: #E6E0F9;      --lv2-ink: #55479C;
  --lv3: #D6CAF6;      --lv3-ink: #452F9F;
  --lv4: #B9A6F5;      --lv4-ink: #2C1A75;

  /* שמות ותיקים, כדי שקוד קיים לא יישבר */
  --accent: var(--iris);
  --accent-hover: var(--iris-deep);
  --accent-soft: var(--iris-soft);
  --info: var(--aqua);
  --info-soft: var(--aqua-soft);
  --success: var(--ok);
  --success-soft: var(--ok-soft);
  --warn: var(--lilac-deep);
  --warn-soft: var(--lilac);
  --violet: var(--iris);
  --violet-deep: var(--iris-deep);
  --violet-soft: var(--iris-soft);
  --violet-pale: var(--iris-pale);
  --blue: var(--aqua);
  --blue-deep: var(--aqua-deep);
  --blue-soft: var(--aqua-soft);
  --clay: var(--iris-pale);
  --clay-soft: var(--iris-soft);

  /* הכהה - אינדיגו-שזיף */
  --ink: #1B1236;
  --ink-2: #2A1A56;
  --ink-3: #3C2680;
  --ink-line: rgba(255, 253, 250, .14);
  --on-ink: #EFEAF7;
  --on-ink-muted: #A9A0C2;

  /* רדיוס מתון לכפתורים ולכרטיסים. הגלולה שמורה לתגיות. */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-btn: 12px;
  --shadow: 0 1px 2px rgba(27, 18, 54, .05), 0 6px 20px rgba(27, 18, 54, .06);
  --shadow-lift: 0 4px 10px rgba(27, 18, 54, .09), 0 16px 38px rgba(27, 18, 54, .12);
  --shadow-ink: 0 16px 40px rgba(27, 18, 54, .32);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Assistant", "Rubik", system-ui, -apple-system, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-hover); }

h1, h2, h3 { color: var(--text-heading); line-height: 1.25; margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ── כותרת עליונה ────────────────────────────────────────────────────── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* מעל פתיח כהה הכותרת שקופה ומתמזגת בו, כמו באתרי נחיתה. ברגע שגוללים
   מעבר לפתיח מוסיפים .is-stuck דרך app.js והיא חוזרת להיות לוח בהיר. */
body[data-page="home"] .site-header {
  background: transparent;
  border-bottom-color: transparent;
}

body[data-page="home"] .site-header .brand,
body[data-page="home"] .site-header .header-nav a { color: var(--on-ink); }
body[data-page="home"] .site-header .header-nav a:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
body[data-page="home"] .site-header.is-stuck {
  background: var(--surface);
  border-bottom-color: var(--border);
}
body[data-page="home"] .site-header.is-stuck .brand { color: var(--text-heading); }
body[data-page="home"] .site-header.is-stuck .header-nav a { color: var(--text-muted); }
body[data-page="home"] .site-header.is-stuck .header-nav a:hover {
  background: var(--accent-soft);
  color: var(--text-heading);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--text-heading);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .92rem;
  font-weight: 700;
  flex: none;
}

.header-nav { margin-inline-start: auto; display: flex; gap: 6px; }

.header-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .93rem;
  padding: 7px 12px;
  border-radius: 8px;
}

.header-nav a:hover { background: var(--accent-soft); color: var(--text-heading); }

/* הלשונית הנוכחית. הבעלים ביקש התמצאות קלה יותר, וזה החלק שעונה עליה:
   הכפתורים עצמם הם הלשוניות, והנוכחית נצבעת ומקבלת קו תחתון. התפריט
   הנפתח נשאר מעליהם ונותן קיצור עמוק בלי לצלול לעמוד קודם. */
.header-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--iris-deep);
  font-weight: 600;
  position: relative;
}

.header-nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline: 11px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

body[data-page="home"] .site-header .header-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}
body[data-page="home"] .site-header .header-nav a[aria-current="page"]::before {
  background: var(--iris-pale);
}
body[data-page="home"] .site-header.is-stuck .header-nav a[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--iris-deep);
}
body[data-page="home"] .site-header.is-stuck .header-nav a[aria-current="page"]::before {
  background: var(--accent);
}

/* ── פתיח ────────────────────────────────────────────────────────────
   רקע לימודי במקום תמונת פרופיל: שכבת אינדיגו עמוק, מעליה איור פיזיקה
   דהוי (מסלולים, וקטורים, מעגל, קווי שדה), ומעליו במה חיה שמריצה
   אנימציה אחת מתוך מאגר ומתחלפת. האיור נבנה ב-SVG מוטבע ב-index.html,
   בלי קבצי תמונה ובלי רשת. */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(880px 450px at 16% 6%, rgba(93, 63, 211, .40), transparent 62%),
    radial-gradient(720px 430px at 90% 94%, rgba(15, 163, 163, .26), transparent 64%),
    linear-gradient(158deg, var(--ink) 0%, var(--ink-2) 58%, var(--ink-3) 100%);
  color: var(--on-ink);
  margin-top: -64px;         /* הכותרת השקופה יושבת בתוך הפתיח */
  padding-top: 64px;
  overflow: hidden;
}

/* הצורות ברקע הן תפאורה, לא תוכן. הן היו רצות מתחת לכפתורים ולמספרים
   ומקשות על הקריאה, ולכן הן נמסכות החוצה בדיוק מעל עמודת הטקסט (מימין,
   כי העמוד RTL) ונשארות רק בצד הפנוי. */
.hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: .42;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, transparent 6%, #000 46%);
  mask-image: linear-gradient(to left, transparent 6%, #000 46%);
}

.hero-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 46px;
  align-items: center;
  padding: 58px 20px 66px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid var(--ink-line);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #7FE3DC;
}

.hero-text h1 {
  font-size: clamp(1.85rem, 4.4vw, 2.85rem);
  margin-bottom: 16px;
  color: #fff;
  letter-spacing: -.01em;
}

.hero-text h1 em { font-style: normal; color: #7FE3DC; }

.lead {
  color: var(--on-ink-muted);
  max-width: 52ch;
  margin: 0;
  font-size: 1.08rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.hero .btn {
  background: rgba(255, 255, 255, .08);
  border-color: var(--ink-line);
  color: var(--on-ink);
}
.hero .btn:hover { background: rgba(255, 255, 255, .17); border-color: rgba(255, 255, 255, .4); }
.hero .btn.primary {
  background: var(--violet);
  border-color: var(--violet);
  color: #fff;
  font-weight: 700;
}
.hero .btn.primary:hover { background: #7457E6; border-color: #7457E6; color: #fff; }

/* שני התחומים, מודגשים כבר בפתיח */
.hero-domains { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.hero-domain {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--ink-line);
  text-decoration: none;
  color: var(--on-ink);
  font-size: .92rem;
}
.hero-domain:hover { background: rgba(255, 255, 255, .14); }
.hero-domain svg { width: 19px; height: 19px; flex: none; color: #7FE3DC; }
.hero-domain b { font-weight: 700; }
.hero-domain span { color: var(--on-ink-muted); font-size: .85rem; }

.stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; }
.stat b {
  display: block;
  font-size: 1.7rem;
  color: #fff;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: .85rem; color: var(--on-ink-muted); }

/* ── במת האנימציה המתחלפת ───────────────────────────────────────────── */
.hero-stage {
  position: relative;
  border-radius: var(--radius-lg);
  background: rgba(9, 14, 33, .55);
  border: 1px solid var(--ink-line);
  box-shadow: var(--shadow-ink);
  padding: 16px 16px 12px;
  backdrop-filter: blur(2px);
}

.hero-stage-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 22px;
}
.hero-stage-head b { color: #fff; font-size: .98rem; }
.hero-stage-head span { color: var(--on-ink-muted); font-size: .84rem; }

.hero-canvas {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  aspect-ratio: 16 / 10;
}

.hero-canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .5s ease;
}
.hero-canvas svg.is-out { opacity: 0; }

.hero-dots { display: flex; gap: 6px; justify-content: center; margin-top: 11px; }
.hero-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
}
.hero-dot[aria-current="true"] { background: var(--violet); width: 22px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .hero-canvas * { animation: none !important; }
}

/* ── מדורים בעמוד הבית ──────────────────────────────────────────────── */
.band {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding: 52px 0;
  margin: 20px 0;
}

section[id] { scroll-margin-top: 78px; }   /* הכותרת הדביקה לא תכסה יעד עוגן */

.section-head { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: 10px; }

.section-sub {
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0 0 26px;
}

.wrap > .section-head, .wrap > .section-sub { margin-top: 0; }
main > section.wrap { padding-top: 46px; padding-bottom: 10px; }

.prose { max-width: 66ch; }
.prose p { margin: 0 0 15px; }
.prose p:last-child { margin-bottom: 0; }

/* ── מה מיוחד במצגות ────────────────────────────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 16px;
}

.feature {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}

.band .feature { background: var(--bg); }

.feature-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  margin-bottom: 14px;
}

.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.04rem; margin-bottom: 7px; }
.feature p { margin: 0; font-size: .93rem; color: var(--text-muted); }

/* ── סרטונים חינם ───────────────────────────────────────────────────── */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 16px;
}

.video-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--accent-soft);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-embed.soon {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    -45deg, var(--accent-soft), var(--accent-soft) 12px,
    #EBE3D2 12px, #EBE3D2 24px);
}

.soon-badge {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: .85rem;
  color: var(--text-muted);
}

.video-body { padding: 15px 17px 17px; }
.video-body h3 { font-size: 1rem; margin-bottom: 5px; }
.video-body p { margin: 0; font-size: .89rem; color: var(--text-muted); }

/* ── חיפוש ───────────────────────────────────────────────────────────── */
.search {
  position: relative;
  margin: 0 0 8px;
}

.search input {
  width: 100%;
  padding: 13px 44px 13px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
}

.search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-icon {
  position: absolute;
  inset-inline-start: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: grid;
  place-items: center;
}

/* ── לשוניות נושא / שנה ──────────────────────────────────────────────── */
.tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  margin: 30px 0 20px;
}

.tabs button {
  font: inherit;
  font-size: .95rem;
  padding: 8px 20px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.tabs button:hover { color: var(--text-heading); }

.tabs button[aria-selected="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ── כותרת קבוצה (מכניקה / חשמל) ────────────────────────────────────── */
.group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.12rem;
  margin: 30px 0 14px;
}

.group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.group-title .count {
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--accent-soft);
  border-radius: 20px;
  padding: 2px 11px;
}

/* ── רשת כרטיסים ─────────────────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 14px;
}

.grid.years { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

.card h3 { font-size: 1.06rem; margin-bottom: 5px; }
.card .meta { font-size: .85rem; color: var(--text-muted); }

.card.year {
  text-align: center;
  padding: 20px 14px;
}

.card.year h3 { font-size: 1.55rem; font-variant-numeric: tabular-nums; }

.section-note {
  font-size: .85rem;
  color: var(--text-muted);
  margin: -8px 0 14px;
}

/* ── רשימת שאלות ─────────────────────────────────────────────────────── */
.q-list { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }

.q-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}

.q-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

.q-num {
  flex: none;
  width: 54px;
  text-align: center;
  border-inline-end: 1px solid var(--border);
  padding-inline-end: 14px;
  align-self: stretch;
}

.q-num b {
  display: block;
  font-size: 1.35rem;
  color: var(--accent-hover);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.q-num span { font-size: .76rem; color: var(--text-muted); }

.q-body { flex: 1; min-width: 0; }
.q-body h3 { font-size: 1.04rem; margin-bottom: 6px; }

.q-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--text-muted);
}

.tag {
  background: var(--accent-soft);
  color: var(--text-heading);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: .78rem;
  white-space: nowrap;
}

.tag.topic { background: var(--info-soft); color: var(--info); }
.tag.video { background: var(--success-soft); color: var(--success); }

/* ── סימוני מיקוד ────────────────────────────────────────────────────
   מה שלא נדרש בבחינה של השנה מסומן, ולא נעלם. תלמיד בגרות רואה שאפשר
   לדלג; תלמיד מכינה, שצריך את החומר במלואו, מוצא את השאלה במקומה.

   בלי אדום ובלי צהוב: זה לא אזהרה אלא מידע, ושני הצבעים האלה היו
   קוראים לזה "שגיאה". הסימון נשען על הגוון השקט של הפלטה. */
.tag.scope { cursor: help; }
.tag.scope-reduced { background: var(--lilac); color: var(--lilac-deep); }
.tag.scope-out {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}

/* הכרטיס עצמו נרגע. עדיין קריא, כבר לא מושך את העין ראשון. */
.q-card.is-out { background: var(--bg); }
.q-card.is-out h3 { color: var(--text-muted); }

.scope-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 12px 0 0;
  padding: 11px 15px;
  border-radius: var(--radius-btn);
  background: var(--lilac);
  color: var(--lilac-deep);
  font-size: .9rem;
}
.scope-note.is-out {
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}
.scope-note b { font-weight: 700; }
.scope-note span { flex: 1 1 22ch; opacity: .92; }
.scope-note a { color: inherit; font-weight: 600; }

/* ── פירורי לחם ──────────────────────────────────────────────────────── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-muted);
  padding: 22px 0 0;
}

.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-hover); text-decoration: underline; }
.crumbs .sep { opacity: .5; }

.page-title { padding: 12px 0 22px; }
.page-title h1 { font-size: clamp(1.45rem, 3.6vw, 2rem); }
.page-title p { color: var(--text-muted); margin: 8px 0 0; }

/* ── עמוד שאלה ───────────────────────────────────────────────────────── */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: .95rem;
  padding: 11px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-heading);
  text-decoration: none;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease;
}

.btn:hover { background: var(--accent-soft); border-color: var(--accent); }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* היחס קובע את הגובה מתוך הרוחב. בלי min-height - הוא היה מרחיב את
   המסגרת מעבר לרוחב המסך בטלפון.

   המצגות עצמן בגוון קרם חם, והאתר סגול. מסגרת בגוון ביניים ניטרלי
   מרככת את המעבר, במקום להעמיד סגול רווי צמוד לקרם. */
.deck-frame {
  position: relative;
  width: 100%;
  background: #F7F5F1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  padding: 6px;
}

.deck-frame iframe { border-radius: 14px; }

.deck-frame iframe {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  border: 0;
  display: block;
  background: #FDFBF7;
}

.deck-hint {
  font-size: .84rem;
  color: var(--text-muted);
  margin: 10px 0 0;
  text-align: center;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 30px 0 0;
}

.info-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.info-cell dt { font-size: .78rem; color: var(--text-muted); margin-bottom: 5px; }
.info-cell dd { margin: 0; font-size: .97rem; color: var(--text-heading); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 34px 0 0;
}

.pager .btn { max-width: 46%; }
.pager .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── הודעות ופוטר ────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  color: var(--text-muted);
  padding: 50px 20px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}

.note {
  background: var(--info-soft);
  border: 1px solid #D3DEE9;
  border-radius: var(--radius);
  padding: 13px 16px;
  font-size: .9rem;
  color: var(--info);
  margin: 20px 0 0;
}

.site-footer {
  margin-top: 70px;
  background: var(--ink);
  color: var(--on-ink-muted);
  padding: 40px 0 34px;
  font-size: .88rem;
}

.footer-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 26px 20px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ink-line);
}

.footer-map h3 {
  color: #fff;
  font-size: .82rem;
  letter-spacing: .06em;
  margin-bottom: 11px;
  text-transform: none;
}

.footer-map ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.footer-map a { color: var(--on-ink-muted); text-decoration: none; }
.footer-map a:hover { color: #7FE3DC; text-decoration: underline; }

.footer-fine {
  padding-top: 22px;
  font-size: .82rem;
  color: #7C86AC;
  max-width: 78ch;
}

/* שורת הזכויות. נכתבת בכל עמוד על ידי build_nav.py, ולכן היא אף פעם
   לא חסרה בעמוד חדש ולא נכתבת פעמיים באותו עמוד. */
.footer-legal {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ink-line);
  font-size: .74rem;
  color: #6B739A;
}

main { padding-bottom: 20px; }

/* ── מפת האתר ────────────────────────────────────────────────────────── */
.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
}

.map-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.map-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.map-card .step {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ink);
  color: #7FE3DC;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.map-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.map-card p { margin: 0 0 12px; font-size: .92rem; color: var(--text-muted); }

.map-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
  font-size: .87rem;
  color: var(--text-muted);
}
.map-card li::before { content: "› "; color: var(--accent); }

.map-card .go, .domain-card .go {
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-hover);
  text-decoration: none;
}
.domain-card .go:hover { text-decoration: underline; }

/* ── שני התחומים ─────────────────────────────────────────────────────── */
.domain-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.domain-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 26px 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.domain-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--iris), var(--aqua));
}
.domain-card.is-electricity::before {
  background: linear-gradient(90deg, var(--aqua), var(--iris-pale));
}

.domain-card h3 {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.domain-card h3 svg { width: 24px; height: 24px; color: var(--accent-hover); }
.domain-card .domain-count { color: var(--text-muted); font-size: .9rem; margin: 0 0 16px; }

.domain-topics { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.domain-topics a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .88rem;
  color: var(--text-heading);
  text-decoration: none;
}
.domain-topics a:hover { border-color: var(--accent); background: var(--accent-soft); }
.domain-topics a i { font-style: normal; color: var(--text-muted); font-size: .8rem; }

/* ── מדורי הצעה כהים ─────────────────────────────────────────────────── */
.band.is-ink {
  background: var(--ink);
  border-block-color: transparent;
  color: var(--on-ink);
}
.band.is-ink .section-head { color: #fff; }
.band.is-ink .section-sub { color: var(--on-ink-muted); }

.band.is-ink .feature {
  background: rgba(255, 255, 255, .05);
  border-color: var(--ink-line);
  box-shadow: none;
}
.band.is-ink .feature h3 { color: #fff; }
.band.is-ink .feature p { color: var(--on-ink-muted); }
.band.is-ink .feature-icon { background: rgba(15, 163, 163, .24); color: #6FD8D3; }
.band.is-ink .btn {
  background: rgba(255, 255, 255, .08);
  border-color: var(--ink-line);
  color: var(--on-ink);
}
.band.is-ink .btn:hover { background: rgba(255, 255, 255, .16); }
.band.is-ink .btn.primary { background: var(--violet); border-color: var(--violet); color: #fff; }

/* ── רמות התלמידים ───────────────────────────────────────────────────── */
.levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.level {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.band .level { background: var(--bg); }
.level b { display: block; color: var(--text-heading); margin-bottom: 5px; }
.level span { font-size: .9rem; color: var(--text-muted); }

/* ── האזור הלימודי ───────────────────────────────────────────────────── */
.lesson-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }

.lesson-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
}
.lesson-card:hover { border-color: var(--accent); transform: translateX(-3px); }

.lesson-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: 700;
}

.lesson-card .lesson-body { flex: 1; min-width: 0; }
.lesson-card h3 { font-size: 1.02rem; margin-bottom: 3px; }
.lesson-card p { margin: 0; font-size: .86rem; color: var(--text-muted); }

.topic-block { margin-bottom: 34px; }

.topic-block.is-soon .lesson-list {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--text-muted);
  font-size: .92rem;
  background: var(--surface);
}

.soon-tag {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: .74rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ── תגית שילוב ──────────────────────────────────────────────────────── */
/* השאלה יושבת בנושא אחד בלבד. אם היא משלבת נושא נוסף היא אומרת זאת כאן,
   וזו גם הדלת לרשימה של אותו נושא כולל שילובים. */
.tag.combines {
  background: var(--surface);
  color: var(--lilac-deep);
  border: 1px dashed var(--violet-pale);
}

.q-card .tag.combines::before { content: "משלב "; opacity: .75; }

.combine-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--violet-soft);
  border: 1px solid var(--violet-pale);
  color: var(--violet-deep);
  font-size: .92rem;
}
.combine-note .btn { background: var(--surface); font-size: .86rem; padding: 7px 13px; }

/* ── מסכים קטנים ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 34px;
    padding-bottom: 44px;
  }
  .hero-stage { order: -1; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .band { padding: 38px 0; }
  main > section.wrap { padding-top: 34px; }
  .stats { gap: 18px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .deck-frame { aspect-ratio: 4 / 3; }
  .actions .btn { flex: 1 1 100%; justify-content: center; }

  /* המותג והתפריט לא נכנסים לשורה אחת בטלפון - התפריט יורד לשורה
     שנייה, ואם גם היא צרה מדי הוא נגלל לצדדים במקום לדחוף את העמוד. */
  .site-header .wrap {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 9px;
    gap: 6px;
  }

  .brand { font-size: .97rem; }

  .header-nav {
    margin-inline-start: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { padding: 6px 10px; white-space: nowrap; }

  section[id] { scroll-margin-top: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── תפריט נפתח בניווט ────────────────────────────────────────────────
   "תרגול אישי" הוא שער לארבעה מקצועות, לא עמוד יחיד. הריחוף פותח את
   הבחירה; במגע (טלפון) אין ריחוף, ולכן לחיצה על הכפתור פותחת אותו,
   והקישור הראשי נשאר עובד. */
.has-menu { position: relative; }

.has-menu > a { display: inline-flex; align-items: center; gap: 5px; }

.has-menu > a::after {
  content: "";
  width: 5px;
  height: 5px;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .6;
}

.nav-menu {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  min-width: 232px;
  padding: 7px;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 40;
}

.has-menu:hover .nav-menu,
.has-menu:focus-within .nav-menu,
.has-menu.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* גשר בלתי נראה בין הכפתור לתפריט, אחרת העכבר "נופל" בדרך והוא נסגר */
.has-menu::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 10px;
}

.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--text) !important;
  font-size: .92rem;
  text-decoration: none;
}

.nav-menu a:hover { background: var(--violet-soft) !important; }
.nav-menu a b { display: block; font-weight: 600; }
.nav-menu a span { font-size: .8rem; color: var(--text-muted); }

.nav-menu a[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ── עליי ────────────────────────────────────────────────────────────── */
.about-split {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  align-items: start;
}

.about-photo {
  margin: 0;
  width: 132px;
}

.about-photo img {
  display: block;
  width: 132px;
  height: 132px;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-lift);
}

.about-photo figcaption {
  margin-top: 9px;
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── מרכז התרגול: מקצוע ‹ נושא ────────────────────────────────────────
   עמוד אחד ולא שניים. האזור הלימודי היה עמוד נפרד, והתלמיד היה צריך
   לזכור לעבור אליו כדי להבין ואז לחזור כדי לתרגל. עכשיו התאוריה
   והתרגול של אותו נושא יושבים באותה לשונית. */
.subject-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.subject-bar a {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-btn);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-heading);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
}

.subject-bar a:hover { border-color: var(--violet); background: var(--violet-soft); }
.subject-bar a[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.subject-bar a[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  border-style: dashed;
}
.subject-bar a i { font-style: normal; font-weight: 400; font-size: .78rem; opacity: .7; }

.topic-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid var(--border);
  margin: 22px 0 0;
}
.topic-tabs::-webkit-scrollbar { display: none; }

.topic-tabs button {
  flex: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: .96rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  border-radius: 10px 10px 0 0;
}

.topic-tabs button:hover { color: var(--text-heading); background: var(--violet-soft); }

.topic-tabs button[aria-selected="true"] {
  color: var(--violet-deep);
  border-bottom-color: var(--violet);
}

.topic-tabs button em {
  font-style: normal;
  font-size: .74rem;
  font-weight: 700;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--lilac-deep);
  vertical-align: 1px;
}

/* ── בלוקים בתוך לשונית נושא ─────────────────────────────────────────── */
.hub-block { margin: 32px 0 0; }

.hub-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.hub-head h2 { font-size: 1.2rem; }

.hub-kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 3px 9px;
  border-radius: 999px;
}
.hub-kicker.k-theory { background: var(--blue-soft); color: var(--blue-deep); }
.hub-kicker.k-drill { background: var(--violet-soft); color: var(--violet-deep); }
.hub-kicker.k-exam { background: var(--ink-2); color: #fff; }

.hub-note {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: .92rem;
  max-width: 70ch;
}

/* קפיצה לעוגן ממפת הנושאים. בלי השוליים האלה הכותרת נעצרת בדיוק מתחת
   לכותרת הדביקה, והתלמיד נוחת על הכרטיסים בלי לדעת לאיזו יחידה נכנס. */
.hub-block, .hub-sub-block { scroll-margin-top: 84px; }

.hub-exit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.exit-card {
  display: block;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
  border: 1px solid var(--ink);
}
.exit-card:hover { background: var(--ink-2); }
.exit-card b { display: block; color: #fff; margin-bottom: 3px; }
.exit-card span { font-size: .87rem; color: var(--on-ink-muted); }
.exit-card.is-light {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.exit-card.is-light:hover { border-color: var(--violet); background: var(--violet-soft); }
.exit-card.is-light b { color: var(--text-heading); }
.exit-card.is-light span { color: var(--text-muted); }

.hub-soon {
  padding: 26px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .93rem;
}

/* ── רשימת הנושאים של מקצוע ──────────────────────────────────────────
   העמוד הראשי של מכניקה או חשמל. שורה לכל נושא, אחת מתחת לשנייה, בסדר
   שבו הם מופיעים בשאלון.

   קודם זו הייתה רשת של כרטיסים ובכל כרטיס תיאור, תגיות ורשימת קישורים.
   העין נאלצה לסרוק עשרות מילים כדי למצוא נושא אחד, והשפע נראה כמו רעש.
   שורה מציגה שם, שורת עובדות קצרה ומד התקדמות - וזה כל מה שצריך כדי
   לבחור. */
.trows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  counter-reset: trow;
}

.trow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.trow:hover {
  border-color: var(--accent);
  transform: translateX(-3px);
}
.trow.is-soon { background: var(--bg); box-shadow: none; }
.trow.is-soon .trow-name { color: var(--text-muted); }

/* המספר הוא מספר השאלה המשוער בשאלון, ולכן הוא מידע ולא קישוט */
.trow-num {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--violet-soft);
  color: var(--accent-deep);
  font-weight: 700;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.trow.is-soon .trow-num { background: var(--border); color: var(--text-muted); }

.trow-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trow-name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text-heading);
}

.trow-facts {
  font-size: .83rem;
  color: var(--text-muted);
}

.trow-bar {
  flex: none;
  width: 70px;
  height: 6px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
}
.trow-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
}

.trow-go {
  flex: none;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
}
.trow:hover .trow-go { color: var(--accent); }

@media (max-width: 520px) {
  .trow { gap: 10px; padding: 11px 12px; }
  .trow-bar { display: none; }
  .trow-facts { font-size: .78rem; }
}

/* ── שאלות הבגרות בעמוד הנושא ────────────────────────────────────────
   כאן צריך לסרוק שלוש עשרה שאלות במבט אחד, ולכן הכרטיס מציג שנה ומספר
   שאלה בלבד. הכותרת, התגיות והתיאור שייכים לעמוד השאלה עצמו - שם יש
   מקום להם, ושם הם באמת עוזרים. */
.qpills {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}

.qpill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 11px 8px 9px;
  border-radius: var(--radius);
  background: var(--ink-2);
  color: #fff;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.qpill:hover { background: var(--ink); transform: translateY(-2px); }

.qpill-year {
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.qpill-num {
  font-size: .78rem;
  color: var(--on-ink-muted);
}

.qpill-vid {
  position: absolute;
  top: 6px;
  inset-inline-end: 8px;
  font-size: .62rem;
  color: var(--aqua);
}

/* ── תת נושא בתוך התרגול ─────────────────────────────────────────────
   הכותרת בולטת, כי זו הדרך שבה התלמיד מחפש: לפי מה שהוא לא מבין. */
.hub-sub-block { margin-top: 22px; }
.hub-sub-block:first-of-type { margin-top: 10px; }

.hub-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--violet-soft);
  font-size: 1.04rem;
}

.hub-sub-name { color: var(--text-heading); font-weight: 700; }

.hub-sub-meta {
  flex: none;
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hub-sub-blurb {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: .87rem;
}

/* שורת העובדות בפתיח של נושא */
.hero-facts {
  margin: 6px 0 12px;
  font-size: .85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* תגית "מתאים לכיתה י׳", אותה תגית שמופיעה גם בפריסה */

.grade-chip {
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--blue-soft);
  color: var(--blue-deep);
  white-space: nowrap;
}

.track-hero .grade-chip {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  margin-inline-start: 10px;
  vertical-align: 4px;
}

.hero-back { color: var(--on-ink-muted); text-decoration: none; }
.hero-back:hover { color: #fff; }

@media (max-width: 620px) {
  .about-split { grid-template-columns: 1fr; }
  .about-photo { width: 108px; }
  .about-photo img { width: 108px; height: 108px; }
}

/* ── פתיח נושא / כיתה ────────────────────────────────────────────────
   טקסט מצד אחד ואנימציה מצד שני. האנימציה מסוננת לפי התחום של הכיתה,
   ולכן עמוד מתמטיקה מציג פרבולה ומעגל יחידה, ולא זריקה בזווית. */
.track-hero {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 42%);
  gap: 26px;
  align-items: center;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 58%, var(--ink-3) 100%);
  border-radius: var(--radius-lg);
  padding: 28px 28px 26px;
  margin: 8px 0 30px;
  box-shadow: var(--shadow-ink);
}

.track-hero-text .eyebrow { color: var(--iris-pale); }
.track-hero-text h2 { color: #fff; font-size: clamp(1.4rem, 3.2vw, 1.95rem); margin: 6px 0 10px; }
.track-hero-text .lead { color: var(--on-ink); opacity: .88; max-width: 46ch; margin: 0; }

.track-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 20px 0 0;
}
.track-facts div { margin: 0; }
.track-facts dt {
  color: var(--on-ink-muted);
  font-size: .78rem;
  letter-spacing: .02em;
  margin: 0 0 2px;
}
.track-facts dd { color: #fff; font-weight: 600; font-size: .95rem; margin: 0; }

.track-hero-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--iris-pale);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
}
.track-hero-link:hover { color: #fff; text-decoration: underline; }

/* גרסה נמוכה, לשימוש מעל לשונית נושא בתרגול. שם הפתיח הוא כותרת
   ולא במה, ולכן הוא לא לוקח חצי מסך. */
.track-hero.is-compact { padding: 20px 22px 18px; margin-bottom: 22px; }
.track-hero.is-compact .hero-canvas { aspect-ratio: 16 / 9; }
.track-hero.is-compact .track-hero-text h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }

@media (max-width: 860px) {
  .track-hero { grid-template-columns: 1fr; padding: 22px 18px 20px; }
  .track-hero .hero-stage { order: -1; }
}