/*
Theme Name: nl-site
Description: התבנית של האתר שלנו – קוד בלבד, בלי בלוקים, בסטייל של חלל. האפיון: DOCS/אפיון האתר שלנו.html
Version: 0.2
Requires PHP: 8.0
Text Domain: nl-site
*/

/* ---------- הגופן – Heebo, מהאתר עצמו (SIL OFL, assets/fonts/OFL.txt) ---------- */
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/heebo-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/heebo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* הכותרות – Varela Round, גופן מעוגל וחם (נתי, 21.10.2026; רעיון 18; SIL OFL, assets/fonts/OFL-varela-round.txt). משקל אחד.
   רק האותיות העבריות – רווחים, סימני פיסוק ואנגלית בכותרות מגיעים מ-Heebo, שכבר נטען (חוסך 22KB) */
@font-face { font-family: "Varela Round"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/varela-round-hebrew.woff2") format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
/* השם xSpace בלוגו – Varela Round, רק שש האותיות של השם (4KB, מ-Google Fonts עם text=xSpace), בשם משלו – שאר האנגלית באתר נשארת ב-Heebo (ניסיון 28; נתי אישר להוריד) */
@font-face { font-family: "xSpace Logo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/varela-round-xspace.woff2") format("woff2"); unicode-range: U+0053, U+0061, U+0063, U+0065, U+0070, U+0078; }

/* ---------- הצבעים – כל הצבעים כאן, פעם לבהיר ופעם לכהה ----------
   סטייל של חלל בשני המצבים (נתי, 20.10.2026): בהיר = שחר – רקע בהיר, כוכבים וקווי מסלול בסגול;
   כהה = חלל עמוק – כוכבים לבנים. בכניסה הראשונה – לפי המכשיר. אחרי לחיצה על המתג – data-theme על <html> */
:root {
  color-scheme: light;
  --bg: #fbfaff;
  --bg-2: #f5f2ff;
  --surface: #ffffff;
  --raised: #ffffff;
  --ink: #1a1433;
  --muted: #555078;
  --line: #e6e0f7;
  --line-strong: #cfc4f2;
  --accent: #6d28d9;
  --accent-hover: #5b21b6;
  --accent-ink: #ffffff;
  --accent-soft: #ede9fe;
  --accent-soft-ink: #4c1d95;
  --cyan: #0e7490;
  --glow: rgba(109, 40, 217, .18);
  --nebula-a: rgba(167, 139, 250, .30);
  --nebula-b: rgba(103, 232, 249, .20);
  --sky: radial-gradient(120% 55% at 50% -12%, rgba(196, 181, 253, .45), transparent 62%);
  --star: rgba(91, 33, 182, .42);
  --star-art: rgba(109, 40, 217, .6);
  --stars-a: .8;
  --stars-b: .7;
  --orbit: rgba(109, 40, 217, .32);
  --ring: rgba(109, 40, 217, .55);
  --planet-hi: #ede9fe;
  --planet-mid: #8b5cf6;
  --planet-lo: #4c1d95;
  --moon-hi: #ffffff;
  --moon-lo: #c4b5fd;
  --head-bg: rgba(251, 250, 255, .8);
  /* הלוגו – כמו מיתוג/webspace, הגרסה לרקע בהיר */
  --logo-fin: #4c1d95; --logo-body: #7c3aed; --logo-shade: #5b21b6; --logo-nose: #4c1d95; --logo-ring: #4c1d95;
  --logo-pin-1: #ffc53d; --logo-pin-2: #ff7a45; --logo-pin-3: #ff4d8d; --logo-web: #6d28d9; --logo-space: #000000;
  --av-suit: #ffffff; --scribble: rgba(124, 58, 237, .3);
  --bad: #b42318;
  --shadow: 0 2px 8px rgba(76, 29, 149, .05), 0 20px 48px rgba(124, 58, 237, .1);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #070612;
    --bg-2: #0c0a1d;
    --surface: #110e26;
    --raised: #14102b;
    --ink: #f1eeff;
    --muted: #b4acd9;
    --line: #262046;
    --line-strong: #3a3168;
    --accent: #a78bfa;
    --accent-hover: #c4b5fd;
    --accent-ink: #12092b;
    --accent-soft: #211947;
    --accent-soft-ink: #e4dcff;
    --cyan: #67e8f9;
    --glow: rgba(167, 139, 250, .26);
    --nebula-a: rgba(124, 58, 237, .36);
    --nebula-b: rgba(34, 211, 238, .14);
    --sky: radial-gradient(120% 60% at 50% -18%, rgba(76, 29, 149, .55), transparent 62%);
    --star: rgba(255, 255, 255, .8);
    --star-art: #ffffff;
    --stars-a: .9;
    --stars-b: .85;
    --orbit: rgba(196, 181, 253, .32);
    --ring: rgba(196, 181, 253, .7);
    --planet-hi: #c4b5fd;
    --planet-mid: #7c3aed;
    --planet-lo: #1e0b4b;
    --moon-hi: #ece8ff;
    --moon-lo: #6b5fa8;
    --head-bg: rgba(7, 6, 18, .72);
    --logo-fin: #7c3aed; --logo-body: #a78bfa; --logo-shade: #8b5cf6; --logo-nose: #6d28d9; --logo-ring: #2e1065;
    --logo-pin-1: #ffd36e; --logo-pin-2: #ff8a4c; --logo-pin-3: #ff5c98; --logo-web: #a78bfa; --logo-space: #ffffff;
    --av-suit: #ece8ff; --scribble: rgba(167, 139, 250, .42);
    --bad: #fda29b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070612;
  --bg-2: #0c0a1d;
  --surface: #110e26;
  --raised: #14102b;
  --ink: #f1eeff;
  --muted: #b4acd9;
  --line: #262046;
  --line-strong: #3a3168;
  --accent: #a78bfa;
  --accent-hover: #c4b5fd;
  --accent-ink: #12092b;
  --accent-soft: #211947;
  --accent-soft-ink: #e4dcff;
  --cyan: #67e8f9;
  --glow: rgba(167, 139, 250, .26);
  --nebula-a: rgba(124, 58, 237, .36);
  --nebula-b: rgba(34, 211, 238, .14);
  --sky: radial-gradient(120% 60% at 50% -18%, rgba(76, 29, 149, .55), transparent 62%);
  --star: rgba(255, 255, 255, .8);
  --star-art: #ffffff;
  --stars-a: .9;
  --stars-b: .85;
  --orbit: rgba(196, 181, 253, .32);
  --ring: rgba(196, 181, 253, .7);
  --planet-hi: #c4b5fd;
  --planet-mid: #7c3aed;
  --planet-lo: #1e0b4b;
  --moon-hi: #ece8ff;
  --moon-lo: #6b5fa8;
  --head-bg: rgba(7, 6, 18, .72);
  --bad: #fda29b;
  --logo-fin: #7c3aed; --logo-body: #a78bfa; --logo-shade: #8b5cf6; --logo-nose: #6d28d9; --logo-ring: #2e1065;
  --logo-pin-1: #ffd36e; --logo-pin-2: #ff8a4c; --logo-pin-3: #ff5c98; --logo-web: #a78bfa; --logo-space: #ffffff;
  --av-suit: #ece8ff; --scribble: rgba(167, 139, 250, .42);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .45);
}

/* ---------- בסיס ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px;
  background-color: var(--bg); background-image: var(--sky); background-repeat: no-repeat; }
@media (min-width: 720px) { html { font-size: 18px; } }
body { margin: 0; color: var(--ink); line-height: 1.7; overflow-x: clip;
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 1.25rem + 3.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }
h1, h2 { font-family: "Varela Round", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight: 400; font-synthesis: none; }
h3 { font-size: 1.12rem; font-weight: 700; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
#main, section[id] { scroll-margin-top: 84px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* שמי הכוכבים – שתי שכבות קבועות מאחורי הכול, רק נקודות ב-CSS (בלי תמונות).
   השכבה השנייה מנצנצת לאט, ונעצרת למי שביקש בלי תנועה */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  opacity: var(--stars-a);
  background-image:
    radial-gradient(1.2px 1.2px at 23px 41px, var(--star), transparent),
    radial-gradient(1px 1px at 157px 13px, var(--star), transparent),
    radial-gradient(1.4px 1.4px at 91px 187px, var(--star), transparent),
    radial-gradient(1px 1px at 211px 113px, var(--star), transparent),
    radial-gradient(1.2px 1.2px at 61px 263px, var(--star), transparent),
    radial-gradient(1px 1px at 283px 229px, var(--star), transparent),
    radial-gradient(1.3px 1.3px at 349px 97px, var(--star), transparent);
  background-size: 307px 293px, 263px 331px, 349px 271px, 389px 359px, 313px 401px, 431px 337px, 467px 383px;
}
body::after {
  opacity: var(--stars-b);
  background-image:
    radial-gradient(1.8px 1.8px at 117px 71px, var(--star), transparent),
    radial-gradient(1.6px 1.6px at 401px 233px, var(--star), transparent),
    radial-gradient(2px 2px at 263px 419px, var(--star), transparent),
    radial-gradient(1.6px 1.6px at 59px 331px, var(--star), transparent);
  background-size: 523px 487px, 611px 557px, 701px 619px, 577px 653px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: calc(var(--stars-b) * .3); } to { opacity: var(--stars-b); } }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 28px; } }

.skip { position: absolute; inset-inline-start: 12px; top: -100px; z-index: 100; padding: .6em 1em;
  background: var(--accent); color: var(--accent-ink); border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

.placeholder { color: var(--muted); font-size: .9rem; border: 1px dashed var(--line-strong); border-radius: 12px; padding: .6em 1em; margin: 0; }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon .fill { fill: currentColor; stroke: none; }

/* ---------- כפתורים – שתי הפעולות שוות בגודל (החלטה: "באותה מידה") ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 0 1.5em;
  border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, box-shadow .2s, transform .2s; }
.btn .icon { width: 20px; height: 20px; }
.btn-sm { min-height: 44px; padding: 0 1.1em; font-size: .9rem; border-radius: 999px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 26px var(--glow); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-soft { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: var(--line-strong); }
.btn-soft:hover { border-color: var(--accent); transform: translateY(-1px); }
/* כשהעכבר על הקצה התחתון של כפתור – ההרמה של פיקסל מוציאה אותו מתחת לעכבר, והכפתור רועד (ריחוף ← הרמה ← בלי ריחוף ← ירידה).
   פס שקוף מתחת לכפתור שומר אותו "מתחת לעכבר" גם כשהוא מורם (נמצא בבדיקות של ניסיון 95) */
.btn { position: relative; }
.btn::after { content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 3px; }

.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 12px;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer; }
.icon-btn:hover { background: var(--accent-soft); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* המתג: בבהיר מוצג ירח (לעבור לכהה), בכהה – שמש. בלי JS הוא לא עושה כלום – לא מוצג */
html:not(.js) .theme-btn { display: none; }
/* בטלפון צר המתג נשאר בכותרת, ליד "לבחור מסלול" – רק הסמל (ניסיון 43; לפני כן היה בתוך התפריט) */
@media (max-width: 479.98px) {
  .brand { gap: 8px; }
  .logo-rocket { height: 38px; }
  .logo-word { font-size: 23px; }
  .head-row { gap: 10px; }
  .head-tools { gap: 6px; }
  .head-cta { padding: 0 .85em; }
}
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}

.more { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font-weight: 700; text-decoration: none; }
.more:hover { text-decoration: underline; }
.more .icon { width: 18px; height: 18px; }

/* ---------- כותרת עליונה ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--head-bg); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.admin-bar .site-head { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-head { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-head { top: 0; } }
.head-row { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.head-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
/* הלוגו: הטיל עם הסיכה, ולידו המילה xSpace – משמאל לימין, כמו בלוגו */
.logo { display: inline-flex; align-items: center; gap: 7px; }
.logo-rocket { width: auto; height: 42px; flex: none; overflow: visible; }
.logo-word { flex: none; font-family: "xSpace Logo", "Varela Round", "Heebo", sans-serif; font-size: 26px; font-weight: 400; line-height: 1;
  letter-spacing: -.01em; color: var(--logo-space); white-space: nowrap; }
.lw-x { color: var(--logo-web); }
.lg-fin { fill: var(--logo-fin); } .lg-body { fill: var(--logo-body); } .lg-shade { fill: var(--logo-shade); }
.lg-nose { fill: var(--logo-nose); } .lg-ring { fill: var(--logo-ring); }

.nav-list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-list a { display: block; padding: .5em .8em; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.nav-list a:hover { background: var(--accent-soft); }
.nav-list a[aria-current="page"] { color: var(--accent-soft-ink); background: var(--accent-soft); }

.menu-btn { display: none; }

@media (min-width: 960px) {
  .site-nav { margin-inline-start: 20px; }
}
@media (max-width: 959.98px) {
  .js .menu-btn { display: inline-grid; }
  .js .site-nav { display: none; position: absolute; inset-inline: 0; top: 100%; padding: 8px 16px 16px;
    background: var(--raised); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .js .site-head.is-open .site-nav { display: block; }
  .js .nav-list { flex-direction: column; }
  .js .nav-list a { padding: .8em 1em; font-size: 1.05rem; }
  /* בלי JS – התפריט מוצג בשורה משלו */
  .head-row { flex-wrap: wrap; }
  html:not(.js) .site-nav { order: 3; width: 100%; overflow-x: auto; }
}
@media (max-width: 380px) {
  .logo-rocket { height: 34px; }
  .logo-word { font-size: 21px; }
  .head-cta { padding: 0 .6em; }
}

/* ---------- פתיחה ---------- */
.hero { position: relative; isolation: isolate; padding: clamp(36px, 7vw, 96px) 0 clamp(48px, 8vw, 104px); }
.hero::before { content: ""; position: absolute; inset: -10% 0 -20%; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 24% 42%, var(--nebula-a), transparent 70%),
              radial-gradient(26% 34% at 10% 74%, var(--nebula-b), transparent 70%); }
.hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 40px; } }
.hero-art { width: 100%; max-width: 540px; margin-inline: auto; }
@media (max-width: 959.98px) { .hero-art { max-width: 360px; } }
.eyebrow { display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1.1em; padding: .25em .95em; border-radius: 999px;
  font-size: .85rem; font-weight: 700; color: var(--accent-soft-ink); background: var(--accent-soft); border: 1px solid var(--line-strong); }
.lead { max-width: 34em; font-size: 1.15rem; color: var(--muted); margin-bottom: 1.6em; }

