/* חומה — בסיס: איפוס, גוף, טיפוגרפיה, נגישות, אנימציות כניסה ושכבת עזר לפריסה. */

html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}

* { box-sizing: border-box; border-color: var(--border); }

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  direction: rtl;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at 50% -4%, oklch(0.70 0.09 252 / 10%), transparent 34rem),
    radial-gradient(circle at 92% 10%, oklch(0.80 0.10 84 / 10%), transparent 24rem);
  background-attachment: fixed;
}

h1, h2, h3, h4 { margin: 0; text-wrap: balance; letter-spacing: 0; font-weight: 700; color: var(--foreground); line-height: 1.22; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--growth); text-decoration: none; }
a:hover { color: oklch(0.50 0.17 252); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 15px; color: var(--foreground); }
img { max-width: 100%; }
[hidden] { display: none !important; }
button, a, input, select, textarea { transition-duration: 300ms; }

/* ---------- נגישות: פוקוס ברור ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}
.skip-link {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -60px; z-index: 999; background: var(--navy); color: #fff;
  padding: 10px 20px; border-radius: 0 0 10px 10px; font-weight: 600; font-size: 14px;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- כדורי אור ברקע ---------- */
@keyframes orb-drift-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3vw,4vh,0) scale(1.12); } }
@keyframes orb-drift-b { 0%,100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(4vw,-5vh,0) scale(0.92); } }
@keyframes orb-drift-c { 0%,100% { transform: translate3d(0,0,0) scale(0.95); } 50% { transform: translate3d(-4vw,-3vh,0) scale(1.15); } }
.ambient-orb { position: fixed; border-radius: 9999px; filter: blur(90px); opacity: .22; pointer-events: none; will-change: transform; z-index: 0; }

/* ---------- אנימציות כניסה ---------- */
@keyframes reveal-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 1; }
/* ההסתרה חלה רק אחרי שה-JS הודיע שהוא חי ושהדפדפן תומך במעקב גלילה.
   בלי זה דף שבו המעקב לא נדלק היה נשאר ריק לגמרי. */
html.reveal-ready .reveal { opacity: 0; }
html.reveal-ready .reveal.is-visible { opacity: 1; }
/* מצב חירום: התוכן נראה, בלי אנימציה, בלי תנאים. */
html.reveal-force .reveal,
html.reveal-force .reveal.is-visible { opacity: 1 !important; animation: none !important; }
html.reveal-ready .reveal.is-visible { animation: reveal-up 700ms cubic-bezier(0.22,1,0.36,1) forwards; }
/* כבר הוצג לפני שהעמוד נבנה מחדש (observeReveal): מופיע מיד, בלי להיכנס שוב */
html.reveal-ready .reveal.is-visible.reveal-now { animation: none; opacity: 1; }

@keyframes slide-up-fade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up-fade { animation: slide-up-fade .4s ease-out forwards; }

/* ============================================================================
   נגישות — ת"י 5568 / WCAG 2.1 AA
   ========================================================================== */
