/* דף הבית (index.php) — מהקנבס של קלוד דיזיין, 20.10. root = .hm (לא .lp, כי body.lp כבר תפוס ע"י landing.css). שפת "מסלול" החיה, עם התיקונים של רוני 20.10. כהה כברירת מחדל, .is-light = בהיר. */
.hm {
  --bg: #0d0a33; --ink: #ffffff; --text: #d9dcff; --muted: #b9bde8;
  --sun1: #ffa53c; --sun2: #ff5f8f; --teal: #4ff0d0; --gold: #ffd23f;
  --hl1: #ffd23f; --hl2: #ff5f8f; --tag: #ffd23f;
  --glass: rgba(255,255,255,.07); --glass-b: rgba(255,255,255,.14); --inset: rgba(255,255,255,.06);
  --soft: 0 24px 60px -24px rgba(0,0,0,.7); --soft-sm: 0 10px 26px -12px rgba(0,0,0,.6);
  --ring: rgba(185,166,255,.35); --nav: rgba(13,10,51,.6); --band: rgba(5,4,25,.28);
  --neb1: rgba(255,95,143,.35); --neb2: rgba(90,120,255,.45); --neb3: rgba(150,70,255,.45); --top: #120d45;
  --star: #ffffff; --path: rgba(201,190,255,.5);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg); color: var(--text); font-family: 'Rubik', sans-serif; direction: rtl;
  transition: background .3s, color .3s;
}
.hm.is-light {
  --bg: #eef0ff; --ink: #17134a; --text: #2f2b66; --muted: #57538a;
  --hl1: #d96a00; --hl2: #d62f6b; --tag: #a8520a;
  --glass: rgba(255,255,255,.82); --glass-b: rgba(23,19,74,.07); --inset: #f3f1ff;
  --soft: 0 24px 50px -28px rgba(40,30,120,.35); --soft-sm: 0 10px 24px -14px rgba(40,30,120,.35);
  --ring: rgba(110,90,220,.35); --nav: rgba(255,255,255,.8); --band: rgba(255,255,255,.5);
  --neb1: rgba(255,140,180,.35); --neb2: rgba(120,170,255,.4); --neb3: rgba(190,150,255,.4); --top: #f7f3ff;
  --star: #b9a6ff; --path: rgba(90,70,200,.45);
}
.hm::before { content: ""; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 900px at 85% 0, var(--neb1), transparent 60%),
  radial-gradient(55% 900px at 10% 700px, var(--neb2), transparent 60%),
  radial-gradient(70% 1200px at 50% 2400px, var(--neb3), transparent 65%),
  linear-gradient(180deg, var(--top), var(--bg) 1200px); }