/* הציור – כוכב לכת, טבעת, ירח, מסלולים ולוויין */
.art { width: 100%; height: auto; overflow: visible; }
.art .orbit { fill: none; stroke: var(--orbit); stroke-width: 1.3; stroke-dasharray: 3 8; }
.art .orbit-in { stroke-dasharray: none; opacity: .55; }
.art .ring { fill: none; stroke: url(#pl-ring); stroke-width: 9; stroke-linecap: round; }
.art .ring-back { opacity: .5; }
.art .bands path { fill: none; stroke: var(--planet-hi); stroke-opacity: .16; stroke-width: 12; stroke-linecap: round; }
.art .sat-core { fill: var(--cyan); }
.art .sat-glow { fill: var(--cyan); opacity: .22; }
.art-stars circle, .art-stars .spark { fill: var(--star-art); }
.tw1 { animation: tw 4s ease-in-out infinite alternate; }
.tw2 { animation: tw 5.5s ease-in-out 1s infinite alternate; }
.tw3 { animation: tw 7s ease-in-out 2s infinite alternate; }
@keyframes tw { from { opacity: .25; } to { opacity: 1; } }

/* ---------- חלקים ---------- */
.section { position: relative; padding: clamp(44px, 6vw, 76px) 0; }
.sec-head { max-width: 44rem; margin-bottom: clamp(28px, 4vw, 44px); }
.sec-lead { color: var(--muted); font-size: 1.08rem; margin: 0; }
.sec-lead strong { color: var(--ink); }
.sec-more { margin: 24px 0 0; }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 .6em; font-family: var(--mono); font-size: .85rem;
  font-weight: 700; letter-spacing: .18em; color: var(--accent); }
.kicker::after { content: ""; width: 56px; height: 1px; background: linear-gradient(to left, var(--accent), transparent); }
.fine { margin: 18px 0 0; color: var(--muted); font-size: .9rem; }

/* כרטיסים – "מה מקבלים" */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0; list-style: none; }
.card { padding: 26px 24px 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card p { color: var(--muted); margin: 0; }
.badge { position: relative; display: grid; place-items: center; width: 50px; height: 50px; margin: 6px 6px 20px; border-radius: 50%;
  color: var(--accent); background: radial-gradient(circle at 32% 28%, var(--accent-soft), var(--surface) 75%); border: 1px solid var(--line-strong); }
.badge::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed var(--orbit); }

/* השלבים – מסלול טיסה מקווקו, והשלב האחרון הוא הנחיתה */
.steps { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps::before { content: ""; position: absolute; inset-inline-start: 21px; top: 22px; bottom: 22px; border-inline-start: 2px dashed var(--line-strong); }
.step { position: relative; padding-inline-start: 64px; counter-increment: step; }
.step::before { content: counter(step, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: -2px; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; font-family: var(--mono); font-size: .85rem; font-weight: 700;
  color: var(--accent); background: var(--surface); border: 1.5px solid var(--accent); box-shadow: 0 0 0 6px var(--bg); }
.step:last-child::before { color: #fff; text-shadow: 0 1px 3px rgba(20, 8, 50, .8); border-color: transparent; box-shadow: 0 0 0 6px var(--bg), 0 0 22px var(--glow);
  background: radial-gradient(circle at 34% 28%, var(--planet-mid), var(--planet-lo) 72%) var(--planet-lo); }
.step h3 { margin: 0 0 .25em; }
.step p { color: var(--muted); margin: 0; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(var(--n, 5), 1fr); gap: 20px; }
  .steps::before { inset-inline: calc(50% / var(--n, 5)); top: 22px; bottom: auto; height: 0; border-inline-start: 0; border-top: 2px dashed var(--line-strong); }
  .step { padding: 64px 0 0; text-align: center; }
  .step::before { inset-inline-start: auto; left: 50%; top: 0; transform: translateX(-50%); }
}

/* דוגמאות – צילום במחשב, ומעליו הטלפון */
.work { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); margin: 0; padding: 0; list-style: none; }
.work-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.work-shots { position: relative; padding: 20px 20px 0; background: radial-gradient(90% 100% at 70% 0%, var(--nebula-a), transparent 72%); }
.shot-desk { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px 12px 0 0;
  border: 1px solid var(--line-strong); border-bottom: 0; background: var(--bg-2); }
.shot-phone { position: absolute; inset-inline-end: 26px; bottom: -26px; width: 24%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top;
  border-radius: 14px; border: 4px solid #0b0918; background: var(--bg-2); box-shadow: 0 14px 30px rgba(10, 6, 30, .35); }
.work-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 14px; }
.work-body h3 { margin: 0 0 .3em; text-align: right; font-size: 1.15rem; }
.work-body p { color: var(--muted); margin: 0 0 .6em; }
.work-body .more { margin-top: auto; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .7em !important; padding-inline-end: calc(24% + 16px); }
.tag { font-size: .78rem; font-weight: 700; padding: .1em .7em; border-radius: 999px; color: var(--accent-soft-ink); background: var(--accent-soft); }

/* הצוות */
.team { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin: 0; padding: 0; list-style: none; }
.person { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.person h3 { margin: 0 0 .3em; }
.person p { color: var(--muted); margin: 0; }
.role { font-weight: 500; color: var(--muted); }
.avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; font-size: 1.4rem; font-weight: 800; color: #fff;
  background: radial-gradient(circle at 34% 28%, var(--planet-mid), var(--planet-lo) 72%) var(--planet-lo); box-shadow: 0 0 0 5px var(--accent-soft), 0 0 24px var(--glow);
  text-shadow: 0 1px 2px rgba(20, 8, 50, .6); }