.a11y-contrast body, .a11y-contrast body * {
  background-color: #000 !important; color: #ff0 !important;
  border-color: #ff0 !important; box-shadow: none !important;
}
.a11y-contrast img, .a11y-contrast svg { filter: grayscale(1) contrast(1.4) !important; }
/* גרפים (canvas) בצבעי כחול על שקוף נעלמים על שחור; הופכים אותם ללבן על שחור */
.a11y-contrast canvas { background-color: #fff !important; filter: grayscale(1) invert(1) contrast(1.6) !important; }
/* סליידרים: מסילה וידית בצהוב במקום כחול על שחור */
.a11y-contrast .savings-slider { background-image: none !important; background-color: #ff0 !important; }
.a11y-contrast .savings-slider::-webkit-slider-thumb { background: #ff0 !important; border-color: #000 !important; box-shadow: 0 0 0 2px #ff0 !important; }
.a11y-contrast .savings-slider::-moz-range-thumb { background: #ff0 !important; border-color: #000 !important; }
.a11y-contrast a, .a11y-contrast button { text-decoration: underline; }
/* המסננים על <html> ולא על <body>: מסנן על body הופך אותו למסגרת של כל אלמנט position:fixed,
   והכפתור והחלונות הצפים קופצים לתחתית העמוד במקום להישאר על המסך */
html.a11y-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-grayscale { filter: grayscale(1); }
html.a11y-invert.a11y-grayscale { filter: invert(1) hue-rotate(180deg) grayscale(1); }
.a11y-invert img, .a11y-invert video { filter: invert(1) hue-rotate(180deg); }
.a11y-dyslexic body, .a11y-dyslexic body * {
  font-family: "Tahoma","Verdana","Arial",sans-serif !important;
  letter-spacing: .015em !important; word-spacing: .08em !important;
}
.a11y-dyslexic p, .a11y-dyslexic li, .a11y-dyslexic dd { line-height: 1.85 !important; }
.a11y-links a, .a11y-links button, .a11y-links [role="button"] {
  outline: 2px solid currentColor !important; outline-offset: 2px; font-weight: 700 !important;
}
.a11y-links a { text-decoration: underline !important; }
.a11y-no-motion *, .a11y-no-motion *::before, .a11y-no-motion *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
/* רוב הגדלים באתר בפיקסלים, ולכן font-size על body לא משנה כלום; zoom מגדיל הכול כמו הגדלת תצוגה בדפדפן */
html.a11y-big { zoom: 1.2; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2740%27%20height%3D%2740%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M6%203v28l7-7%205%2012%205-2-5-12h10z%27%20fill%3D%27black%27%20stroke%3D%27white%27%20stroke-width%3D%272.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") 6 3, auto !important; }
html.a11y-cursor a, html.a11y-cursor button, html.a11y-cursor [role="button"], html.a11y-cursor label,
html.a11y-cursor select, html.a11y-cursor summary, html.a11y-cursor input[type="range"],
html.a11y-cursor input[type="checkbox"], html.a11y-cursor input[type="radio"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2740%27%20height%3D%2740%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M15%204c-2%200-3%201-3%203v14l-3-3c-2-2-5%200-3%203l8%2011c2%203%205%204%208%204h4c5%200%208-4%208-9V17c0-2-3-2-3%200v-3c0-2-3-2-3%200v-2c0-2-3-2-3%200V7c0-2-3-3-3-3z%27%20fill%3D%27white%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") 14 4, pointer !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; animation: none !important; }
  .ambient-orb { animation: none !important; }
  /* קרוסלת חברות הביטוח (D25) ממשיכה לזוז גם כאן; רק "עצירת אנימציות" בסרגל הנגישות עוצר אותה */
  .sheen::after { animation: none !important; }
}

/* ============================================================================
   שכבת עזר לפריסה
   ========================================================================== */
.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 84px 0; }
.sec-sm { padding: 52px 0; }
.col { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; }
.wrapf { flex-wrap: wrap; }
.between { justify-content: space-between; }
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.split { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }
.artgrid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 56px; align-items: start; }
.split > *, .artgrid > *, .g2 > *, .g3 > *, .g4 > * { min-width: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; color: var(--gold-deep);
}
.eyebrow::after {
  content: ""; width: 38px; height: 1.5px; border-radius: 2px; flex-shrink: 0;
  background: linear-gradient(to left, var(--gold), transparent);
}
.h-xl { font-size: clamp(31px, 4.8vw, 50px); }
.h-lg { font-size: clamp(25px, 3.4vw, 36px); }
.h-md { font-size: clamp(19px, 2.2vw, 24px); }
.lead { font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.75; color: var(--muted-foreground); }
.muted { color: var(--muted-foreground); }
.sm { font-size: 14px; }
.xs { font-size: 12.5px; }
@media (max-width: 520px) { .hide-sm { display: none !important; } }

/* הכפתורים הצפים יושבים מעל התוכן. מרווח קבוע בתחתית הדף
   מבטיח שהם לעולם לא מכסים טקסט או כפתור. */
#main { padding-bottom: 84px; }
@media (max-width: 560px) { #main { padding-bottom: 96px; } }

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  .artgrid { grid-template-columns: 1fr; gap: 40px; }
  .artgrid aside { position: static !important; }
  .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .sec { padding: 56px 0; }
  .sec-sm { padding: 40px 0; }
  .wrap { padding: 0 18px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .ambient-orb { display: none; }
}