.hm::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .85; background-image: radial-gradient(1.5px 1.5px at 12% 22%, var(--star) 50%, transparent 51%), radial-gradient(1px 1px at 33% 64%, var(--star) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 52% 12%, #ffe9a8 50%, transparent 51%), radial-gradient(1px 1px at 71% 48%, var(--star) 50%, transparent 51%), radial-gradient(1.8px 1.8px at 88% 82%, var(--star) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 22% 84%, #c9c2ff 50%, transparent 51%); background-size: 420px 380px; }
.hm *, .hm *::before, .hm *::after { box-sizing: border-box; }
.hm h1, .hm h2, .hm h3, .hm p, .hm ul { margin: 0; padding: 0; }
.hm h1, .hm h2, .hm h3 { font-family: 'Fredoka', 'Rubik', sans-serif; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.hm .hl { background: linear-gradient(120deg, var(--hl1), var(--hl2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm a:focus-visible, .hm button:focus-visible, .hm summary:focus-visible { outline: 3px solid var(--sun1); outline-offset: 3px; }

/* כפתורים */
.lp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; border: 0; border-radius: 999px; padding: 0 24px; font: 700 17px 'Rubik', sans-serif; text-decoration: none; color: var(--ink); background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--glass-b); white-space: nowrap; cursor: pointer; transition: transform .15s; }
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn-main { background: linear-gradient(135deg, var(--sun1), var(--sun2)); color: #fff; box-shadow: 0 14px 30px -10px rgba(255,95,143,.7); }
.lp-btn-big { min-height: 60px; font-size: 20px; padding: 0 30px; }
.lp-btn-big img { width: 40px; height: 40px; border-radius: 50%; background: #fff; margin-inline-start: -14px; }

/* סרגל */
.lp-nav { position: relative; z-index: 5; display: flex; align-items: center; gap: 28px; padding: 14px clamp(16px, 4vw, 56px); background: var(--nav); backdrop-filter: blur(14px); border-bottom: 1px solid var(--glass-b); }
.lp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 30px 'Fredoka', 'Rubik'; color: var(--ink); }
.lp-brand img { width: 54px; height: 54px; border-radius: 16px; box-shadow: var(--soft-sm); }
.lp-links { display: flex; gap: 26px; }
.lp-links a { text-decoration: none; font-weight: 600; color: var(--text); }
.lp-links a:hover { color: var(--ink); }
.lp-acts { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; }
.lp-mode { display: flex; padding: 4px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--glass-b); }
.lp-mode button { min-height: 38px; min-width: 64px; border: 0; border-radius: 999px; font: 600 14px 'Rubik'; background: transparent; color: var(--muted); cursor: pointer; }
.lp-mode button[aria-pressed="true"] { background: linear-gradient(135deg, var(--sun1), var(--sun2)); color: #fff; }

/* תגית */
.lp-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; padding: 7px 16px; border-radius: 999px; background: var(--glass); color: var(--tag); box-shadow: inset 0 0 0 1px var(--glass-b); }
.lp-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }

/* ראש אזור — תמיד ממורכז: תגית, כותרת, פתיח (התיקון ל"צמוד לימין") */
.sec { padding: 80px clamp(16px, 4vw, 56px); }
.sec > * { max-width: 1240px; margin-inline: auto; }
.sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.15; }
.sec-head p { font-size: 19px; line-height: 1.6; max-width: 56ch; }
.band { background: var(--band); }

/* HERO */
.hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 48px; align-items: center; max-width: 1360px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 56px) 40px; }
.hero h1 { font-size: clamp(42px, 4.8vw, 74px); line-height: 1.12; }
.hero .lead { font-size: 20px; line-height: 1.65; max-width: 44ch; margin: 22px 0 30px; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hm .checks { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; font-weight: 600; font-size: 15px; }
.checks li { display: flex; gap: 6px; align-items: center; }
.checks li::before { content: ""; width: 8px; height: 8px; rotate: 45deg; background: var(--sun1); }
.frame { position: relative; aspect-ratio: 1; max-width: 600px; width: 100%; margin: 0 auto; }
.frame::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8a6cff 0%, #4a36c4 55%, #241a7a 100%); box-shadow: 0 0 120px 10px rgba(122,92,255,.5), inset 0 0 60px rgba(255,255,255,.12); }
.frame .rings { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--ring); }
.frame .rings::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 2px dashed var(--ring); }
.board { position: absolute; z-index: 2; top: 50%; inset-inline-end: 6%; translate: 0 -50%; width: 50%; background: linear-gradient(160deg, #1d2a6b, #121a4a); border-radius: 28px; padding: 22px 18px 16px; color: #eef2ff; box-shadow: 0 30px 60px -20px rgba(18,26,74,.6); }
.board .lm { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 46px 46px 14px 46px 46px; direction: ltr; font: 32px 'Secular One'; max-width: 250px; margin: 0 auto; }
.board .lm span { display: flex; align-items: center; justify-content: center; }
.board .x { color: var(--gold); }
.board .ul { grid-column: 1 / -1; height: 3px; align-self: center; background: #9fb0ff; border-radius: 2px; }
.board .now { border: 2px dashed #6ff0d6; border-radius: 12px; margin: 3px; color: #6ff0d6; }
.board .say { margin-top: 14px; background: #fff; color: #17134a; border-radius: 18px; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.board .say b { color: #7a5cff; }
.hero-av { position: absolute; z-index: 1; bottom: 2%; inset-inline-start: 2%; height: 92%; filter: drop-shadow(0 20px 26px rgba(30,20,90,.35)); }
.bubble { position: absolute; z-index: 3; font-weight: 700; font-size: 15px; padding: 9px 16px; border-radius: 999px; background: #fff; color: #17134a; box-shadow: var(--soft-sm); }
.bubble-1 { top: 7%; inset-inline-end: 14%; }

/* המסע: 3x3, נחש, האנגלית היא התחנה האחרונה */
.jr-fuel { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-b); font-weight: 700; font-size: 15px; color: var(--ink); }
.jr-fuel i { width: 180px; height: 12px; border-radius: 6px; background: var(--inset); overflow: hidden; }
.jr-fuel b { display: block; width: 68%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--sun1), var(--gold)); }
.jr-map { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 56px; max-width: 1040px; }
.jr-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.jr-path path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.jr-all { stroke: var(--path); stroke-width: 3; stroke-dasharray: 2 12; }
.jr-done { stroke: var(--sun1); stroke-width: 4; stroke-dasharray: 2 12; }
.jp { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; z-index: 1; text-decoration: none; }
.jp > img { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.4)); }
.jp b { font: 700 22px 'Fredoka', 'Rubik'; color: var(--ink); margin-top: 6px; }
.jp small { font-size: 15px; color: var(--muted); }
.jp-done > img { filter: drop-shadow(0 0 18px rgba(79,240,208,.6)); }
.jp-here > img { filter: drop-shadow(0 0 30px rgba(255,165,60,.9)); }
.jp-next > img { filter: saturate(.55) brightness(.8) drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.is-light .jp-next > img { filter: saturate(.55) opacity(.75); }
.jp-badge { position: absolute; top: 0; inset-inline-start: calc(50% + 46px); font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #4ff0d0; color: #063d34; white-space: nowrap; }
.jp-badge.here { background: linear-gradient(135deg, var(--sun1), var(--sun2)); color: #fff; }
.jp > img.jp-rocket { position: absolute; width: 60px; height: auto; top: -10px; inset-inline-end: calc(50% + 50px); rotate: -30deg; filter: none; }
.jp-en small { color: var(--teal); font-weight: 600; }
.is-light .jp-en small { color: #0b7a66; }

/* מקצועות: אופקי, תמונה גדולה + נושאים אמיתיים, בלי שטח ריק */
.subjects { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.subj { position: relative; overflow: hidden; border-radius: 32px; padding: 28px; background: var(--glass); box-shadow: var(--soft), inset 0 0 0 1.5px var(--glass-b); display: flex; flex-direction: column; gap: 12px; min-height: 420px; text-decoration: none; color: var(--text); }
.subj > img { position: absolute; width: 230px; height: 230px; object-fit: contain; bottom: -34px; inset-inline-end: -30px; filter: drop-shadow(0 16px 24px rgba(0,0,0,.35)); }
.subj h3 { font-size: 34px; }
.subj p { font-size: 17px; line-height: 1.55; max-width: 30ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 75%; }
.chips span { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--inset); color: var(--ink); box-shadow: inset 0 0 0 1px var(--glass-b); }
.subj-math { background: linear-gradient(170deg, rgba(255,165,60,.22), var(--glass) 70%); }
.subj-en { background: linear-gradient(170deg, rgba(79,240,208,.2), var(--glass) 70%); }
.subj-sci { background: linear-gradient(170deg, rgba(255,95,143,.22), var(--glass) 70%); }
.soon { font: 700 13px 'Rubik'; background: var(--gold); color: #17134a; padding: 3px 10px; border-radius: 999px; vertical-align: middle; margin-inline-start: 6px; }

/* שלבים: חלון ציור עם אבישי גדול + מה שקורה על המסך, טקסט מתחת */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.step { border-radius: 32px; background: var(--glass); box-shadow: var(--soft), inset 0 0 0 1.5px var(--glass-b); padding: 14px 14px 28px; display: flex; flex-direction: column; gap: 18px; }
.step-art { position: relative; height: 290px; border-radius: 24px; overflow: hidden; background: radial-gradient(circle at 30% 30%, #5a44d6, #241a7a 75%); }
.step-art > img.av { position: absolute; bottom: -24px; inset-inline-start: 6px; height: 300px; }
.step-art .ui { position: absolute; inset-inline-end: 16px; top: 50%; translate: 0 -50%; width: 52%; }
.step-n { position: absolute; top: 14px; inset-inline-end: 14px; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--sun1), var(--sun2)); color: #fff; font: 800 20px 'Rubik'; display: flex; align-items: center; justify-content: center; }
.step h3 { font-size: 28px; padding-inline: 14px; }
.step p { font-size: 17px; line-height: 1.6; padding-inline: 14px; }
.q { background: #fff; color: #17134a; border-radius: 18px; padding: 14px; box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); }
.q .eq { font: 26px 'Secular One'; direction: ltr; text-align: center; }
.q .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; direction: ltr; }
.q .opts span { text-align: center; font: 700 16px 'Rubik'; padding: 8px 0; border-radius: 10px; background: #f0edff; }
.q .opts .pick { background: #4ff0d0; color: #063d34; }
.say2 { background: #fff; color: #17134a; border-radius: 18px 18px 18px 4px; padding: 12px 14px; font-size: 15px; line-height: 1.5; font-weight: 500; box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); }
.say2 b { color: #d62f6b; }
.landed { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.landed img { width: 150px; filter: drop-shadow(0 0 26px rgba(79,240,208,.7)); }
.landed span { font: 800 14px 'Rubik'; background: #4ff0d0; color: #063d34; padding: 5px 12px; border-radius: 999px; }

/* הידעת */
.fact { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
.fact-art { position: relative; padding: 24px; max-width: 520px; justify-self: center; }
.fact-art::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--ring); }
.fact-art img { position: relative; width: 100%; border-radius: 50%; display: block; box-shadow: 0 40px 80px -30px rgba(18,26,74,.6); }
.fact h2 { font-size: clamp(34px, 3.8vw, 54px); margin: 16px 0 14px; }
.fact p { font-size: 19px; line-height: 1.65; max-width: 44ch; }
.fact .ask { margin-top: 18px; display: inline-flex; padding: 12px 18px; border-radius: 16px; background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--glass-b); font-weight: 700; color: var(--ink); }

/* עולמות */
.worlds { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.world { position: relative; min-height: 320px; padding: 22px; border-radius: 28px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6); }
.world img { position: absolute; top: 10px; inset-inline-end: 8px; height: 220px; }
.world b { position: relative; font-size: 24px; }
.world span { position: relative; font-size: 15px; font-weight: 600; opacity: .9; }
.w-space { background: radial-gradient(circle at 70% 20%, #4b39c7, #0e0c33); color: #fff; font-family: 'Secular One'; }
.w-notebook { background-color: #fbfdff; background-image: linear-gradient(#cfe0f5 1px, transparent 1px), linear-gradient(90deg, #cfe0f5 1px, transparent 1px); background-size: 20px 20px; color: #14287a; font-family: 'Playpen Sans Hebrew', 'Rubik'; box-shadow: 0 24px 50px -24px rgba(0,0,0,.6), inset 0 0 0 1px #cfe0f5; }
.w-city { background: linear-gradient(#7fd3ff 60%, #ffd77a 60%); color: #1d2340; font-family: 'Fredoka', 'Rubik'; }
.w-comic { background-color: #eaf2fb; background-image: radial-gradient(rgba(0,150,214,.3) 1.6px, transparent 1.7px); background-size: 10px 10px; color: #1a2350; font-family: 'Karantina', 'Rubik'; }
.w-comic b { font-size: 34px; font-weight: 700; color: #e6007e; }

/* הורים ובתי ספר */
.two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.card { position: relative; overflow: hidden; border-radius: 32px; padding: 34px; box-shadow: var(--soft), inset 0 0 0 1.5px var(--glass-b); display: flex; flex-direction: column; gap: 18px; }
.card-mint { background: linear-gradient(160deg, rgba(79,240,208,.18), var(--glass) 70%); }
.card-sun { background: linear-gradient(160deg, rgba(255,165,60,.2), var(--glass) 70%); }
.card h3 { font-size: 30px; max-width: 70%; }
.card > img.deco { position: absolute; top: 18px; inset-inline-end: 22px; width: 92px; }
.list { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 18px; }
.list li { padding-inline-start: 22px; position: relative; }
.list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .55em; width: 8px; height: 8px; rotate: 45deg; background: var(--sun1); }
.card .lp-btn { align-self: flex-start; }
.btn-solid { background: var(--ink); color: var(--bg); box-shadow: none; }

/* שאלות + סיום */
.faq { max-width: 900px !important; }
.faq details { background: var(--glass); border-radius: 22px; padding: 18px 24px; margin-bottom: 12px; box-shadow: inset 0 0 0 1.5px var(--glass-b); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 19px; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sun1); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 10px; font-size: 17px; line-height: 1.65; }
.final { display: flex; align-items: center; justify-content: center; gap: 46px; padding: 60px 20px 70px; }
.final img { height: 300px; }
.final h2 { font-size: clamp(40px, 4.6vw, 66px); margin-bottom: 22px; }
.foot { background: var(--band); color: var(--muted); text-align: center; padding: 28px 16px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.foot nav { display: flex; gap: 22px; }
.foot a { color: var(--ink); }

/* מסכים צרים */
@media (max-width: 1000px) {
  .hero, .fact, .two { grid-template-columns: minmax(0,1fr); }
  .subjects, .steps { grid-template-columns: minmax(0,1fr); }
  .worlds { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lp-links { display: none; }
  .subj { min-height: 300px; }
}
@media (max-width: 640px) {
  .lp-nav { gap: 10px; padding: 10px 14px; }
  .lp-brand { font-size: 22px; } .lp-brand img { width: 42px; height: 42px; }
  .hide-sm { display: none; }
  .sec { padding: 52px 16px; }
  .sec-head { margin-bottom: 28px; }
  .sec-head h2 { font-size: 30px; }
  .jr-map { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 30px; }
  .jr-path { display: none; }
  .jp > img { width: 116px; height: 116px; }
  .jp-badge { inset-inline-start: calc(50% + 26px); }
  .jp-rocket { width: 42px; inset-inline-end: calc(50% + 34px); }
  .board { width: 58%; padding: 14px 10px 10px; }
  .board .lm { grid-auto-rows: 32px; font-size: 24px; }
  .board .say { font-size: 13px; }
  .step-art { height: 240px; } .step-art > img.av { height: 250px; }
  .worlds { gap: 12px; } .world { min-height: 220px; padding: 14px; } .world img { height: 150px; } .world b { font-size: 19px; }
  .card { padding: 24px; } .card h3 { font-size: 24px; } .card > img.deco { width: 64px; }
  .final { flex-direction: column; text-align: center; } .final img { height: 210px; }
}

/* ═══ תיקונים 20.10 22:05 — נייד: אין תמונה מעל טקסט, שברים אמיתיים, סרגל ═══ */
.subj { min-height: 0; }
.subj > img { position: relative; bottom: auto; inset-inline-end: auto; align-self: flex-end; margin-top: auto; margin-bottom: -40px; margin-inline-end: -28px; width: 210px; height: 210px; }
.chips { max-width: 100%; }
.world { justify-content: flex-start; gap: 2px; }
.world img { position: relative; top: auto; inset-inline-end: auto; align-self: center; height: 210px; margin-bottom: 8px; }
.step-n { z-index: 3; }
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; margin: 0 .12em; font-size: .78em; }
.fr b { font-weight: inherit; padding: 0 .14em .06em; border-bottom: .09em solid currentColor; }
.fr i { font-style: normal; padding-top: .06em; }
.q .eq { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 30px; }
.q .opts span { display: flex; align-items: center; justify-content: center; min-height: 54px; font-size: 20px; }
.brand-t { white-space: nowrap; }
@media (max-width: 640px) {
  .lp-brand { font-size: 20px; gap: 8px; }
  .brand-t { display: none; }
  .lp-acts { gap: 6px; }
  .lp-mode button { min-width: 50px; min-height: 36px; font-size: 13px; }
  .lp-acts > .lp-btn { padding: 0 14px; font-size: 15px; min-height: 44px; }
  .subj > img { width: 150px; height: 150px; margin-bottom: -30px; margin-inline-end: -20px; }
  .world img { height: 150px; }
  .step-art .ui { width: 56%; }
  .q { padding: 10px; } .q .eq { font-size: 24px; } .q .opts span { min-height: 46px; font-size: 17px; }
}
/* מספר השלב עובר לכותרת — לא יושב על הציור */
.step-n { display: none; }
.steps { counter-reset: st; }
.step h3 { display: flex; align-items: center; gap: 12px; }
.step h3::before { counter-increment: st; content: counter(st); flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--sun1), var(--sun2)); color: #fff; font: 800 19px 'Rubik'; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .bubble-1 { display: none; } }
.q .opts .fr { background: none; min-height: 0; padding: 0; display: inline-flex; border-radius: 0; font-size: .78em; }
/* נעמי + מי ילווה + פוטר */
.hero-nm { position: absolute; z-index: 3; bottom: 1%; inset-inline-end: 0; height: 56%; filter: drop-shadow(0 20px 26px rgba(30,20,90,.35)); }
.board { top: 36%; width: 46%; inset-inline-end: 22%; }
.buddies { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.buddy { position: relative; overflow: hidden; display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 20px; align-items: end; padding: 28px 28px 0; border-radius: 32px; background: var(--glass); box-shadow: var(--soft), inset 0 0 0 1.5px var(--glass-b); }
.b-av { background: linear-gradient(160deg, rgba(255,190,60,.22), var(--glass) 70%); }
.b-nm { background: linear-gradient(160deg, rgba(170,130,255,.28), var(--glass) 70%); }
.b-main { height: 330px; width: auto; justify-self: center; margin-bottom: -6px; }
.b-txt { display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; }
.b-txt h3 { font-size: 34px; }
.b-txt p { font-size: 17px; line-height: 1.55; }
.outfits { display: flex; gap: 8px; }
.outfits img { width: 25%; max-width: 70px; aspect-ratio: 3/4; object-fit: contain; object-position: bottom; background: var(--inset); border-radius: 14px; padding: 6px 4px 0; }
.b-txt .lp-btn { align-self: flex-start; }
.final-pair { display: flex; align-items: flex-end; gap: 0; }
.final-pair img + img { height: 270px; margin-inline-start: -30px; }
.tas { display: inline-flex; align-items: center; gap: 8px; color: var(--muted) !important; text-decoration: none; font-size: 13px; }
.tas img { height: 18px; width: auto; }
/* בהיר: כותרות כהות וחזקות יותר */
.hm.is-light { --ink: #1b1650; --hl1: #c2410c; --hl2: #be123c; --tag: #9a3412; }
.is-light .lp-tag { background: #fff4e6; box-shadow: inset 0 0 0 1px rgba(154,52,18,.18); }
.is-light .sec-head p, .is-light .lead { color: #37326e; }
@media (max-width: 1000px) { .buddies { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 640px) {
  .buddy { grid-template-columns: 120px minmax(0,1fr); padding: 18px 16px 0; gap: 12px; }
  .b-main { height: 220px; } .b-txt h3 { font-size: 26px; } .b-txt p { font-size: 15px; }
  .hero-nm { height: 50%; }
  .final-pair img { height: 200px; } .final-pair img + img { height: 180px; }
}
.board { top: 5%; translate: 0 0; inset-inline-end: 3%; width: 47%; }
.hero-nm { inset-inline-end: -2%; height: 50%; }
.bubble-1 { top: 1%; inset-inline-end: auto; inset-inline-start: 30%; }
.hero-nm { height: 54%; }
@media (max-width: 640px) { .hero-nm { inset-inline-end: auto; inset-inline-start: -2%; height: 44%; } }
/* פרופורציה: נעמי ≈ 80% מאבישי (היא צעירה ממנו בשנתיים-שלוש) */
.hero-av { height: 90%; inset-inline-start: 0; }
.hero-nm { height: 72%; inset-inline-end: 0; inset-inline-start: auto; bottom: 2%; z-index: 1; }
.board { top: 3%; width: 42%; inset-inline-end: 28%; }
.bubble-1 { top: 0; inset-inline-start: auto; inset-inline-end: 2%; }
.b-nm .b-main { height: 285px; }
@media (max-width: 640px) {
  .hero-av { height: 84%; }
  .hero-nm { height: 68%; inset-inline-end: 0; inset-inline-start: auto; }
  .board { width: 50%; inset-inline-end: 25%; top: 2%; }
  .b-nm .b-main { height: 190px; }
}
@media (max-width: 640px) {
  .board { width: 42%; inset-inline-end: 29%; padding: 10px 8px 8px; border-radius: 18px; }
  .board .lm { grid-template-rows: 26px 26px 8px 26px 26px; font-size: 19px; }
  .board .say { font-size: 11.5px; padding: 7px 8px; margin-top: 8px; border-radius: 12px; }
}

/* באתר: הסרגל דביק, וגלילה רכה לעוגנים */
.hm .lp-nav { position: sticky; top: 0; z-index: 20; }
html { scroll-behavior: smooth; }
.hm [id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hm .lp-btn { transition: none; } }
/* עמוד עצמאי (בלי tirgul.css): בסיס */
body.hm-page { margin: 0; background: #0d0a33; }
body.hm-page img { max-width: 100%; }
/* ⚠️ :where על כל הבורר (ספציפיות 0). קודם היה ".hm :where(a)" = ספציפיות של מחלקה אחת, ובגלל שהוא מופיע אחרי
   .btn-solid/.lp-btn-main הוא דרס להם את הצבע: טקסט בהיר על כפתור לבן (כהה) / כהה על כהה (בהיר). רוני 21.10: "הכיתוב בכפתור לא ברור". */
:where(.hm a) { color: inherit; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: #fff; color: #17134a; padding: 10px 16px; border-radius: 12px; font-weight: 700; }
.skip:focus { top: 12px; }
.hide-sm {}
/* פרופורציה מתוקנת (רוני 20.10 23:15): ראש נעמי ≈ 90% מראש אבישי. בציור שלה הראש קטן יחסית לגוף, לכן הגובה ~93% */
.hero-nm { height: 84%; inset-inline-end: -4%; }
.board { inset-inline-end: 33%; width: 40%; }
.b-nm .b-main { height: 310px; }
.final-pair img + img { height: 285px; }
@media (max-width: 640px) {
  .hero-nm { height: 76%; inset-inline-end: -3%; }
  .board { inset-inline-end: 30%; width: 42%; }
  .b-nm .b-main { height: 205px; }
  .final-pair img + img { height: 190px; }
}
/* נייד: הלוח למעלה, שני הילדים מתחתיו — הלוח לא מסתיר פנים */
@media (max-width: 640px) {
  .frame { aspect-ratio: 3 / 4; }
  .frame .rings { inset: 12% 0 0; }
  .frame::before { inset: 22% 8% 8%; }
  .board { top: 0; translate: 0 0; inset-inline-end: 18%; width: 64%; }
  .hero-av { height: 58%; bottom: 0; inset-inline-start: 4%; }
  .hero-nm { height: 52%; bottom: 0; inset-inline-end: 6%; }
}
/* כל רוחב שבו הפתיח בטור אחד (עד 1000): הלוח למעלה, הילדים מתחתיו — אף פנים לא מוסתרות */
@media (max-width: 1000px) {
  .frame { aspect-ratio: 3 / 4; max-width: 520px; }
  .frame .rings { inset: 12% 0 0; }
  .frame::before { inset: 22% 8% 8%; }
  .board { top: 0; translate: 0 0; inset-inline-end: 18%; width: 64%; }
  .hero-av { height: 58%; bottom: 0; inset-inline-start: 4%; }
  .hero-nm { height: 52%; bottom: 0; inset-inline-end: 6%; }
  .bubble-1 { display: none; }
}
/* אבישי החדש (20.10 23:50): ראש = 19.7% מהגובה, נעמי 21%. ראש נעמי ≈ 90% מראש אבישי */
.hero-nm { height: 76%; }
.b-nm .b-main { height: 278px; }
.final-pair img + img { height: 253px; }
@media (max-width: 1000px) { .hero-nm { height: 49%; } }
@media (max-width: 640px) { .b-nm .b-main { height: 186px; } .final-pair img + img { height: 170px; } }
/* בכל הרוחבים: הלוח למעלה, הילדים מתחתיו (התמונות מתחלפות — אסור שהלוח יסתיר פנים) */
.frame { aspect-ratio: 3 / 4; max-width: 520px; }
.frame .rings { inset: 12% 0 0; }
.frame::before { inset: 22% 8% 8%; }
.board { top: 0; translate: 0 0; inset-inline-end: 18%; width: 64%; }
.hero-av { height: 58%; bottom: 0; inset-inline-start: 4%; }
.hero-nm { height: 49%; bottom: 0; inset-inline-end: 6%; }
.bubble-1 { display: none; }

/* ═══════════ אנימציות (רוני 21.10: "שים אנימציות! הרבה!") — הכל מכבד prefers-reduced-motion ═══════════ */
@keyframes hm-drift { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -16px; rotate: 4deg; } }
@keyframes hm-bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes hm-breathe { 0%,100% { scale: 1; } 50% { scale: 1.015; } }
@keyframes hm-spin { to { rotate: 360deg; } }
@keyframes hm-pulse { 0%,100% { filter: drop-shadow(0 0 22px rgba(255,165,60,.75)); scale: 1; } 50% { filter: drop-shadow(0 0 42px rgba(255,165,60,1)); scale: 1.06; } }
@keyframes hm-flow { to { stroke-dashoffset: -28; } }
@keyframes hm-twinkle { 0%,100% { opacity: .85; } 50% { opacity: .35; } }
@keyframes hm-shine { 0% { left: -60%; } 60%,100% { left: 130%; } }
@keyframes hm-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } }
@keyframes hm-badge { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes hm-wiggle { 0%,100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes hm-car { 0%,100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: -1.5deg; } }
@keyframes hm-shine-bar { to { background-position: -200% 0; } }
.fl { position: absolute; z-index: 1; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
@media (max-width: 1000px) { .fl { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .hm::after { animation: hm-twinkle 4s ease-in-out infinite; }
  .frame .rings { animation: hm-spin 70s linear infinite; }
  .frame .rings::after { animation: hm-spin 40s linear infinite reverse; }
  .hero-av { animation: hm-bob 5s ease-in-out infinite; }
  .hero-nm { animation: hm-bob 5s ease-in-out -2.5s infinite; }
  .board { animation: hm-breathe 6s ease-in-out infinite; }
  .fl { animation: hm-drift 7s ease-in-out infinite; }
  .lp-btn-main { position: relative; overflow: hidden; }
  .lp-btn-main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); animation: hm-shine 3.2s ease-in-out infinite; pointer-events: none; }
  .board .lm span.pop { animation: hm-pop .45s ease-out; }
  .jr-all { animation: hm-flow 1.6s linear infinite; }
  .jr-done { animation: hm-flow 1s linear infinite; }
  .jp > img:first-child { animation: hm-bob 4.5s ease-in-out infinite; }
  .jp:nth-child(3n) > img:first-child { animation-delay: -1.5s; }
  .jp:nth-child(3n+1) > img:first-child { animation-delay: -3s; }
  .jp-here > img:first-child { animation: hm-pulse 2.4s ease-in-out infinite; }
  .jp > img.jp-rocket { animation: hm-drift 3s ease-in-out infinite; }
  .jp-badge { animation: hm-badge 2.6s ease-in-out infinite; }
  .jr-fuel b { background-size: 200% 100%; background-image: linear-gradient(90deg, var(--sun1), var(--gold), var(--sun1)); animation: hm-shine-bar 2.5s linear infinite; }
  .subj > img { animation: hm-drift 8s ease-in-out infinite; }
  .subj, .step, .world, .buddy, .card { transition: transform .25s ease, box-shadow .25s ease, opacity .7s ease; }
  .subj:hover, .step:hover, .buddy:hover, .card:hover { transform: translateY(-8px); }
  .world:hover { transform: translateY(-8px) rotate(-1deg); }
  .world img { transition: transform .35s ease; }
  .world:hover img { transform: translateY(-10px) scale(1.06); }
  .step-art > img.av { animation: hm-bob 5s ease-in-out infinite; }
  .step:nth-child(2) .step-art > img.av { animation-delay: -1.7s; }
  .step:nth-child(3) .step-art > img.av { animation: hm-bob 1.6s ease-in-out infinite; }
  .landed img { animation: hm-pulse 2.4s ease-in-out infinite; }
  .q .opts .pick { animation: hm-badge 1.8s ease-in-out infinite; }
  .fact-art img { animation: hm-car 6s ease-in-out infinite; }
  .fact-art::before { animation: hm-spin 60s linear infinite; }
  .b-main { animation: hm-bob 5s ease-in-out infinite; }
  .b-nm .b-main { animation-delay: -2s; }
  .outfits img { transition: transform .2s ease; }
  .outfits img:hover { transform: translateY(-6px) rotate(-4deg) scale(1.08); }
  .card > img.deco { animation: hm-wiggle 4s ease-in-out infinite; }
  .final-pair img { animation: hm-bob 4s ease-in-out infinite; }
  .final-pair img + img { animation-delay: -2s; }
  .rv { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  .rv.in { opacity: 1; transform: none; }
  .rv-d1 { transition-delay: .1s; } .rv-d2 { transition-delay: .2s; } .rv-d3 { transition-delay: .3s; }
}

.hero { position: relative; }
/* נייד: השם "אבישי ונעמי" תמיד ליד הלוגו (רוני 21.10); המתג והכפתור מצטמצמים במקום */
@media (max-width: 640px) {
  .brand-t { display: inline; font-size: 18px; }
  .lp-brand img { width: 40px; height: 40px; }
  .lp-mode { padding: 3px; }
  .lp-mode button { min-width: 42px; min-height: 36px; padding: 0 8px; font-size: 13px; }
  .lp-acts > .lp-btn { padding: 0 12px; font-size: 14px; min-height: 40px; }
}
@media (max-width: 359px) { .brand-t { display: none; } }

/* עולמות: שלוש תחנות מהמפה של כל עולם (כוכב / עמוד / בניין / פרק) */
.world .w-st { display: flex; justify-content: center; gap: 8px; margin-top: 12px; opacity: 1; }
.world .w-st img { position: static; height: 64px; width: 64px; object-fit: contain; margin: 0; align-self: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.w-comic .w-st img { border: 2.5px solid #1a2350; border-radius: 4px; object-fit: cover; filter: none; background: #fff; padding: 2px; }
.w-comic .w-st img:nth-child(2) { rotate: 3deg; } .w-comic .w-st img:nth-child(odd) { rotate: -2deg; }
@media (max-width: 760px) { .world .w-st img { height: 44px; width: 44px; } }
a.world { text-decoration: none; color: inherit; cursor: pointer; transition: transform .2s; }
a.world:hover { transform: translateY(-4px); }
a.world:focus-visible { outline: 3px solid #ffd23f; outline-offset: 4px; }

/* ═══ קוביות הורים/בתי ספר + דיאלוג "כתבו לנו" (21.10) ═══ */
.card-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.card .card-acts .lp-btn { align-self: auto; white-space: normal; text-align: center; justify-content: center; line-height: 1.25; padding-block: 10px; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-line:hover { background: var(--glass); }
@media (max-width: 640px) { .card .card-acts .lp-btn { flex: 1 1 100%; } }

.cdlg { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 28px; padding: 30px clamp(18px, 4vw, 32px);
  background: var(--bg); color: var(--text); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6), inset 0 0 0 1.5px var(--glass-b); font-family: 'Rubik', sans-serif; direction: rtl; }
.cdlg::backdrop { background: rgba(8,6,30,.6); backdrop-filter: blur(4px); }
.cdlg h2 { font-size: 28px; margin: 0 0 6px; padding-inline-end: 40px; }
.cdlg-lead { margin: 0 0 16px; color: var(--muted); }
.cdlg-x { position: absolute; top: 14px; inset-inline-end: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--glass); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--glass-b); }
.cdlg .c-form { position: relative; display: flex; flex-direction: column; gap: 14px; }
.cdlg .c-form > label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--ink); }
.cdlg .c-form small { font-weight: 400; color: var(--muted); }
.cdlg input:not([type=radio]), .cdlg textarea { font: 400 17px 'Rubik', sans-serif; padding: 12px 14px; border: 2px solid #e2dcff; border-radius: 14px; background: #fff; color: #17134a; -webkit-text-fill-color: #17134a; width: 100%; }
.cdlg input:focus, .cdlg textarea:focus { outline: 3px solid var(--sun1); outline-offset: 1px; }
.cdlg textarea { min-height: 120px; resize: vertical; }
.cdlg .c-kind { border: 0; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-b); display: flex; flex-wrap: wrap; gap: 8px 22px; }
.cdlg .c-kind legend { float: inline-start; width: 100%; padding: 0 0 4px; font-weight: 700; color: var(--ink); }
.cdlg .c-kind label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--ink); }
.cdlg .c-kind input { width: 20px; height: 20px; accent-color: var(--sun2); }
.c-form:has(input[name=kind][value=parent]:checked) .c-school { display: none !important; }
.c-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cdlg-err { background: #ffe1e6; color: #8a1129; border: 2px solid #ff8fa3; border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.cdlg-send { justify-content: center; min-height: 54px; font-size: 19px; }
.cdlg-send:disabled { opacity: .6; cursor: wait; }
.cdlg-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cdlg-done img { height: 150px; width: auto; }
.cdlg-done p { margin: 0; font-size: 18px; }
.cdlg [hidden] { display: none !important; }
/* נייד: האיור בפינת הקובייה כיסה את השורה הראשונה ברשימה ("אסור שתמונה תכסה טקסט") — הכותרת שומרת לו גובה */
@media (max-width: 640px) { .card h3 { min-height: 72px; } }
/* המותג "שלבים" (21.10.2026) */
.bw { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.bw b { font: 700 1.1em/1 'Fredoka', 'Rubik', sans-serif; color: #ffd23f; text-shadow: 0 1px 0 #ff9a2e, 0 2px 0 #f2606a, 0 3px 0 #b8325e; }
.bw small { font: 500 13px/1.1 'Rubik', sans-serif; color: var(--muted, #b9bde8); white-space: nowrap; }
.hm.is-light .bw b { color: #ff6b4f; text-shadow: 0 2px 0 #f2557d, 0 3px 0 #b8325e; }
.lp-brand img { border-radius: 14px; }