/* מסלולים – כרטיס גדול לכל מסלול, דבר אחד בכל שורה, ומסלול 2 מודגש (נתי, 21.10.2026: "לתת במה למסלול 2") */
/* יותר אוויר בין הכרטיסים – בדף הבית ובעמוד המסלולים (ניסיון 22; נתי, 24.10.2026) */
.tracks { display: grid; gap: 40px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
.track { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 28px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.track::before { content: ""; position: absolute; width: 260px; height: 260px; inset-inline-end: -120px; top: -120px; border-radius: 50%;
  border: 1px dashed var(--orbit); pointer-events: none; }
.track-icon { width: 64px; height: 64px; margin-bottom: 10px; overflow: visible; }
.ti-rings ellipse { fill: none; stroke: var(--orbit); stroke-width: 1.4; }
.ti-sat { fill: var(--cyan); }
.track-num { margin: 0; font-size: .85rem; font-weight: 700; color: var(--accent); }
/* השם, המחיר והתיאור – במרכז; "מסלול N" והרשימה – מימין (ניסיון 31, בהשראת teddyvets) */
.track h3 { font-size: 1.35rem; margin: .1em 0 .5em; text-align: center; }
.track-price { margin: 0 0 16px; text-align: center; }
.tp-main { margin: 0; line-height: 1.15; }
.tp-amount { font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; }
.tp-per { margin-inline-start: 4px; color: var(--muted); font-size: 1.05rem; font-weight: 500; }
.tp-chips { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 0; }
.tp-chip { padding: .3em .95em; border-radius: 999px; font-size: .86rem; font-weight: 600; line-height: 1.4;
  color: var(--muted); background: var(--bg-2); border: 1px solid var(--line-strong); }
.tp-chip.is-annual { color: var(--chip-ok-ink); background: var(--chip-ok-bg); border-color: var(--chip-ok-line); font-weight: 700; }
.track-what { color: var(--muted); margin: 0 0 1em; text-align: center; }
.track-label { margin: 0 0 .6em; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 700; }
.ticks { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .icon { width: 18px; height: 18px; margin-top: .3em; color: var(--accent); }
.track-cta { margin-top: auto; }
/* חמשת העיקריים – גדולים ובולטים. השאר: בדף הבית מאחורי "ועוד X דברים שכלולים", בעמוד המסלולים מתחת לקו (נתי, 21.10.2026) */
.ticks-top { gap: 11px; margin-bottom: 16px; }
.ticks-top li { font-size: 1.04rem; font-weight: 400; line-height: 1.5; color: var(--ink); }
.ticks-top .icon { width: 22px; height: 22px; margin-top: .1em; padding: 4px; border-radius: 50%; stroke-width: 2.6;
  color: var(--accent-ink); background: var(--accent); }
.ticks-more { padding-top: 16px; border-top: 1px dashed var(--line-strong); }
.track-more { margin: 0 0 22px; }
.track-more summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; color: var(--accent);
  cursor: pointer; list-style: none; border-radius: 10px; }
.track-more summary::-webkit-details-marker { display: none; }
.track-more summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.track-more[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.track-more:not([open]) .when-open, .track-more[open] .when-closed { display: none; }
.track-more .ticks { margin: 6px 0 0; }
/* המסלול המומלץ – מסגרת סגולה, תג, מחיר גדול בסגול וכפתור מלא. אותו צל ואותו גובה כמו השניים שלידו (ניסיון 25) */
.track.is-featured { border: 2px solid var(--accent); }
.track.is-featured .tp-amount { font-size: 2.5rem; color: var(--accent); }
.track-badge { position: absolute; top: 20px; inset-inline-end: 20px; display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: .3em .95em; border-radius: 999px; font-size: .88rem; font-weight: 800; color: var(--accent-ink); background: var(--accent);
}
.track-badge .icon { width: 15px; height: 15px; }
/* טאבלט – כרטיס אחד ברוחב, אז הרשימה בשני טורים */
@media (min-width: 640px) and (max-width: 899px) { .track .ticks { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
@media (min-width: 900px) {
  .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; }
}

/* שאלות */
.faq { display: grid; gap: 12px; max-width: 52rem; }
.faq details { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.faq details[open] { border-color: var(--line-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 22px;
  font-weight: 700; cursor: pointer; list-style: none; border-radius: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: -5px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 5px; }
.faq .answer { padding: 0 22px 20px; color: var(--muted); margin: 0; }

/* ---------- עמוד המסלולים ---------- */
.hero-page { padding: clamp(32px, 6vw, 72px) 0 clamp(8px, 2vw, 16px); }
.hero-page::before { inset: -40% 0 -10%; }
.price-pill { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: .55em 1.1em; border-radius: 999px;
  color: var(--accent-soft-ink); background: var(--accent-soft); border: 1px solid var(--line-strong); }
.price-pill .icon { width: 16px; height: 16px; color: var(--accent); }
.section-tight { padding: clamp(32px, 5vw, 56px) 0; }

.track-who { margin: -6px 0 18px; padding: 10px 14px; border-radius: 16px; font-size: .92rem; color: var(--ink); background: var(--bg-2); border: 1px dashed var(--line-strong); }
.track-chosen { margin: 0 0 10px; font-weight: 700; color: var(--accent); }
.track.is-chosen { border-color: var(--accent); box-shadow: var(--shadow), 0 0 0 1px var(--accent); }

.start:not(.is-open) { display: none; }
/* ניסיון 17: התיבה במרכז, והגלילה מביאה אותה אל מתחת לכותרת. 48rem – כדי ש"מתחילים – מסלול 2, דומיין ואחסון אצלנו" ייכנס בשורה אחת (נתי) */
.start-box { max-width: 48rem; margin-inline: auto; scroll-margin-top: 12px; padding: clamp(24px, 4vw, 44px); border-radius: 30px; background: var(--surface);
  border: 1.5px solid var(--accent); box-shadow: var(--shadow), 0 0 40px var(--glow); }
.start-box h2:focus { outline: none; }
.start-intro { color: var(--muted); }
.field { margin: 0 0 18px; }
.label { display: block; margin-bottom: 6px; font-weight: 700; }
.opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"] { width: 100%; min-height: 50px; padding: 0 14px;
  border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit; }
.field input:focus { border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--bad); }
.field input[dir="ltr"] { text-align: right; }
.err { margin: 6px 0 0; color: var(--bad); font-size: .92rem; font-weight: 500; }
.form-err { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--bad); }
.tip { margin: 6px 0 0; font-size: .92rem; color: var(--muted); }
.tip button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.check { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.check-note { margin: 6px 0 0; margin-inline-start: 34px; font-size: .9rem; color: var(--muted); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 12px 0 0; color: var(--muted); }
.form-status:empty { display: none; }

.gets { display: grid; gap: 12px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.gets li { display: flex; gap: 10px; align-items: flex-start; }
.gets .icon { width: 18px; height: 18px; margin-top: .3em; color: var(--accent); }

.terms { display: grid; gap: 12px; margin: 0; max-width: 56rem; }
.term { padding: 16px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.term dt { font-weight: 700; margin-bottom: 4px; }
.term dd { margin: 0; color: var(--muted); }

/* ---------- עמודים פנימיים (שלב 4) ---------- */
/* ציר זמן אנכי גם במחשב – לשלבים עם הרבה טקסט (איך זה עובד) */
.steps.is-vertical { max-width: 46rem; gap: 30px; }
.step-time { display: inline-block; margin-inline-start: 8px; padding: .05em .7em; border-radius: 999px; vertical-align: .12em;
  font-size: .78rem; font-weight: 700; color: var(--accent-soft-ink); background: var(--accent-soft); white-space: nowrap; }
@media (min-width: 960px) {
  .steps.is-vertical { grid-template-columns: none; gap: 30px; }
  .steps.is-vertical::before { inset-inline: auto; inset-inline-start: 21px; top: 22px; bottom: 22px; height: auto;
    border-top: 0; border-inline-start: 2px dashed var(--line-strong); }
  .steps.is-vertical .step { padding: 0; padding-inline-start: 64px; text-align: start; }
  .steps.is-vertical .step::before { left: auto; inset-inline-start: 0; top: -2px; transform: none; }
}

/* עמוד הדוגמאות – שורה לכל אתר: הצילום, ולידו התיאור */
.work-rows { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.work-row { display: grid; overflow: hidden; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.work-row .work-shots { padding: 24px 24px 0; }
.work-row .work-body { padding: 34px 24px 26px; }
.work-row .work-body h2 { margin: 0 0 .35em; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); text-align: right; }
.work-row .work-body p { max-width: 34em; }
.work-row .btn { align-self: flex-start; margin-top: 10px; }
.work-row .btn .icon { width: 18px; height: 18px; }
@media (min-width: 960px) {
  .work-row { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .work-row .work-shots { padding: 28px 28px 0; align-self: end; }
  .work-row .work-body { padding: 32px 36px; }
  .work-row .tags { padding-inline-end: 0; }
}

/* מי אנחנו – כרטיס מלא לכל אחד */
.team-full { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.team-full .person { padding: 28px; }
.team-full .ticks { margin: 12px 0 0; }
.team-full .ticks span { color: var(--muted); }

/* ---------- כפתור הנגישות (שלב 6; נתי, 21.10.2026: "כפתור קטן שלנו") ---------- */
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-list .link-btn { min-height: 44px; color: var(--muted); text-decoration: none; }
.foot-list .link-btn:hover { color: var(--ink); text-decoration: underline; }

.a11y { position: fixed; z-index: 60; inset-inline-end: 16px; bottom: 16px; }
html.has-cookie-bar .a11y { bottom: calc(var(--bar-h, 0px) + 28px); }
.a11y-btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--accent-ink); background: var(--accent); box-shadow: 0 8px 24px var(--glow), 0 0 0 4px var(--bg); }
.a11y-btn .icon { width: 26px; height: 26px; }
.a11y-panel { position: absolute; inset-inline-end: 0; bottom: calc(100% + 12px); display: grid; gap: 8px; width: min(300px, calc(100vw - 32px));
  padding: 16px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.a11y-panel[hidden] { display: none; }
.a11y-title { margin: 0 0 2px; font-weight: 800; }
.a11y-size { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.a11y-size button, .a11y-opt { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.a11y-size button:nth-child(1) { font-size: .95rem; }
.a11y-size button:nth-child(2) { font-size: 1.15rem; }
.a11y-size button:nth-child(3) { font-size: 1.35rem; }
.a11y-opt { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; text-align: start; }
.a11y-size button[aria-pressed="true"], .a11y-opt[aria-pressed="true"] { color: var(--accent-soft-ink); background: var(--accent-soft); border-color: var(--accent); }
.a11y-opt[aria-pressed="true"]::after { content: "✓"; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; }
.a11y-foot a, .a11y-foot .link-btn { display: inline-flex; align-items: center; min-height: 44px; }

/* הודעת עוגיות – רק כשיש מזהה של Google Analytics */
.cookie-bar { position: fixed; z-index: 70; inset-inline: 16px; bottom: 16px; display: grid; gap: 12px; max-width: 46rem; margin-inline: auto;
  padding: 16px 18px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: .92rem; }
.cookie-bar .actions { gap: 8px; }
@media (min-width: 720px) { .cookie-bar { grid-template-columns: 1fr auto; align-items: center; } .cookie-bar .actions { flex-wrap: nowrap; } }

/* מה כל בחירה בכפתור הנגישות עושה */
html[data-a11y-size="1"] { font-size: 20px; }
html[data-a11y-size="2"] { font-size: 23px; }
@media (min-width: 720px) { html[data-a11y-size="1"] { font-size: 21px; } html[data-a11y-size="2"] { font-size: 24px; } }
html[data-a11y-links] a:not(.btn) { font-weight: 700; text-decoration: underline !important; text-decoration-thickness: 2px; }
html[data-a11y-links] a.btn { outline: 2px dashed currentColor; outline-offset: 2px; }
html[data-a11y-font] body, html[data-a11y-font] button, html[data-a11y-font] input, html[data-a11y-font] h1, html[data-a11y-font] h2 { font-family: Arial, "Segoe UI", sans-serif; letter-spacing: .01em; word-spacing: .08em; }
html[data-a11y-still] *, html[data-a11y-still] *::before, html[data-a11y-still] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* ניגודיות גבוהה: שחור, לבן וצהוב, בלי כוכבים ובלי זוהר – גובר על בהיר ועל כהה */
html:root[data-a11y-contrast] {
  color-scheme: dark;
  --bg: #000000; --bg-2: #000000; --surface: #000000; --raised: #000000;
  --ink: #ffffff; --muted: #ffffff; --line: #ffffff; --line-strong: #ffffff;
  --accent: #ffe600; --accent-hover: #fff27a; --accent-ink: #000000; --accent-soft: #000000; --accent-soft-ink: #ffe600;
  --cyan: #ffe600; --glow: transparent; --nebula-a: transparent; --nebula-b: transparent; --sky: none;
  --star: transparent; --star-art: transparent; --orbit: #ffffff; --ring: #ffffff;
  --planet-hi: #ffffff; --planet-mid: #bdbdbd; --planet-lo: #000000; --moon-hi: #ffffff; --moon-lo: #bdbdbd;
  --head-bg: #000000; --bad: #ff9a9a; --shadow: none; --scribble: #ffe600;
  --logo-web: #ffe600; --logo-space: #ffffff;
}
html[data-a11y-contrast] body::before, html[data-a11y-contrast] body::after, html[data-a11y-contrast] .hero::before,
html[data-a11y-contrast] .contact-box::before { display: none; }
html[data-a11y-contrast] .card, html[data-a11y-contrast] .track, html[data-a11y-contrast] .work-card, html[data-a11y-contrast] .work-row,
html[data-a11y-contrast] .person, html[data-a11y-contrast] .faq details, html[data-a11y-contrast] .term, html[data-a11y-contrast] .btn-soft { border-width: 2px; }
html[data-a11y-contrast] a:not(.btn) { color: #ffe600; }

/* ---------- עמוד כללי ---------- */
.legal h2 { margin: 1.6em 0 .5em; font-size: 1.3rem; }
.legal h2:first-child { margin-top: 0; }
.legal .ticks { margin-bottom: 1em; }
.defs { display: grid; gap: 6px; margin: 0 0 1em; padding-inline-start: 1.2em; }
.contact-list { display: grid; gap: 6px; margin: 0 0 1em; padding: 14px 18px; list-style: none; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.updated { margin-top: 2em; color: var(--muted); font-size: .9rem; }
.page-head { padding: clamp(48px, 8vw, 88px) 0 24px; }
.page-body { padding: 0 0 64px; }
.prose { max-width: 46rem; }

/* ---------- לדבר איתנו – בכל עמוד ---------- */
.contact { padding: 24px 0 72px; }
.contact-box { position: relative; isolation: isolate; overflow: hidden; border-radius: 34px; padding: clamp(28px, 5vw, 60px);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.contact-box::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 12% 100%, var(--nebula-a), transparent 70%), radial-gradient(40% 70% at 0% 0%, var(--nebula-b), transparent 70%); }
.contact-box { display: grid; gap: 28px; }
@media (min-width: 900px) { .contact-box { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }
.contact-text > p { color: var(--muted); max-width: 34em; }
.contact-text .actions { margin-top: 1.2em; }

/* הטופס הקצר (שלב 5) */
.lead-form { padding: 24px; border-radius: 26px; background: var(--bg); border: 1px solid var(--line-strong); }
.lead-form .field:last-of-type { margin-bottom: 20px; }
.lead-form .btn { width: 100%; }
.form-note { margin: 12px 0 0; font-size: .85rem; color: var(--muted); }
.lead-done { padding: 28px 24px; border-radius: 26px; background: var(--bg); border: 1.5px solid var(--accent); box-shadow: 0 0 34px var(--glow); }
.lead-done:focus { outline: none; }
.lead-done p { margin: 0; color: var(--muted); }
.lead-done .done-title { margin-bottom: .4em; font-size: 1.25rem; font-weight: 800; color: var(--ink); }

/* ---------- תחתית – קו אופק זוהר ---------- */
/* בתחתית – מקום לכפתור הנגישות, שלא יסתיר את השורה האחרונה */
.site-foot { position: relative; padding: 34px 0 96px; font-size: .92rem; }
.site-foot::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; opacity: .7;
  background: linear-gradient(to left, transparent, var(--accent) 30%, var(--cyan) 70%, transparent); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot-list { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
.foot-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; }
.foot-list a:hover, .foot-list a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.copy { margin: 0; color: var(--muted); margin-inline-start: auto; }
@media (max-width: 719.98px) {
  .foot-row { flex-direction: column; align-items: flex-start; }
  .copy { margin-inline-start: 0; }
}

/* ---------- בלי תנועה – למי שביקש במכשיר ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- בית, חום ומקום בטוח (נתי, 21.10.2026; רעיון 18) ---------- */
/* קו מצויר ביד מתחת למילה חשובה */
.scribble { position: relative; z-index: 0; white-space: nowrap; }
.scribble::after { content: ""; position: absolute; z-index: -1; inset-inline: -.06em; bottom: -.04em; height: .36em; background: var(--scribble);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 16C48 7 118 4 195 11' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M5 16C48 7 118 4 195 11' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }

/* "שקט נפשי" – ליד כל כפתור שמתחיל משהו */
.reassure { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .92rem; }
.reassure li { display: inline-flex; align-items: center; gap: 7px; }
.reassure .icon { width: 17px; height: 17px; color: var(--accent); }
.reassure-tracks { justify-content: center; margin-top: 30px; padding: 14px 22px; border-radius: 26px; background: var(--surface); border: 1px dashed var(--line-strong); }
.reassure-sm { margin-top: 18px; font-size: .86rem; }
.form-note.calm { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; }
.form-note.calm .icon { width: 17px; height: 17px; flex: none; margin-top: .2em; color: var(--accent); }

/* "בנינו את זה בשבילכם" – למי זה מתאים */
.cards-for .card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); }

/* ההבטחות שלנו – רצועה רכה */
.promises { padding: clamp(8px, 2vw, 16px) 0; }
.promises-box { padding: clamp(26px, 4vw, 46px); border-radius: 34px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 62%) var(--surface); }
.promises-box h2 { margin-bottom: 1em; }
.promise-list { display: grid; gap: 22px 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin: 0; padding: 0; list-style: none; }
.promise-list .badge { width: 46px; height: 46px; margin: 4px 4px 14px; }
.promise-list h3 { margin: 0 0 .25em; font-size: 1.04rem; }
.promise-list p { margin: 0; color: var(--muted); font-size: .92rem; }

/* "איזה מסלול מתאים לי?" – רק עם JavaScript (החישוב ב-site.js) */
.quiz { display: none; max-width: 48rem; margin: 0 0 28px; border-radius: 24px; background: var(--surface); border: 1.5px dashed var(--line-strong); }
.js .quiz { display: block; }
.quiz[open] { border-style: solid; box-shadow: var(--shadow); }
.quiz > summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 22px; font-weight: 700; cursor: pointer; list-style: none; border-radius: 24px; }
.quiz > summary::-webkit-details-marker { display: none; }
.quiz > summary > .icon { width: 20px; height: 20px; color: var(--accent); }
.quiz > summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-inline-start: auto; margin-top: -5px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform .2s; }
.quiz[open] > summary::after { transform: rotate(-135deg); margin-top: 5px; }
.quiz-sub { font-weight: 500; color: var(--muted); }
.quiz-form { display: grid; gap: 18px; padding: 4px 22px 22px; }
.quiz-form fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz-form legend { margin-bottom: 10px; padding: 0; font-weight: 700; }
.quiz-opt { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-strong); background: var(--bg); }
.quiz-opt input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.quiz-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); }
.quiz-form .err { margin: 0; }
.quiz-form .btn { justify-self: start; }
.quiz-result { margin: 0 22px 22px; padding: 18px 20px; border-radius: 20px; background: var(--accent-soft); color: var(--accent-soft-ink); }
.quiz-result:focus { outline: none; }
.quiz-pick { margin: 0 0 .3em; font-size: 1.08rem; }
.quiz-why { margin: 0 0 .7em; }
.quiz-result .more { color: var(--accent-soft-ink); }
.track.is-match { border-color: var(--accent); }
.track-match { align-self: flex-start; margin: 0 0 8px; padding: .15em .85em; border-radius: 999px; font-size: .86rem; font-weight: 700;
  color: var(--accent-soft-ink); background: var(--accent-soft); }

/* הדמויות המצוירות – אסטרונאוטים, בלי תמונות */
.avatar.avatar-art { width: 78px; height: 78px; background: none; text-shadow: none; }
.team-full .avatar.avatar-art { width: 96px; height: 96px; }
.av { display: block; width: 100%; height: 100%; }
.av-bg { fill: var(--accent-soft); }
.av-suit { fill: var(--av-suit); stroke: var(--line-strong); stroke-width: 1.5; }
.av-ring { fill: var(--planet-mid); }
.av-badge { fill: var(--accent-soft); stroke: var(--line-strong); stroke-width: 1.2; }
.av-mark { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.av-face { fill: none; stroke: #67e8f9; stroke-width: 2.6; stroke-linecap: round; }
.av-shine { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; opacity: .55; }
.av-phones { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.av-cup { fill: var(--planet-mid); }
.av-stick { fill: none; stroke: var(--line-strong); stroke-width: 3.5; stroke-linecap: round; }
.av-tip { fill: var(--logo-pin-2); }
.contact-faces { display: flex; margin-bottom: 16px; }
.contact-faces .av { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 4px var(--surface), 0 8px 22px var(--glow); }
.contact-faces .av + .av { margin-inline-start: -14px; }

/* התמונות של נתי ולאוניד (22.10.2026) – במקום האסטרונאוטים: עיגול עם טבעת רכה בצבע המותג */
.avatar.avatar-photo { width: 96px; height: 96px; object-fit: cover; background: var(--accent-soft);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px var(--accent-soft), 0 10px 28px var(--glow); }
.team-full .avatar.avatar-photo { width: 120px; height: 120px; }
@media (max-width: 480px) {
  .avatar.avatar-photo { width: 80px; height: 80px; }
  .team-full .avatar.avatar-photo { width: 96px; height: 96px; }
}
.contact-faces .avatar-photo { width: 64px; height: 64px; box-shadow: 0 0 0 4px var(--surface), 0 8px 22px var(--glow); }
.contact-faces .avatar-photo + .avatar-photo { margin-inline-start: -14px; }
html[data-a11y-contrast] .avatar.avatar-photo { box-shadow: 0 0 0 3px #ffffff; }

/* עמוד 404 – "הלכתם לאיבוד בחלל?" */
.lost-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 860px) { .lost-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.lost-art { width: 100%; max-width: 440px; margin-inline: auto; }

html[data-a11y-contrast] .promises-box, html[data-a11y-contrast] .quiz, html[data-a11y-contrast] .reassure-tracks { border-width: 2px; background: #000000; }

/* ---------- ניסיון 1 – צבעי זריחה (רעיון 18/1; נתי, 22.10.2026: "אור, לא צבע – כ-15%") ----------
   הסגול נשאר בעל הבית. החום – ברקע (שמנת עדינה), בשמיים של הפתיחה, בשלוש "מנורות" לאורך המסע (פתיחה, מסלול 2,
   לדבר איתנו), בלוויין שמקיף את כוכב הלכת, בניצוצות, בקו האופק בתחתית, ובקו המצויר שבכותרת הראשית בלבד.
   לא בטקסט, לא בכפתורים ולא בקישורים. בכהה – "לילה חם, מדוד": הכוכבים נשארים לבנים.
   הבלוק דורס את המשתנים שבראש הקובץ – מוחקים אותו, והאתר חוזר לקר */
:root {
  --bg: #fdfbf7;
  --bg-2: #f8f3ec;
  --line: #ebe4da;
  --line-strong: #d8cdbf;
  --head-bg: rgba(253, 251, 247, .8);
  --cyan: #ff7a45;                          /* הלוויינים בסמלי המסלולים וקו האופק בתחתית – היו תכלת */
  --sat: #ff7a45;                           /* הלוויין בציור הפתיחה – אור חם שמקיף את כוכב הלכת */
  --spark: #ff9a62;                         /* שלושת הניצוצות בציור */
  --nebula-b: rgba(255, 160, 110, .28);     /* הערפילית השנייה – בפתיחה וב"לדבר איתנו" – הייתה תכלת */
  --sky: radial-gradient(120% 55% at 50% -12%, rgba(255, 180, 135, .34), transparent 62%);
  --lamp: rgba(255, 150, 90, .26);          /* הזוהר סביב מסלול 2 ו"לדבר איתנו" */
  --lamp-soft: rgba(255, 190, 150, .24);    /* הרקע העליון של כרטיס מסלול 2 */
  --warm-soft: #fff3e8;                     /* רצועת ההבטחות */
  --scribble-warm: rgba(255, 122, 69, .5);  /* הקו המצויר בכותרת הראשית */
  --shadow: 0 2px 8px rgba(110, 70, 40, .05), 0 20px 48px rgba(140, 90, 60, .09);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0814;
    --bg-2: #110c1f;
    --head-bg: rgba(11, 8, 20, .72);
    --cyan: #ffb347;
    --sat: #ffb347;
    --spark: #ffd36e;
    --nebula-b: rgba(255, 122, 69, .18);
    --lamp: rgba(255, 138, 76, .22);
    --lamp-soft: rgba(255, 138, 76, .12);
    --warm-soft: #1e1424;
    --scribble-warm: rgba(255, 138, 76, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #0b0814;
  --bg-2: #110c1f;
  --head-bg: rgba(11, 8, 20, .72);
  --cyan: #ffb347;
  --sat: #ffb347;
  --spark: #ffd36e;
  --nebula-b: rgba(255, 122, 69, .18);
  --lamp: rgba(255, 138, 76, .22);
  --lamp-soft: rgba(255, 138, 76, .12);
  --warm-soft: #1e1424;
  --scribble-warm: rgba(255, 138, 76, .7);
}
.art .sat-core, .art .sat-glow { fill: var(--sat); }
.art-stars .spark { fill: var(--spark); }
.hero .scribble::after { background: var(--scribble-warm); }
/* מנורה 3 – "לדבר איתנו" */
.contact-box { box-shadow: var(--shadow), 0 0 64px var(--lamp); }
.promises-box { background: linear-gradient(135deg, var(--warm-soft), var(--surface) 62%) var(--surface); }
/* ניגודיות גבוהה – בלי חום, כמו שאר הזוהר */
html:root[data-a11y-contrast] { --sat: #ffe600; --spark: transparent; --lamp: transparent; --lamp-soft: #000000; --warm-soft: #000000; --scribble-warm: #ffe600; }

/* ---------- ניסיון 2 – תנועה (נתי, 22.10.2026: "נשימה, התיישבות ולחיצה") ----------
   פתיחה: הכותרת והשורה מתחתיה מופיעות מיד (המהירות לא נפגעת); הכפתורים ו"שקט נפשי" מתיישבים ביחד, ואז הקו המצויר
   מצייר את עצמו מימין לשמאל – החתימה. רקע: האור החם מאחורי הפתיחה נושם לאט (9 שניות, רק בעוצמה).
   גלילה: שלושה מקומות מתיישבים פעם אחת כשמגיעים אליהם – ההבטחות, מסלול 2 ו"לדבר איתנו" (class="reveal") – והקו ליד
   המספר של כל חלק נמתח בכתום (המסע). בשלב האחרון של "איך זה עובד" הסיכה מהלוגו נוחתת על כוכב הלכת הקטן.
   כפתורים: הרמה, זוהר, ולחיצה שמרגישים גם בטלפון. הכול על שקיפות ותזוזה בלבד, פעם אחת, בלי קפיצות.
   ההסתרה לפני הגלילה – רק כל עוד html.nl-reveal (הסקריפט ב-head מוסיף, site.js מבטל את הטיימר; אם site.js לא רץ – אחרי 3 שניות
   הכול גלוי), לא ב"בלי תנועה", ולא בהדפסה */
:root { --kicker-line: #ff7a45; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kicker-line: #ff8a4c; } }
:root[data-theme="dark"] { --kicker-line: #ff8a4c; }
html:root[data-a11y-contrast] { --kicker-line: #ffe600; }
@keyframes nl-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nl-breathe { from { opacity: .78; } to { opacity: 1; } }
.hero .actions, .hero .reassure { animation: nl-rise .5s cubic-bezier(.2, .7, .2, 1) .15s both; }
.hero .scribble::after { transform-origin: 100% 50%; animation: nl-draw .6s cubic-bezier(.2, .7, .2, 1) .55s both; }
.hero::before { animation: nl-breathe 9s ease-in-out infinite alternate; }
/* המסע – הקו ליד המספר נמתח מהמספר החוצה, בכתום; המספר נשאר סגול */
.kicker::after { width: 64px; height: 2px; border-radius: 1px; background: var(--kicker-line); transform-origin: 100% 50%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1) .1s; }
/* הנחיתה – הסיכה על כוכב הלכת הקטן של השלב האחרון */
.step:last-child::after { content: ""; position: absolute; inset-inline-start: 12px; top: -31px; width: 20px; height: 31px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 47 32 50'%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffc53d'/%3E%3Cstop offset='.55' stop-color='%23ff7a45'/%3E%3Cstop offset='1' stop-color='%23ff4d8d'/%3E%3C/linearGradient%3E%3Cpath d='M0 96L-13.03 69.37A14.5 14.5 0 1 1 13.03 69.37ZM5.66 63a5.66 5.66 0 1 0-11.31 0a5.66 5.66 0 1 0 11.31 0Z' fill='url(%23g)' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(20, 8, 50, .25));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1) .35s, opacity .45s cubic-bezier(.2, .7, .2, 1) .35s; }
@media (min-width: 960px) {
  .step:last-child::after { inset-inline-start: auto; left: calc(50% - 10px); top: -29px; }
  .steps.is-vertical .step:last-child::after { left: auto; inset-inline-start: 12px; top: -31px; }
}
html[data-a11y-contrast] .step:last-child::after { display: none; }
/* בעמוד המסלולים השלב האחרון הוא "מסמך מסכם" – לא נחיתה, והסיכה מופיעה רק פעמיים בדף: בלוגו ובנחיתה */
#after .step:last-child::after { display: none; }
/* התיישבות – פעם אחת, כשהחלק מגיע למסך */
.reveal { transition: opacity .55s cubic-bezier(.2, .7, .2, 1), transform .55s cubic-bezier(.2, .7, .2, 1); }
@media screen and (prefers-reduced-motion: no-preference) {
  html.nl-reveal:not([data-a11y-still]) :is(.section, .promises, .contact):not(.is-in) .reveal { opacity: 0; transform: translateY(14px); }
  html.nl-reveal:not([data-a11y-still]) :is(.section, .promises, .contact):not(.is-in) .kicker::after { transform: scaleX(0); }
  html.nl-reveal:not([data-a11y-still]) .section:not(.is-in) .step:last-child::after { opacity: 0; transform: translateY(-10px); }
}
/* כפתורים וכרטיסים – תגובה רכה, ולחיצה שמרגישים */
.btn { transition: background-color .15s, color .15s, border-color .15s, box-shadow .25s, transform .25s cubic-bezier(.2, .7, .2, 1); }
.btn-primary:hover { box-shadow: 0 12px 32px var(--glow); }
.btn:active { transform: scale(.98); transition-duration: .09s; }
.card { transition: border-color .26s, transform .26s cubic-bezier(.4, 0, .2, 1); }

/* תיקונים אחרי הביקורת של הפאנל (22.10.2026): כותרת מאוזנת, ניצוצות שלא נהיים חאקי, ההבטחות בטלפון בשורה,
   בלי כיווץ בלחיצה למי שביקש בלי תנועה, והקו המצויר בניגודיות גבוהה – קו דק מתחת לאותיות */
.hero h1 { text-wrap: balance; }
@keyframes tw { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 639px) {
  .promise-list { gap: 18px; }
  .promise-list li { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: start; }
  .promise-list .badge { grid-row: span 2; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
html[data-a11y-still] .btn:active { transform: none; }
html[data-a11y-contrast] .scribble::after { height: .12em; bottom: -.18em; }

/* ---------- ניסיון 5 – הבית על הכוכב (רעיון 2; נתי, 22.10.2026) ----------
   בית עם חלון עגול והסיכה מעליו. במחשב – עולם קטן בצד (nl_art_home), בטלפון ובטאבלט – תקריב של הבית על האופק, מעל הכותרת
   (nl_art_horizon). החלון נדלק פעם אחת אחרי הקו המצויר (1.25 שנ'), ואז הזוהר שלו נושם – במקום הנשימה של הרקע בפתיחה.
   האור דולק מההתחלה בלי JavaScript, ב"בלי תנועה" ובהדפסה – ההדלקה רק על המסך, כשמותר לזוז */
:root {
  --house-wall: #fffaf3; --house-side: #eee3f6; --house-roof: #4c1d95; --house-roof-side: #3a1577; --house-door: #7c3aed;
  --win-frame: #4c1d95; --win-off: #e3d9f1; --win-lit-1: #fff6d6; --win-lit-2: #ffc53d; --win-lit-3: #ff9a3d;
  --win-glow: rgba(255, 166, 77, .5); --spill: rgba(255, 196, 130, .5); --home-glow: rgba(255, 186, 120, .32); --rim: rgba(255, 168, 120, .55);
  --ground-1: #f1e8fb; --ground-2: #c2aef6; --ground-3: #8b5cf6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --house-wall: #30265e; --house-side: #261d50; --house-roof: #1c1440; --house-roof-side: #150f33; --house-door: #4a3a8c;
    --win-frame: #150f33; --win-off: #1d1640; --win-lit-1: #fff8dc; --win-lit-2: #ffd36e; --win-lit-3: #ffa94d;
    --win-glow: rgba(255, 179, 71, .62); --spill: rgba(255, 170, 90, .45); --home-glow: rgba(255, 150, 80, .17); --rim: rgba(255, 120, 95, .26);
    --ground-1: #6d4fd6; --ground-2: #2a1660; --ground-3: #120a2c;
  }
}
:root[data-theme="dark"] {
  --house-wall: #30265e; --house-side: #261d50; --house-roof: #1c1440; --house-roof-side: #150f33; --house-door: #4a3a8c;
  --win-frame: #150f33; --win-off: #1d1640; --win-lit-1: #fff8dc; --win-lit-2: #ffd36e; --win-lit-3: #ffa94d;
  --win-glow: rgba(255, 179, 71, .62); --spill: rgba(255, 170, 90, .45); --home-glow: rgba(255, 150, 80, .17); --rim: rgba(255, 120, 95, .26);
  --ground-1: #6d4fd6; --ground-2: #2a1660; --ground-3: #120a2c;
}
html:root[data-a11y-contrast] {
  --house-wall: #000000; --house-side: #000000; --house-roof: #ffffff; --house-roof-side: #ffffff; --house-door: #ffffff;
  --win-frame: #ffffff; --win-off: #000000; --win-lit-1: #ffe600; --win-lit-2: #ffe600; --win-lit-3: #ffe600;
  --win-glow: transparent; --spill: transparent; --home-glow: transparent; --rim: transparent;
  --ground-1: #000000; --ground-2: #000000; --ground-3: #000000;
}
html[data-a11y-contrast] .h-wall { stroke: #ffffff; stroke-width: 2; }
.h-wall { fill: var(--house-wall); }
.h-side { fill: var(--house-side); }
.h-roof { fill: var(--house-roof); stroke: var(--house-roof); stroke-width: 6; stroke-linejoin: round; }
.h-roof-side { fill: var(--house-roof-side); stroke: var(--house-roof-side); }
.h-door { fill: var(--house-door); }
.h-frame { fill: var(--win-frame); }
.h-glass { fill: var(--win-off); }
.art .bands circle { fill: none; stroke: var(--planet-hi); stroke-opacity: .16; stroke-width: 12; }
.art .rim-line { fill: none; stroke: var(--planet-hi); stroke-opacity: .8; stroke-width: 2; }
/* הרגע: האור נדלק פעם אחת, אחרי הקו המצויר בכותרת (0.55 + 0.6 שנ'); אחר כך הזוהר נושם לאט. הרקע בפתיחה כבר לא נושם */
@keyframes win-on { from { opacity: 0; } to { opacity: 1; } }
@media screen and (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-still]) .win-on { animation: win-on .8s cubic-bezier(.2, .7, .2, 1) 1.25s both; }
}
.win-glow { animation: nl-breathe 9s ease-in-out 2.1s infinite alternate both; }
.hero::before { animation: none; }
/* בטלפון ובטאבלט – התקריב מעל הכותרת, עם קצוות רכים; הציור הגדול – רק כשיש שני טורים */
.hero-art-m { display: none; }
@media (max-width: 959.98px) {
  .hero-art { display: none; }
  .hero-art-m { display: block; margin: -12px 0 6px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 42%, #000 55%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 42%, #000 55%, transparent 100%); }
  .hero-art-m .art { height: clamp(140px, 38vw, 220px); overflow: hidden; }
}

/* ---------- ניסיון 23 – הפתיחה בגובה המסך, רק בדף הבית (.hero-home; נתי, 24.10.2026: "שיראו רק את הבלוק הראשון של ההירו") ----------
   הגובה: המסך פחות הכותרת (--head-h – site.js מודד, גם עם סרגל הניהול), התוכן באמצע. אם התוכן גבוה מהמסך – הבלוק גדל איתו.
   החץ בתחתית – נושם לאט, ולחיצה גוללת לחלק הבא; בלי תנועה – עומד */
.hero-home { display: flex; flex-direction: column; min-height: calc(100svh - var(--head-h, 70px)); padding-bottom: clamp(8px, 2vh, 20px); }
/* התוכן באמצע המקום הפנוי, והחץ בסוף – בתחתית המסך כשיש מקום, ומיד אחרי התוכן כשאין (בטלפון קטן) – בלי לעלות עליו */
.hero-home > .wrap { margin-block: auto; }
.hero-next { flex: none; width: 44px; height: 44px; margin: 12px auto 0;
  display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.hero-next .icon { width: 26px; height: 26px; }
/* אחרי שגוללים קצת – החץ נעלם בדהייה ולא חוזר (site.js מוסיף is-gone); בטלפון ובטאבלט – בלי חץ בכלל: הגלילה מובנת מאליה (נתי) */
.hero-next { transition: opacity .4s ease, visibility .4s; }
.hero-next.is-gone { opacity: 0; visibility: hidden; }
@media (max-width: 959.98px) { .hero-next { display: none; } }
.hero-next:hover { color: var(--accent); }
@keyframes nl-hint { from { transform: translateY(0); opacity: .7; } to { transform: translateY(6px); opacity: 1; } }
@media screen and (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-still]) .hero-next .icon { animation: nl-hint 1.6s ease-in-out 1.6s infinite alternate both; }
}
@media print { .hero-home { min-height: 0; } .hero-next { display: none; } }

/* ---------- ניסיון 24 – השאלון מתחת למסלולים (נתי, 24.10.2026: "הלקוח יראה את כל המסלולים, התלבט, ואז יוכל להיעזר") ----------
   באמצע, מתחת לכרטיסים. "לכרטיס של המסלול" – הכרטיס המומלץ גדל וחוזר, פעמיים, לאט (is-flash, site.js; נתי: "אפקט של הגדלה והקטנה של הכרטיס").
   scale ולא transform – כדי שלא יתנגש בהרמה של העכבר. בלי תנועה – בלי ההבהוב */
.quiz { margin: 40px auto 0; }
/* קו רצוף ודק, כמו בשאלות הנפוצות (נתי: "לא צריך את הקו המקווקו... שיהיה קו רצוף דק כמו בשאלות נפוצות") */
.quiz { border: 1px solid var(--line); }
.quiz[open] { border-color: var(--line-strong); box-shadow: none; }
.tracks > .track:focus { outline: none; }
.tracks > .track:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 4px; }
@keyframes nl-blink {
  0%, 50%, 100% { scale: 1; }
  25%, 75% { scale: 1.03; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-still]) .tracks > .track.is-flash { z-index: 1; animation: nl-blink 2.6s ease-in-out both; }
}

/* ---------- ניסיון 25 – פידבק בכרטיסי המסלולים (נתי, 24.10.2026: "הנפשה עדינה של הצל והבלטה כשעוברים עם העכבר") ----------
   עומדים על כרטיס (או מגיעים בטאב לכפתור שבו) – עולה 12 פיקסלים, לאט (נתי: "הרבה יותר גדול", "ממש מעט יותר איטית"), הצל מעמיק, ומסגרת סגולה דקה ממסגרת מסלול 2.
   המסלול שהשאלון המליץ עליו – אותה מסגרת דקה, קבועה. רק עם עכבר; בלי תנועה – בלי ההרמה */
:root { --shadow-lift: 0 6px 16px rgba(76, 29, 149, .08), 0 38px 72px rgba(124, 58, 237, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] { --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 28px 60px rgba(0, 0, 0, .6); }
.tracks > .track { border-width: 1.5px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, border-color .35s ease,
  opacity .55s cubic-bezier(.2, .7, .2, 1); }
.tracks > .track.is-featured { border-width: 2px; }
@media (hover: hover) {
  .tracks > .track:is(:hover, :has(:focus-visible)) { border-color: var(--accent); box-shadow: var(--shadow-lift); }
  .tracks > .track.is-chosen:is(:hover, :has(:focus-visible)) { box-shadow: var(--shadow-lift), 0 0 0 1px var(--accent); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-still]) .tracks > .track:is(:hover, :has(:focus-visible)) { transform: translateY(-12px); }
}

/* ---------- ניסיון 27 – ווי ירוק בתיבת התודה (נתי, 25.10.2026: "ווי גדול ירוק בצד שמאל של בתוך התיבה") ----------
   הטקסט מימין, הווי משמאל. העיגול מתיישב והווי מצייר את עצמו פעם אחת כשהתיבה מופיעה; בלי תנועה – מופיע כמו שהוא */
:root { --done: #16a34a; --done-soft: #dcfce7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --done: #4ade80; --done-soft: rgba(74, 222, 128, .14); } }
:root[data-theme="dark"] { --done: #4ade80; --done-soft: rgba(74, 222, 128, .14); }
html[data-a11y-contrast] { --done: #ffe600; --done-soft: #000000; }
.lead-done:not([hidden]) { display: flex; align-items: center; gap: 20px; }
.lead-done .done-text { flex: 1; min-width: 0; }
.lead-done .done-go { margin-top: .5em; }
.done-check { flex: none; width: 72px; height: 72px; }
.done-check circle { fill: var(--done-soft); stroke: var(--done); stroke-width: 2.5; }
.done-check path { fill: none; stroke: var(--done); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 479.98px) { .lead-done:not([hidden]) { gap: 14px; } .done-check { width: 56px; height: 56px; } }
@media (max-width: 379.98px) { .done-check { width: 44px; height: 44px; } }
@keyframes nl-done-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes nl-done-draw { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@media screen and (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-still]) .done-check { animation: nl-done-pop .45s cubic-bezier(.2, .9, .3, 1.25) .1s both; }
  html:not([data-a11y-still]) .done-check path { stroke-dasharray: 34; animation: nl-done-draw .5s cubic-bezier(.6, 0, .3, 1) .4s both; }
}

/* ---------- ניסיון 29 – "עוד לא בטוחים? נחליט יחד בפגישה" (נתי, 25.10.2026; נקודה 5 בסקירת ה-UX) ----------
   מתחת לשאלון, באמצע. בעמוד המסלולים פותח את הטופס בלי מסלול; בדף הבית – קישור לשם (/tracks/?track=meet) */
.track-later { margin: 22px 0 0; text-align: center; }
#track-later[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); }

/* ---------- ניסיון 31 – התגית הירוקה של התשלום השנתי (נתי, 25.10.2026: "התגית 'או 118 ₪ לחודש במנוי שנתי' מצאה חן בעיניי") ---------- */
:root { --chip-ok-ink: #15803d; --chip-ok-bg: #effcf3; --chip-ok-line: #bbf0cc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chip-ok-ink: #86efac; --chip-ok-bg: rgba(74, 222, 128, .1); --chip-ok-line: rgba(74, 222, 128, .32); } }
:root[data-theme="dark"] { --chip-ok-ink: #86efac; --chip-ok-bg: rgba(74, 222, 128, .1); --chip-ok-line: rgba(74, 222, 128, .32); }
html[data-a11y-contrast] { --chip-ok-ink: #ffffff; --chip-ok-bg: #000000; --chip-ok-line: #ffffff; }

/* ---------- ניסיון 32 – הרשימה בתיבה רכה (נתי, 25.10.2026; בהשראת teddyvets) ----------
   תיבה בצבע הרקע של האתר (שמנת; בכהה – כהה מהכרטיס) עם מסגרת דקה. הכותרת – השורה הראשונה, ואחריה שורה לכל דבר עם קו דק מעליה,
   גם "ועוד X דברים שכלולים" והשורות שנפתחות ממנו. הקו של ניסיון 31 מעל הכותרת – כבר לא צריך, התיבה מפרידה */
/* קרוב יותר לשולי הכרטיס (‎-10) – כדי שהשורות לא יתקצרו בגלל התיבה */
.track-list { margin: 0 -10px 18px; padding: 0 14px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
.track-list .track-label { margin: 0; padding: 14px 0 12px; border: 0; }
.track-list .ticks { gap: 0; margin: 0; padding: 0; border: 0; }
.track-list .ticks li { padding: 11px 0; border-top: 1px solid var(--line); }
.track-list .track-more { margin: 0; }
.track-list .track-more summary { display: flex; border-top: 1px solid var(--line); border-radius: 0; }
/* בתיבה – עמודה אחת גם בטאבלט (בלי חצי קו בשורה האחרונה) */
@media (min-width: 640px) and (max-width: 899px) { .track-list .ticks { grid-template-columns: 1fr; } }
.track-list .track-more .ticks { margin: 0; }

/* ---------- ניסיון 33 – תיבות "מה מקבלים" באותו גובה במחשב (נתי, 25.10.2026: "שה'מה מקבלים' כולם יהיו באותו גובה על פי מסלול 2") ----------
   הכרטיס – ראש (עד התיאור) וגוף (התיבה, למי זה והכפתור). במחשב כל כרטיס תופס שתי שורות של הרשת (subgrid), והראש מקבל את הגובה של הגבוה מבין
   השלושה – כך התיבות מתחילות באותו קו. בטלפון ובטאבלט – כרטיס מתחת לכרטיס, בלי שינוי */
.track-head, .track-body { display: flex; flex-direction: column; }
.track-body { flex: 1; }
@media (min-width: 900px) {
  /* שלוש שורות ברשת (ניסיון 35): הראש, התיאור והגוף – כל אחת בגובה של הגבוהה מבין השלושה. כך התיאורים מתחילים באותו גובה
     (נתי: "נכתוב רגיל בגובה כמו שכתובים הטקסטים במסלול 2 ו-3"), והתיבות – באותו קו */
  .tracks > .track { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}

/* ---------- ניסיון 39 – שני גוונים בקוביות "בנינו את זה בשבילכם" (נתי, 29.10.2026: "שהקוביה הימנית תשאר באותה צבע, אחת משמאל לידה
   בצבע בהיר יותר, שמאל ממנה אותו צבע והשמאלית הרביעית באותה צבע בהיר") ----------
   הראשונה והשלישית – כמו שהיו; השנייה והרביעית – בגוון בהיר יותר. בטלפון (אחת מתחת לשנייה) – אותו סדר */
:root { --card-alt-a: #ffffff; --card-alt-b: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --card-alt-a: #1d1840; --card-alt-b: #17132f; } }
:root[data-theme="dark"] { --card-alt-a: #1d1840; --card-alt-b: #17132f; }
.cards-for .card:nth-child(even) { background: linear-gradient(180deg, var(--card-alt-a), var(--card-alt-b)); }
html[data-a11y-contrast] .cards-for .card:nth-child(even) { background: #000000; }

/* ---------- ניסיון 40 – העיגולים בהבטחות (נתי, 29.10.2026: "תוריד ממנו את העיגול מקווקו... שכל אחד מהאיקונים יבלוט כמו בצעד 3 באיך זה עובד,
   שזה יהבהב פעם אחד ויעבור להבא אחריו"; תיקון: "הבלטה וצבע פעם אחת ומיד הוא עובר להבא") ----------
   בלי הטבעת המקווקוות. site.js מדליק את העיגולים בגל, לפי הסדר, רק כשההבטחות על המסך: כל עיגול מתמלא בכוכב הלכת של השלב האחרון
   (‎::after – שקוף עד שנדלק), הסמל נהיה לבן וקופץ – ומיד דועך, והבא מתחיל עוד לפני שהקודם סיים. 3.2 שניות לכל עיגול (נתי: "תאט את ההבהוב ואת המעבר", "עוד לאט") */
.promise-list .badge { isolation: isolate; }
.promise-list .badge::after { inset: 0; z-index: -1; border: 0; opacity: 0;
  background: radial-gradient(circle at 34% 28%, var(--planet-mid), var(--planet-lo) 72%) var(--planet-lo); }
.promise-list .badge.is-lit { animation: nl-promise 3.2s cubic-bezier(.45, 0, .35, 1) both; }
.promise-list .badge.is-lit::after { animation: nl-promise-fill 3.2s cubic-bezier(.45, 0, .35, 1) both; }
@keyframes nl-promise {
  0%   { scale: 1; color: var(--accent); box-shadow: 0 0 0 transparent; }
  32%  { scale: 1.14; color: #fff; box-shadow: 0 0 22px var(--glow); }
  100% { scale: 1; color: var(--accent); box-shadow: 0 0 0 transparent; }
}
@keyframes nl-promise-fill { 0% { opacity: 0; } 32% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .promise-list .badge.is-lit, .promise-list .badge.is-lit::after { animation: none; } }
html[data-a11y-still] .promise-list .badge.is-lit, html[data-a11y-still] .promise-list .badge.is-lit::after,
html[data-a11y-contrast] .promise-list .badge.is-lit, html[data-a11y-contrast] .promise-list .badge.is-lit::after { animation: none; }

/* ---------- ניסיון 41 – "עוד לא בטוחים? נחליט יחד בפגישה" בירוק (נתי, 29.10.2026: "שזה יהיה בתג ירוק כמו משפט של 'משלמים פעם אחת'") ----------
   הצבעים של התגית הירוקה (‎--chip-ok-*, ניסיון 31) – בכפתור (בעמוד המסלולים) ובקישור (בדף הבית). נשאר בגובה של כפתור, כדי שיהיה נוח ללחוץ */
.track-later .btn { min-height: 46px; font-size: .98rem; font-weight: 700;
  color: var(--chip-ok-ink); background: var(--chip-ok-bg); border-color: var(--chip-ok-line); }
.track-later .btn:hover { border-color: var(--chip-ok-ink); }
#track-later[aria-pressed="true"] { color: var(--chip-ok-ink); background: var(--chip-ok-bg); border-color: var(--chip-ok-ink); box-shadow: 0 0 0 1px var(--chip-ok-ink); }

/* ---------- ניסיון 42 – הכוכבים מנצנצים (נתי, 29.10.2026: "שהכוכבים שיש ברקע ינצנצו, אבל אסור שזה יהיה ילדותי וזול – אלגנטי ומרשים";
   בחר: נצנוץ שקט והבזק נדיר, בשני המצבים) ----------
   site.js מוסיף שכבה קבועה מאחורי הכול (.sky-tw) עם כוכבים במקומות אקראיים – כל אחד מתבהר ומתעמם לאט, בקצב ובזמן שלו (‎--d, ‎--dl),
   כך שאף פעם לא כולם יחד. פעם בכמה שניות כוכב אחד, במקום פנוי מתוכן, מבזיק עם ארבע קרניים דקות ודועך (.tw-glint). רק opacity ו-transform.
   בלי תנועה ובניגודיות גבוהה – השכבה לא נוצרת */
:root { --tw-glow: rgba(124, 58, 237, .35); --glint-c: #7c3aed; --glint-glow: rgba(124, 58, 237, .45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tw-glow: rgba(255, 255, 255, .55); --glint-c: #ffffff; --glint-glow: rgba(255, 236, 214, .8); } }
:root[data-theme="dark"] { --tw-glow: rgba(255, 255, 255, .55); --glint-c: #ffffff; --glint-glow: rgba(255, 236, 214, .8); }
.sky-tw { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.tw-star { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--star-art);
  box-shadow: 0 0 calc(var(--s) * 2.5) var(--tw-glow); opacity: 0;
  animation: nl-tw var(--d) cubic-bezier(.45, .05, .55, .95) var(--dl) infinite; }
/* רק שקיפות, בעקומה של גל – בלי הקטנה (בנקודה של 2 פיקסלים היא נראית כמו קפיצה) ובלי לעצור באמצע הדעיכה */
@keyframes nl-tw { 0%, 100% { opacity: 0; } 50% { opacity: .95; } }
/* ההבזק – נקודה עם זוהר וארבע קרניים דקות שדועכות בקצוות; הקרן האנכית קצת ארוכה מהאופקית, כמו בצילום של טלסקופ */
.tw-glint { position: absolute; width: 0; height: 0; opacity: 0; scale: .2; }
.tw-glint::before, .tw-glint::after { content: ""; position: absolute; border-radius: 1px; }
.tw-glint::before { width: 40px; height: 1.6px; left: -20px; top: -.8px; background: linear-gradient(90deg, transparent, var(--glint-c) 50%, transparent); }
.tw-glint::after { width: 1.6px; height: 48px; left: -.8px; top: -24px; background: linear-gradient(180deg, transparent, var(--glint-c) 50%, transparent); }
.tw-glint i { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--glint-c); box-shadow: 0 0 10px 3px var(--glint-glow), 0 0 26px 6px var(--tw-glow); }
/* הסיבוב – אחיד מההתחלה עד הסוף (rotate, אנימציה משלו); ההבזק – עולה מהר ומאט אל השיא, ודועך בתאוצה עד שנעלם, בלי עצירה בדרך */
.tw-glint.is-on { animation: nl-glint 2.2s linear both, nl-glint-turn 2.2s linear both; }
@keyframes nl-glint {
  0%   { opacity: 0; scale: .2; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  28%  { opacity: 1; scale: 1; animation-timing-function: cubic-bezier(.55, 0, .8, .45); }
  100% { opacity: 0; scale: .25; }
}
@keyframes nl-glint-turn { from { rotate: 0deg; } to { rotate: 32deg; } }
@media (prefers-reduced-motion: reduce) { .sky-tw { display: none; } }
html[data-a11y-still] .sky-tw, html[data-a11y-contrast] .sky-tw { display: none; }

/* ---------- ניסיון 43 – המתג בהיר/כהה בטלפון ליד "לבחור מסלול" (נתי, 29.10.2026: "במצב מובייל נוציא את המצב כהה / מצב בהיר מהתפריט
   ונשתול אותו ליד הכפתור של בחר מסלול, שיהיה רק אייקון של ירח ושמש") ----------
   המתג שבתפריט ירד (header.php), והמתג שבכותרת מוצג בכל רוחב. מתחת ל-360 – לוגו קצת קטן ורווחים קטנים, כדי שהכול יישאר בשורה אחת
   והכפתורים יישארו 44 */
/* (התפריט – אלמנט ריק בשורה בטלפון, ולכן הרווח של השורה נספר פעמיים; כאן הרווח רק בתוך הכלים) */
@media (max-width: 359.98px) {
  .head-row { gap: 0; }
  .head-tools { gap: 4px; padding-inline-start: 4px; }
  .head-cta { padding: 0 .5em; font-size: .84rem; }
  .brand { gap: 6px; }
  .logo { gap: 5px; }
  .logo-rocket { height: 30px; }
  .logo-word { font-size: 19px; }
}

/* ---------- ניסיון 44 – בלי הטבעת המקווקוות סביב הסמלים בקוביות "בנינו את זה בשבילכם" (נתי, 29.10.2026: "תוריד את הקו המקווקו מסביב לאייקונים") ---------- */
.cards-for .badge::after { display: none; }

/* ---------- ניסיון 45 – הכוכב הקטן שמקיף את הכוכב הגדול, והמסלול בבהיר (נתי, 29.10.2026: "אפשר לשפר את הוויזואליות שלו?",
   "במצב בהיר כמעט ולא רואים את הקו המקווקו של המסלול"; בחר: כדור עם עומק ושובל קצר) ----------
   הציור – nl_sat() ב-art.php. כאן הצבעים: נקודת האור והצל של הכדור, והשובל. המסלול בבהיר – כהה ועבה יותר */
:root { --sat-hi: #fff1dc; --sat-lo: #c2410c; --art-orbit: rgba(109, 40, 217, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sat-hi: #fff6e0; --sat-lo: #d9620f; --art-orbit: var(--orbit); } }
:root[data-theme="dark"] { --sat-hi: #fff6e0; --sat-lo: #d9620f; --art-orbit: var(--orbit); }
html[data-a11y-contrast] { --sat-hi: #ffe600; --sat-lo: #ffe600; --art-orbit: #ffffff; }
.art .sat-tail { fill: var(--sat); }
.art-home .orbit { stroke: var(--art-orbit); stroke-width: 1.6; }

/* ---------- ניסיון 49 – הפתיחה בדף הבית ממורכזת בטלפון ובטאבלט (נתי, 29.10.2026: "תמרכז את ההירו במובייל") ----------
   מתחת ל-960 (טור אחד, הבית על האופק מעל הכותרת): הכותרת, השורה, הכפתורים ו"שקט נפשי" באמצע; השורה מאוזנת (balance) */
@media (max-width: 959.98px) {
  .hero-home .hero-text { text-align: center; }
  .hero-home .lead { margin-inline: auto; text-wrap: balance; }
  .hero-home .actions, .hero-home .reassure { justify-content: center; }
}

/* ---------- ניסיון 50 – במחשב הטקסט בפתיחה ממורכז בחצי שלו (נתי, 29.10.2026: "לקחת את כל החלק הימני ולמרכז אותו בצד ימין...
   שהוא יהיה מיושר לאמצע") ----------
   מ-960 (שני טורים): הכותרת, השורה, הכפתורים ו"שקט נפשי" באמצע הטור הימני; הציור נשאר בשמאלי */
@media (min-width: 960px) {
  .hero-home .hero-text { text-align: center; }
  .hero-home .lead { margin-inline: auto; text-wrap: balance; }
  .hero-home .actions, .hero-home .reassure { justify-content: center; }
  /* ארבע ההבטחות של "שקט נפשי" – שתיים ושתיים, כדי שאחת לא תישאר לבד בשורה */
  .hero-home .reassure { max-width: 25em; margin-inline: auto; }
}

/* ---------- ניסיון 51 – גלילה לחלק בדף נעצרת בתחילת החלק (נתי, 29.10.2026: "כשאני לוחץ על 'לראות את המסלולים'... הוא מציג לי קצת מסעיף 2") ----------
   ה-84 של scroll-padding-top ב-html (כדי שהכותרת הקבועה לא תסתיר) וה-84 של scroll-margin-top בחלקים נסכמו – 168, והגלילה נעצרה כ-100 מוקדם מדי.
   לחלקים – בלי תוספת משלהם, והריווח של העמוד – בדיוק הגובה של הכותרת (‎--head-h, ש-site.js מודד – גם עם סרגל הניהול): החלק מתחיל
   מתחת לכותרת בלי פס מהחלק הקודם, והריווח העליון שלו נותן אוויר מעל המספר */
section[id] { scroll-margin-top: 0; }
html { scroll-padding-top: var(--head-h, 84px); }

/* ניסיון 52 – כותרת של כרטיס ב"בשבילכם" שנשברת – בשתי שורות מאוזנות, בלי מילה לבד */
.cards-for .card h3 { text-wrap: balance; }

/* ניסיון 53 – "איך זה עובד" בדף הבית: שבירת שורות נעימה יותר בתיאור של כל צעד */
#how .step p { text-wrap: pretty; }

/* ניסיון 62 – "הדף בידיים שלכם": הטקסט מימין, ובמחשב ציור של מסך עריכה משמאל. הציור – HTML בצבעי האתר, כך שהוא חד ומתחלף בבהיר ובכהה.
   כשנכנס לתצוגה – הסמן מהבהב בשדה הכותרת, ו"נשמר ✓" מופיע פעם אחת; בלי תנועה – "נשמר" כבר שם */
.edit-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .edit-grid { grid-template-columns: 1fr minmax(0, 27rem); } }
.edit-text .sec-lead { margin-bottom: 22px; max-width: 34rem; }
.edit-list { margin-bottom: 18px; }
.edit-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; color: var(--muted); }
.edit-note .icon { flex: none; width: 20px; height: 20px; margin-top: .2em; color: var(--accent); }
.edit-art { width: 100%; max-width: 27rem; margin-inline: auto; }
.em { border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift, var(--shadow)); }
.em-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--bg-2, var(--bg)); border-bottom: 1px solid var(--line); }
.em-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.em-bar b { margin-inline-start: auto; font-size: .82rem; font-weight: 700; color: var(--muted); }
.em-body { display: grid; gap: 12px; padding: 18px; }
.em-field { display: grid; gap: 5px; }
.em-label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.em-input { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--ink); font-size: .95rem; }
.em-input[dir="ltr"] { justify-content: flex-end; }
.em-field:first-child .em-input { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.em-caret { display: inline-block; width: 2px; height: 1.15em; margin-inline-start: 2px; background: var(--accent); }
.em-photo { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; }
.em-photo .em-label { grid-column: 1 / -1; }
.em-pic { display: grid; place-items: center; width: 64px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-soft), var(--bg)); color: var(--accent); }
.em-pic .icon { width: 22px; height: 22px; }
.em-swap { justify-self: start; font-size: .85rem; font-weight: 600; color: var(--accent); }
.em-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.em-btn { padding: 9px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .92rem; }
.em-saved { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700; color: var(--chip-ok-ink); }
.em-saved .icon { width: 18px; height: 18px; }
@media (max-width: 899.98px) { .edit-art { max-width: 24rem; } .em-field:nth-child(2) { display: none; } }
@media screen and (prefers-reduced-motion: no-preference) {
  html:not([data-a11y-still]) .em-caret { animation: nl-em-caret 1.1s steps(1) infinite; }
  html.nl-reveal:not([data-a11y-still]) .edit-sec:not(.is-in) .em-saved { opacity: 0; }
  html:not([data-a11y-still]) .edit-sec.is-in .em-saved { animation: nl-em-saved .6s ease-out 1.2s both; }
}
@keyframes nl-em-caret { 50% { opacity: 0; } }
@keyframes nl-em-saved { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html[data-a11y-contrast] .em-field:first-child .em-input { box-shadow: none; }

/* ---------- ניסיון 82 – הצבעים מהתמונה של קרני האור, בבהיר (נתי, 1.11.2026: "אני רוצה שכל האתר יהיה בצבעים שתדגום מהתמונה הזאת";
   "צהוב כמו הסיכה, סגול כמו הטיל והכדור לכת... כחול בהיר בהיר ונגיעות ולא כל הדף כחול בהיר אלה לבן") ----------
   מהתמונה: רקע לבן, ובראש הדף תכלת ‎#eff7ff שדועך ללבן (ממוצע ‎#f6fbff) · כותרות ‎#0a0a0a · טקסט ‎#485364 · הכותרת הקטנה ‎#747c8a – כאן
   כהה יותר, ‎#656e7d, בשביל הניגודיות · מסגרת ‎#e5e5e5 · קרני האור ‎#a0d2ff. עליהם – סגול הטיל (הכפתור הראשי, הלוגו, כוכב הלכת) וזהב הסיכה (הקו המצויר,
   הקו ליד המספר, הלוויינים והניצוצות). ביום – בלי כוכבים. חלקים לסירוגין בדף הבית – בתכלת עדין.
   הכהה וניגודיות גבוהה – בלי שינוי: כל משתנה כאן מוגדר שם מחדש, גם החדשים (‎--caption, ‎--band, ‎--soft-box, ‎--btn-soft-*, ‎--night) */
:root {
  --bg: #ffffff;
  --bg-2: #f6fbff;
  --ink: #0a0a0a;
  --muted: #485364;
  --line: #e5e5e5;
  --line-strong: #d3dae4;
  --accent-soft: #eff7ff;
  --accent-soft-ink: #4c1d95;
  --nebula-a: rgba(167, 139, 250, .22);
  --nebula-b: rgba(160, 210, 255, .45);
  --sky: linear-gradient(to bottom, #eff7ff, rgba(239, 247, 255, 0) 640px);
  --head-bg: rgba(255, 255, 255, .85);
  --stars-a: 0;
  --stars-b: 0;
  --cyan: #f5b301;                          /* הלוויינים בסמלי המסלולים והקו בתחתית – זהב */
  --sat: #ffc53d;
  --spark: #ffc53d;
  --sat-hi: #fff7dc;
  --sat-lo: #c7860a;
  --lamp: rgba(160, 210, 255, .3);          /* הזוהר סביב "לדבר איתנו" – תכלת */
  --lamp-soft: rgba(160, 210, 255, .22);
  --warm-soft: #eff7ff;                     /* הפינה של רצועת ההבטחות */
  --scribble-warm: rgba(255, 197, 61, .85); /* הקו המצויר בכותרת הראשית – זהב הסיכה */
  --kicker-line: #ffc53d;
  --shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 18px 44px rgba(60, 110, 170, .08);
  --caption: #656e7d;                       /* הכותרת הקטנה (המספר) מעל כל חלק */
  --band: #f6fbff;                          /* החלקים לסירוגין בדף הבית */
  --soft-box: #f6fbff;                      /* התיבה הרכה בכרטיסי המסלולים (ניסיון 32) – תכלת במקום צבע הרקע */
  --btn-soft-bg: #ffffff;                   /* הכפתור המשני – לבן עם מסגרת */
  --btn-soft-ink: #0a0a0a;
  --night: none;                            /* שכבת הכוכבים המנצנצים (ניסיון 42) – רק בלילה */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --caption: var(--accent); --band: transparent; --soft-box: var(--bg);
    --btn-soft-bg: var(--accent-soft); --btn-soft-ink: var(--accent-soft-ink); --night: block; }
}
:root[data-theme="dark"] { --caption: var(--accent); --band: transparent; --soft-box: var(--bg);
  --btn-soft-bg: var(--accent-soft); --btn-soft-ink: var(--accent-soft-ink); --night: block; }
html:root[data-a11y-contrast] { --caption: var(--accent); --band: transparent; --soft-box: var(--bg);
  --btn-soft-bg: var(--accent-soft); --btn-soft-ink: var(--accent-soft-ink); }
.kicker { color: var(--caption); }
.btn-soft { background: var(--btn-soft-bg); color: var(--btn-soft-ink); }
.track-list { background: var(--soft-box); }
.home :is(#how, #edit, #faq) { background-color: var(--band); }
@media (prefers-reduced-motion: no-preference) { .sky-tw { display: var(--night); } }

/* ---------- ניסיון 83 – רשת וקרני אור מאחורי הפתיחה (נתי, 1.11.2026: "בהירו ללכת על משהו בסגנון הזה" – Animated Grid Pattern של Magic UI;
   הצבע – מ-Light Rays) ----------
   רשת משושים דקה על כל הפתיחה – גם מאחורי כוכב הלכת – שדועכת רק ברצועה דקה בתחתית (נתי: "תגדיל את הרשת / כוורת מאחורה שתיהיה על כל ההירו"),
   מוטה כמו ב-Hexagon Pattern של Magic UI (skewY(6deg); נתי: "זאת הזווית שאנחנו רוצים"), משושים בתכלת
   שנדלקים ונכבים לאט – בערך אחד מעשרים בזהב הסיכה (site.js), ושש קרניים בתכלת מלמעלה
   (בטלפון שלוש) שמתנדנדות ומתעמעמות לאט, כל אחת בקצב שלה – רק שקיפות וסיבוב. מאחורי הטקסט – אור לבן עדין, והכוורת נראית מסביב. כוכב הלכת והבית נשארים.
   רק בבהיר (‎--day). בלי תנועה – תמונה עומדת: הקרניים חלשות וקבועות, וכמה משושים דולקים. בניגודיות גבוהה – מוסתר.
   הצבעים – רק במשתנים כאן (גם ‎--gold, כמו בניסיון 84), כדי שמעבר לצבע אחר יהיה במקום אחד */
:root { --day: block; --hero-clear: rgba(255, 255, 255, .72); --gold: #ffc53d;
  --sky-line: rgba(72, 83, 100, .11); --sky-cell: #a0d2ff; --sky-ray: rgba(160, 210, 255, .75); --sky-ray-end: rgba(160, 210, 255, 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --day: none; } }
:root[data-theme="dark"] { --day: none; }
html:root[data-a11y-contrast] { --day: none; }
.hero-sky { display: var(--day); position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 96px), transparent); }
/* השכבה המוטה – גדולה מהפתיחה למעלה ולמטה, כדי שההטיה לא תשאיר פינה ריקה. הקרניים – מחוץ לה, ישרות */
.sky-tilt { position: absolute; inset: -15% -2%; transform: skewY(6deg); }
.sky-grid { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sky-grid path { fill: none; stroke: var(--sky-line); stroke-width: 1; }
.sky-sm { display: none; }
@media (max-width: 719.98px) { .sky-lg { display: none; } .sky-sm { display: inline; } }
.sky-cells { position: absolute; inset: 0; }
.sky-cell { position: absolute; background: var(--sky-cell); opacity: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.sky-cell.is-gold { background: var(--gold); }
.sky-ray { position: absolute; top: -14%; left: calc(var(--x) - var(--w) / 2); width: var(--w); height: 78%; border-radius: 999px;
  transform-origin: 50% 0; rotate: var(--r); opacity: calc(var(--o) * .55);
  background: linear-gradient(to bottom, var(--sky-ray), var(--sky-ray-end) 92%); filter: blur(36px);
  animation: sky-ray var(--d) ease-in-out var(--dl) infinite; }
@keyframes sky-ray {
  0%, 100% { opacity: 0; rotate: calc(var(--r) - 1.6deg); }
  50% { opacity: var(--o); rotate: calc(var(--r) + 1.6deg); }
}
.hero-sky.is-paused .sky-ray { animation-play-state: paused; }
@media (max-width: 719.98px) { .sky-ray:nth-of-type(even) { display: none; } }
/* מאחורי הטקסט – אור לבן רך, כדי שהכוורת לא תפריע לקרוא; עדין, כך שרואים אותה מסביב */
.hero-home .hero-text { position: relative; }
.hero-home .hero-text::before { content: ""; display: var(--day); position: absolute; inset: -40px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, var(--hero-clear), rgba(255, 255, 255, .32) 62%, transparent); }

/* ---------- ניסיון 84 – "איך זה עובד" בדף הבית: ציר אנכי שנדלק בגלילה (נתי, 1.11.2026: "ציר השלבים שנדלק"; בהשראת brandli.co.il) ----------
   מספר בריבוע מעוגל (60, בטלפון 50), קו דק בין השלבים, ותגית זמן לכל שלב. השלב שהגיעו אליו מקבל is-on (site.js): המספר מתמלא בצבע הראשי
   עם טבעת זהב רכה, והקו שאחריו מתמלא מזהב לצבע הראשי. המצב הכבוי – רק כל עוד html.nl-reveal, כמו ההתיישבות של ניסיון 2: בלי JavaScript, בלי תנועה
   ובהדפסה – כל השלבים דולקים. הסיכה מהלוגו – על השלב האחרון, בצבעים של הסיכה בלוגו.
   הצבעים – רק ממשתנים (‎--accent, ‎--accent-hover, ‎--accent-ink, ‎--glow, ‎--gold, ‎--logo-pin-*), כדי שמעבר לצבע אחר יהיה במקום אחד */
:root { --gold: #ffc53d; --gold-ring: rgba(255, 197, 61, .3); --sky-chip: #eff7ff; --sky-chip-line: #d4e5fb; --sky-chip-ink: #485364; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gold: #ffd36e; --gold-ring: rgba(255, 211, 110, .22); --sky-chip: #1a1638; --sky-chip-line: #2e2858; --sky-chip-ink: #d6d0f5; }
}
:root[data-theme="dark"] { --gold: #ffd36e; --gold-ring: rgba(255, 211, 110, .22); --sky-chip: #1a1638; --sky-chip-line: #2e2858; --sky-chip-ink: #d6d0f5; }
html:root[data-a11y-contrast] { --gold: #ffe600; --gold-ring: transparent; --sky-chip: #000000; --sky-chip-line: #ffffff; --sky-chip-ink: #ffffff; }
.tl { margin: 0; padding: 0; max-width: 46rem; list-style: none; }
.tl-step { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 22px; padding-bottom: 34px; }
.tl-step:last-child { padding-bottom: 0; }
/* הקו – אפור, ומעליו הקו הצבעוני שמתמלא מלמעלה למטה */
.tl-step::before, .tl-step::after { content: ""; position: absolute; inset-inline-start: 29px; top: 68px; bottom: 6px; width: 2px; border-radius: 2px; }
.tl-step::before { background: var(--line-strong); }
.tl-step::after { background: linear-gradient(to bottom, var(--gold), var(--accent)); transform-origin: 50% 0;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) .15s; }
.tl-step:last-child::before, .tl-step:last-child::after { display: none; }
.tl-num { position: relative; z-index: 1; isolation: isolate; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  direction: ltr; font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--accent-ink);
  background: var(--accent); border: 1.5px solid transparent;
  box-shadow: 0 0 0 5px var(--gold-ring), 0 10px 26px var(--glow);
  transition: color .45s ease, background-color .45s ease, border-color .45s ease, box-shadow .45s ease; }
.tl-num::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit;
  background: linear-gradient(150deg, var(--accent), var(--accent-hover)); transition: opacity .45s ease; }
.tl-body { display: flex; flex-direction: column; align-items: flex-start; padding-top: .3em; }
.tl-tag { order: -1; margin-bottom: .45em; padding: .15em .8em; border-radius: 999px; font-size: .8rem; font-weight: 700; line-height: 1.6;
  color: var(--sky-chip-ink); background: var(--sky-chip); border: 1px solid var(--sky-chip-line); }
.tl-step h3 { margin: 0 0 .3em; font-size: 1.15rem; }
.tl-step p { margin: 0; color: var(--muted); max-width: 60ch; text-wrap: pretty; }
/* הנחיתה – הסיכה מהלוגו מעל המספר של השלב האחרון */
.tl-step:last-child .tl-num::after { content: ""; position: absolute; top: -31px; left: calc(50% - 10px); width: 20px; height: 31px; pointer-events: none;
  background: linear-gradient(to bottom, var(--logo-pin-1), var(--logo-pin-2) 55%, var(--logo-pin-3));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 47 32 50'%3E%3Cpath d='M0 96L-13.03 69.37A14.5 14.5 0 1 1 13.03 69.37ZM5.66 63a5.66 5.66 0 1 0-11.31 0a5.66 5.66 0 1 0 11.31 0Z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-16 47 32 50'%3E%3Cpath d='M0 96L-13.03 69.37A14.5 14.5 0 1 1 13.03 69.37ZM5.66 63a5.66 5.66 0 1 0-11.31 0a5.66 5.66 0 1 0 11.31 0Z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1) .35s, opacity .45s cubic-bezier(.2, .7, .2, 1) .35s; }
html[data-a11y-contrast] .tl-step:last-child .tl-num::after { display: none; }
html[data-a11y-contrast] .tl-num { box-shadow: none; border-color: #ffffff; }
@media (max-width: 560px) {
  .tl-step { grid-template-columns: 50px minmax(0, 1fr); gap: 16px; }
  .tl-step::before, .tl-step::after { inset-inline-start: 24px; top: 58px; }
  .tl-num { width: 50px; height: 50px; border-radius: 15px; font-size: .92rem; }
}
/* כבוי – עד שגוללים אליו (רק עם JavaScript, כשמותר לזוז, ועל המסך) */
@media screen and (prefers-reduced-motion: no-preference) {
  html.nl-reveal:not([data-a11y-still]) .tl-step:not(.is-on) .tl-num { color: var(--muted); background-color: var(--surface); border-color: var(--line-strong); box-shadow: none; }
  html.nl-reveal:not([data-a11y-still]) .tl-step:not(.is-on) .tl-num::before { opacity: 0; }
  html.nl-reveal:not([data-a11y-still]) .tl-step:not(.is-on)::after { transform: scaleY(0); }
  html.nl-reveal:not([data-a11y-still]) .tl-step:not(.is-on) .tl-num::after { opacity: 0; transform: translateY(-10px); }
}

/* ---------- ניסיון 86 – הכול בכחול (נתי, 1.11.2026: "4 מעולה הכל כחול! בוא נלך על הכיוון הזה") ----------
   הצבע הראשי – כחול ‎#0669cc (הכפתורים, הקישורים, הציר, כפתור הנגישות), והטיל, כוכב הלכת והבית – בכחולים. הזהב של הסיכה והתכלת של ניסיון 82 נשארים.
   כל מה שהיה סגול – כאן, במשתנים: גם הקו המצויר בכותרות, המסלולים בציור, הצל של כרטיס שעומדים עליו והאדמה של הבית.
   בכהה – רק הגוון מתחלף לכחול (הצבע הראשי, הלוגו, כוכב הלכת והבית); העיצוב המלא של הכהה – ניסיון אחר. ניגודיות גבוהה – בלי שינוי */
:root {
  --accent: #0669cc;
  --accent-hover: #0558aa;
  --accent-ink: #ffffff;
  --accent-soft-ink: #0b3a75;
  --glow: rgba(6, 105, 204, .22);
  --logo-fin: #0669cc; --logo-body: #109fff; --logo-shade: #0a7fe0; --logo-nose: #0669cc; --logo-ring: #0669cc; --logo-web: #0669cc;
  --planet-hi: #dcefff; --planet-mid: #3aa6ff; --planet-lo: #0a4ea3; --moon-lo: #a0d2ff;
  --orbit: rgba(6, 105, 204, .35); --ring: rgba(6, 105, 204, .5); --nebula-a: rgba(16, 159, 255, .2);
  --star: rgba(6, 105, 204, .42); --star-art: rgba(6, 105, 204, .55); --art-orbit: rgba(6, 105, 204, .55);
  --scribble: rgba(16, 159, 255, .3);
  --house-roof: #0a4ea3; --house-roof-side: #083d80; --house-door: #109fff; --house-side: #e3eefb; --win-frame: #0a4ea3; --win-off: #dce9f8;
  --ground-1: #e6f2ff; --ground-2: #a0d2ff; --ground-3: #3aa6ff;
  --shadow-lift: 0 6px 16px rgba(10, 78, 163, .08), 0 38px 72px rgba(6, 105, 204, .16);
  --tw-glow: rgba(6, 105, 204, .35); --glint-c: #0669cc; --glint-glow: rgba(6, 105, 204, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #5cb3ff; --accent-hover: #8cc8ff; --accent-ink: #04213f; --accent-soft: #10233f; --accent-soft-ink: #d6ebff;
    --glow: rgba(92, 179, 255, .26); --nebula-a: rgba(16, 120, 230, .32);
    --sky: radial-gradient(120% 60% at 50% -18%, rgba(10, 60, 140, .55), transparent 62%);
    --orbit: rgba(160, 210, 255, .32); --ring: rgba(160, 210, 255, .7);
    --planet-hi: #bfe2ff; --planet-mid: #1c86e8; --planet-lo: #061a3d; --moon-hi: #e8f3ff; --moon-lo: #5b7fae;
    --logo-fin: #1c86e8; --logo-body: #5cb3ff; --logo-shade: #3a9cf2; --logo-nose: #0669cc; --logo-ring: #08264f; --logo-web: #5cb3ff;
    --scribble: rgba(92, 179, 255, .42);
    --house-wall: #22385f; --house-side: #1a2c4f; --house-roof: #0d1c3b; --house-roof-side: #09152d; --house-door: #2f63b0; --win-frame: #09152d; --win-off: #12223f;
    --ground-1: #3f86e0; --ground-2: #10305e; --ground-3: #07132b;
    --sky-chip: #0f2240; --sky-chip-line: #1f3a63; --sky-chip-ink: #d6ebff;
  }
}
:root[data-theme="dark"] {
  --accent: #5cb3ff; --accent-hover: #8cc8ff; --accent-ink: #04213f; --accent-soft: #10233f; --accent-soft-ink: #d6ebff;
  --glow: rgba(92, 179, 255, .26); --nebula-a: rgba(16, 120, 230, .32);
  --sky: radial-gradient(120% 60% at 50% -18%, rgba(10, 60, 140, .55), transparent 62%);
  --orbit: rgba(160, 210, 255, .32); --ring: rgba(160, 210, 255, .7);
  --planet-hi: #bfe2ff; --planet-mid: #1c86e8; --planet-lo: #061a3d; --moon-hi: #e8f3ff; --moon-lo: #5b7fae;
  --logo-fin: #1c86e8; --logo-body: #5cb3ff; --logo-shade: #3a9cf2; --logo-nose: #0669cc; --logo-ring: #08264f; --logo-web: #5cb3ff;
  --scribble: rgba(92, 179, 255, .42);
  --house-wall: #22385f; --house-side: #1a2c4f; --house-roof: #0d1c3b; --house-roof-side: #09152d; --house-door: #2f63b0; --win-frame: #09152d; --win-off: #12223f;
  --ground-1: #3f86e0; --ground-2: #10305e; --ground-3: #07132b;
  --sky-chip: #0f2240; --sky-chip-line: #1f3a63; --sky-chip-ink: #d6ebff;
}

/* ---------- ניסיון 87 – הטיל הכחול בתלת-ממד בלוגו (נתי, 1.11.2026: "תשים אותו במקום הטיל שיש היום") ----------
   תמונה לבהיר ותמונה לכהה (63 על 132, שקופות, עם הסיכה הצהובה), באותו גובה כמו הטיל שהיה (‎.logo-rocket). בניגודיות גבוהה – הגרסה לרקע כהה */
.logo-3d-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-3d-light { display: none; }
  :root:not([data-theme="light"]) .logo-3d-dark { display: block; }
}
:root[data-theme="dark"] .logo-3d-light { display: none; }
:root[data-theme="dark"] .logo-3d-dark { display: block; }
html[data-a11y-contrast] .logo-3d-light { display: none; }
html[data-a11y-contrast] .logo-3d-dark { display: block; }

/* ---------- ניסיון 88 – בלי הקו המקווקו של המסלול בציור הפתיחה (נתי, 1.11.2026: "תוריד את הקו המקווקו של המסלול שהמטאור יסתובב כמו שהוא
   עכשיו רק ללא הקו") ----------
   רק הקו נעלם: הלוויין והשובל נעים באותו מסלול ובאותה מהירות (ל-animateMotion יש path משלו), והחצי האחורי עדיין נעלם מאחורי הכוכב.
   בציור של הטלפון אין קו כזה; סמלי המסלולים ושאר הציורים – בלי שינוי */
.art-home .orbit { display: none; }

/* ---------- ניסיון 89 – דף נחיתה או אתר קטן: מתג מעל המסלולים (נתי, 1.11.2026: "גם מתג בדף הבית") ----------
   שני כפתורים (aria-pressed) בקפסולה בתכלת; הנבחר – בצבע הראשי. המתג משנה את data-product של ‎.tracks-area, וה-CSS מציג את הגרסה
   של המוצר – מחיר הבנייה, "הדף"/"האתר" והזמן (nl_v ב-parts.php). בלי JavaScript – בלי מתג: דף נחיתה, ושורה על האתר הקטן */
.v-site { display: none; }
.tracks-area[data-product="site"] .v-lp { display: none; }
.tracks-area[data-product="site"] .v-site { display: inline; }
.product-switch { display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 34px; padding: 6px; border-radius: 999px;
  background: var(--sky-chip); border: 1px solid var(--sky-chip-line); }
.ps-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 9.5em; min-height: 54px;
  padding: .4em 1.4em; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; line-height: 1.3;
  cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.ps-sub { font-size: .78rem; font-weight: 500; color: var(--muted); }
.ps-btn:hover:not([aria-pressed="true"]) { background: var(--surface); }
.ps-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px var(--glow); }
.ps-btn[aria-pressed="true"] .ps-sub { color: var(--accent-ink); }
.ps-nojs { margin: -10px auto 26px; text-align: center; font-weight: 700; color: var(--muted); }
html:not(.js) .product-switch, .js .ps-nojs { display: none; }
/* בטלפון, ובטקסט גדול מכפתור הנגישות – הכפתורים מתכווצים לרוחב המסך, בלי גלילה הצידה */
.ps-btn { min-width: min(9.5em, calc(50vw - 30px)); }
@media (max-width: 380px) { .ps-btn { padding-inline: 1em; } }
html[data-a11y-contrast] .product-switch { border-width: 2px; }

/* ---------- ניסיון 90 – עמוד השירותים: שני כרטיסי המוצר (נתי, 1.11.2026: "...באותם וויזואלי, יפה ומרשים ומזמין") ----------
   באותה שפה של כרטיסי המסלולים: לבן עם מסגרת דקה, המחיר הגדול בצבע הראשי, הזמן בתגית תכלת, "מה מקבלים" בתיבה הרכה, ולמי זה מתאים –
   במקווקו. נגיעות זהב – הטבעת סביב הסמל והקו של השדרוג. מתחת לשניהם – "ובשניהם" בתיבה רכה רחבה */
.products { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } }
.product-card { display: flex; flex-direction: column; padding: 30px 26px 26px; border-radius: 28px; text-align: center;
  background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.pc-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 5px var(--gold-ring); }
.pc-icon .icon { width: 30px; height: 30px; }
.product-card h3 { margin: 0; font-size: 1.45rem; }
.pc-pages { margin: .15em 0 .7em; color: var(--muted); font-weight: 600; }
.pc-price { margin: 0 0 .7em; line-height: 1.15; }
.pc-price .tp-amount { font-size: 2.5rem; color: var(--accent); }
.pc-time { align-self: center; margin: 0 0 1em; padding: .2em .95em; border-radius: 999px; font-size: .86rem; font-weight: 700;
  color: var(--sky-chip-ink); background: var(--sky-chip); border: 1px solid var(--sky-chip-line); }
.pc-what { max-width: 34em; margin: 0 auto 1.2em; color: var(--muted); }
.pc-list, .product-card .track-who { text-align: start; }
.pc-upgrade { margin: 0 0 18px; padding: 10px 14px; border-radius: 14px; text-align: start; font-size: .94rem;
  background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); }
.pc-go { margin-top: auto; }
.pc-both { max-width: 64rem; margin: 30px auto 0; padding: 0 18px; border-radius: 22px; background: var(--soft-box); border: 1px solid var(--line); }
.pc-both .track-label { margin: 0; padding: 16px 0 10px; border: 0; }
.pc-both-list { display: grid; gap: 8px 26px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 0; padding: 0 0 16px; }
.pc-unsure { margin: 18px 0 0; text-align: center; color: var(--muted); }
html[data-a11y-contrast] .product-card, html[data-a11y-contrast] .pc-both { border-width: 2px; }

/* ---------- ניסיון 91 – "הכול אצלנו": קוביות לפני המסלולים (נתי, 1.11.2026) ----------
   כל מה שאנחנו עושים – סמל, כותרת ושורה, בלי מחירים. במחשב חמש בשורה, בטאבלט שלוש, בטלפון שתיים. הסמל בעיגול תכלת עם טבעת זהב */
.all-head { margin-inline: auto; text-align: center; }
.all-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1100px) { .all-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.all-item { padding: 20px 16px 18px; border-radius: 20px; text-align: center; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
.all-item:hover { border-color: var(--line-strong); }
.all-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
  color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--gold-ring); }
.all-icon .icon { width: 26px; height: 26px; }
.all-item h3 { margin: 0 0 .3em; font-size: 1.02rem; }
.all-item p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 380px) { .all-item { padding-inline: 10px; } }
html[data-a11y-contrast] .all-item { border-width: 2px; }

/* ---------- ניסיון 92 – "כבר יש לכם אתר?" – רצועה בעמוד השירותים ובדף הבית (נתי, 1.11.2026) ----------
   תיבה רחבה בתכלת עדין: סמל, כותרת ושורה (ובעמוד השירותים – המחירים), והכפתורים – במחשב בצד, בטלפון מתחת. נגיעת זהב – הטבעת של הסמל */
.have-box { display: grid; gap: 18px 24px; align-items: center; padding: clamp(22px, 3.5vw, 34px); border-radius: 26px;
  background: var(--soft-box); border: 1px solid var(--line); }
@media (min-width: 900px) { .have-box { grid-template-columns: auto minmax(0, 1fr) auto; } }
.have-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 5px var(--gold-ring); }
.have-icon .icon { width: 30px; height: 30px; }
.have-text h2 { margin: 0 0 .3em; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.have-text p { margin: 0; color: var(--muted); max-width: 44em; }
.have-text .have-price { margin-top: .6em; color: var(--ink); }
.have-actions { gap: 10px; }
.have-actions .btn .icon { width: 20px; height: 20px; }
html[data-a11y-contrast] .have-box { border-width: 2px; background: #000000; }

/* ---------- ניסיון 93 – "אפשר להוסיף": תוספות עם מחיר (נתי, 1.11.2026) ----------
   בעמוד השירותים – כרטיס לכל תוספת: הסמל (כמו בקוביות), שם, שורה, והמחיר בתגית תכלת; בדף הבית – שורה וקישור לעמוד השירותים */
.extras { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.extra { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.extra .all-icon { flex: none; margin: 0; }
.extra-text h3 { margin: 0 0 .25em; font-size: 1.06rem; }
.extra-text p { margin: 0; color: var(--muted); font-size: .94rem; }
.extra-text .extra-price { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: .7em; color: var(--ink); }
.extra-price strong { padding: .1em .8em; border-radius: 999px; font-size: .92rem; color: var(--accent-soft-ink); background: var(--accent-soft); border: 1px solid var(--sky-chip-line); }
.extra-price span { font-size: .86rem; color: var(--muted); }
.extras-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin: 26px 0 0; color: var(--muted); text-align: center; }
.extras-line > .icon { width: 18px; height: 18px; color: var(--gold); }
html[data-a11y-contrast] .extra { border-width: 2px; }

/* ---------- ניסיון 94 – לשונית הנגישות באמצע הצד הימני, ווואטסאפ ירוק בפינה השמאלית למטה (נתי, 1.11.2026: "שהכפתור נגישות יהיה באמצע
   המסך בצד ימין כשהוא חצי מעוגל לכיוון הדף וצד אחד קו צמוד לצד ימני, בפינה השמאלית למטה אני רוצה כפתור ירוק של וואטסאפ") ----------
   הלשונית צמודה לקצה הימני הפיזי (right, לא לוגי): הצד שפונה לדף – חצי עיגול, הצד השני ישר. רק הסמל, בצבע הראשי; החלון נפתח לידה.
   בניגודיות גבוהה – שחור וצהוב, כמו היום (מ-‎--accent). הוואטסאפ – ‎#1da550: אותו גוון כמו של וואטסאפ, כהה יותר, כדי לעמוד ב-3:1 מול
   הרקע הלבן ומול הסמל הלבן (‎#25D366 – ‏2:1). מופיע אחרי שגוללים מעבר לפתיחה (site.js), בכניסה רכה; בלי תנועה – בלי הכניסה */
.a11y { top: 50%; right: 0; bottom: auto; left: auto; inset-inline-end: auto; transform: translateY(-50%); }
html.has-cookie-bar .a11y { bottom: auto; }
.a11y-btn { width: 50px; height: 58px; padding: 0 0 0 4px; border-radius: 29px 0 0 29px; box-shadow: -4px 6px 22px var(--glow); }
.a11y-btn:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: -6px; border-radius: 29px 0 0 29px; }
.a11y-panel { top: 50%; right: calc(100% + 10px); bottom: auto; left: auto; inset-inline-end: auto; transform: translateY(-50%);
  max-height: calc(100vh - 24px); overflow-y: auto; }
:root { --wa: #1da550; --wa-hover: #178a43; }
.wa-float { position: fixed; z-index: 59; left: 16px; bottom: 16px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  color: #ffffff; background: var(--wa); box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1), visibility .35s, background-color .2s; }
.wa-float.is-on, html:not(.js) .wa-float { opacity: 1; visibility: visible; transform: none; }
.wa-float:hover { background: var(--wa-hover); }
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
html.has-cookie-bar .wa-float { bottom: calc(var(--bar-h, 0px) + 28px); }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; transform: none; } }
html[data-a11y-still] .wa-float { transition: none; transform: none; }
html[data-a11y-contrast] .wa-float { color: #ffe600; background: #000000; border: 2px solid #ffe600; box-shadow: none; }
@media print { .wa-float, .a11y { display: none; } }

/* ---------- ניסיון 95 – פוטר בעמודות (נתי, 1.11.2026) ----------
   במחשב ארבע עמודות: הלוגו ומשפט, "האתר", "דברו איתנו", "מידע"; מתחת – שורה עם ©. בטלפון – אחת מתחת לשנייה, כל קישור בשורה משלו
   בגובה 44. הרקע – ‎--bg-2 (בבהיר תכלת עדין, בכהה – לפי המשתנים), והקו העליון של היום נשאר. בתחתית מקום לכפתור הוואטסאפ */
.site-foot { padding: 46px 0 0; background: var(--bg-2); }
.foot-grid { display: grid; gap: 26px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; } }
.foot-about { max-width: 26em; margin: 12px 0 0; color: var(--muted); }
.foot-title { margin: 0 0 4px; font-weight: 800; color: var(--ink); }
.site-foot .foot-list { display: grid; gap: 0; }
.site-foot .foot-list a, .site-foot .foot-list .link-btn { display: flex; align-items: center; min-height: 44px; white-space: nowrap; }
.site-foot .foot-list a[dir="ltr"] { justify-content: flex-end; }
.foot-bottom { margin-top: 26px; padding-top: 16px; padding-bottom: 96px; border-top: 1px solid var(--line); }
.foot-bottom .copy { margin: 0; }
@media (max-width: 899.98px) { .foot-col + .foot-col { padding-top: 18px; border-top: 1px solid var(--line); } }
/* ניסיון 98 – בטלפון ובטאבלט הפוטר כולו באמצע (נתי, 1.11.2026: "צריך למרכז את כל הפוטר במובייל הכל כולל הכל"):
   הלוגו, המשפט, הכותרות, הקישורים, המייל וה-©. הקישורים נשארים לכל הרוחב – רק הטקסט באמצע */
@media (max-width: 899.98px) {
  .site-foot .foot-grid, .foot-bottom { text-align: center; }
  .foot-brand { display: flex; flex-direction: column; align-items: center; }
  .foot-about { margin-inline: auto; }
  .site-foot .foot-list a, .site-foot .foot-list a[dir="ltr"], .site-foot .foot-list .link-btn { justify-content: center; }
}

/* ---------- ניסיון 94 – הלשונית עוברת לשמאל (נתי, 1.11.2026: "תעביר את הכפתור של הנגישות לצד שמאל באמצע בדיוק כמו עכשיו רק בשמאל") ----------
   צמודה לקצה השמאלי הפיזי, באמצע הגובה: הצד שפונה לדף – חצי עיגול, הצד של הקצה – ישר. החלון נפתח מימין לה.
   הוואטסאפ נשאר בפינה השמאלית למטה – הלשונית באמצע הגובה, ושניהם בפיקסלים קבועים, כך שהם לא נוגעים גם בטקסט גדול */
.a11y { right: auto; left: 0; }
.a11y-btn { padding: 0 4px 0 0; border-radius: 0 29px 29px 0; box-shadow: 4px 6px 22px var(--glow); }
.a11y-btn:focus-visible { border-radius: 0 29px 29px 0; }
.a11y-panel { right: auto; left: calc(100% + 10px); }

/* ---------- ניסיון 90 – חמש קוביות ומעלה ב"בנינו את זה בשבילכם": שלוש בשורה, והשורה האחרונה באמצע ----------
   ברשת הרגילה החמישית נשארת לבד בשורה, בצד. מתחת ל-560 – אחת בשורה, כמו היום */
.cards-for:has(> .card:nth-child(5)) { display: flex; flex-wrap: wrap; justify-content: center; }
.cards-for:has(> .card:nth-child(5)) > .card { flex: 1 1 100%; }
@media (min-width: 560px) { .cards-for:has(> .card:nth-child(5)) > .card { flex: 0 1 calc((100% - 16px) / 2); } }
@media (min-width: 900px) { .cards-for:has(> .card:nth-child(5)) > .card { flex: 0 1 calc((100% - 32px) / 3); } }

/* ---------- ניסיון 93 – הלוגיקה הסופית: מנוהל עם דומיין שכבר שלכם – שורה קטנה מתחת למחיר; התוספות למי שכבר יש לו אתר – מתחת ל"כבר יש לכם אתר?" ---------- */
.tp-own { margin: 10px 0 0; font-size: .84rem; line-height: 1.45; color: var(--muted); text-align: center; }
.extras-have { margin-top: 18px; }
/* ארבע תוספות בכל חלק – שתיים בשורה, בלי אחת לבד בשורה האחרונה */
@media (min-width: 720px) { .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* מספר אי-זוגי – האחרונה לכל הרוחב (חמש תוספות למי שכבר יש לו אתר, מאז "דומיין בלבד") */
@media (min-width: 720px) { .extras > .extra:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ---------- ניסיון 97 – "מה מתאים לי?": השאלה הבאה נפתחת אחרי שעונים, לכל תשובה שורה קטנה מתחת, וכרטיס המלצה אחד ----------
   בלי JavaScript – השאלון מוצג לכולם, ובתוכו רשימה קצרה עם קישורים במקום הטופס */
.quiz { display: block; }
.quiz [hidden] { display: none !important; }
html:not(.js) .quiz-form, .js .quiz-nojs { display: none; }
.quiz-nojs { margin: 0; padding: 4px 22px 22px; }
.quiz-form fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 8px; }
/* ארבע תשובות – שתיים בשורה, בלי אחת לבד בשורה האחרונה */
.quiz-form fieldset:has(> label:nth-of-type(4)) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* חמש תשובות ב"מה יש לכם היום?" – האחרונה ("יש לי כבר אתר או דף") לכל הרוחב; ב"מה בונים?" כש"רק דומיין" מוסתר – שלוש בשורה */
.quiz-form fieldset:has(> label:nth-of-type(4)) > label:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
.quiz-form fieldset[data-q="build"]:has(> label[hidden]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.quiz-opt { align-items: flex-start; border-radius: 16px; padding: 11px 14px; }
.quiz-opt input { margin-top: 1px; }
.qo-text { display: grid; gap: 2px; }
.qo-sub { font-size: .86rem; font-weight: 500; color: var(--muted); }
.quiz-opt:has(input:checked) .qo-sub { color: inherit; }
.qo-tag { justify-self: start; margin-top: 5px; padding: .1em .75em; border-radius: 999px; font-size: .78rem; font-weight: 700;
  color: var(--chip-ok-ink); background: var(--chip-ok-bg); border: 1px solid var(--chip-ok-line); }
.quiz-pick { margin: 0 0 .2em; font-size: .92rem; font-weight: 700; }
.qr-name { margin: 0 0 .3em; font-size: 1.2rem; font-weight: 800; text-wrap: balance; }
.qr-price { margin: 0; }
.qr-price strong { font-size: 1.12rem; }
.qr-list { margin: .8em 0 0; }
.qr-note { margin: .7em 0 0; font-size: .92rem; }
.qr-actions { margin-top: 16px; }
.qs-wa { display: inline-flex; align-items: center; gap: 8px; }
.qs-wa .icon { width: 20px; height: 20px; }