/* ============================================================
   נעמה זנו שדות — דף נחיתה
   ============================================================ */

:root{
  --bg:            #0B0712;
  --ink:           #EFEAF6;
  --ink-soft:      #CEC4E0;
  --ink-mute:      #A79BC0;   /* הובהר — הטקסט הקטן היה נבלע במסכים לא-בהירים */
  --hair:          rgba(196,185,214,.14);

  --violet:        #8E63FF;
  --violet-soft:   #B98CFF;
  --gold:          #E6BE79;
  --gold-soft:     #F4DCA6;
  --accent-grad:   linear-gradient(105deg, var(--violet) 0%, var(--violet-soft) 42%, var(--gold) 88%);

  --line-col-w:    clamp(88px, 24vw, 280px);
  --text-col:      780px;    /* בפיקסלים בכוונה — כדי שהגדלת הטיפוגרפיה לא תשנה את הפריסה */
  --page-pad:      clamp(20px, 4vw, 72px);
  --maxw:          1320px;
  --block:         calc(var(--text-col) + var(--line-col-w) + 2 * var(--page-pad));

  --f-display: "Suez One", "Arial Hebrew", serif;
  --f-body:    "IBM Plex Sans Hebrew", "Segoe UI", sans-serif;
}

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

/* גודל הבסיס לכל הדף. כל שאר המידות ב-rem, ולכן שינוי כאן מגדיל הכול יחד.
   כמשתנה — כדי שווידג'ט הנגישות יוכל להכפיל אותו בלי לדרוס את גודל המובייל. */
:root{ --base-font:clamp(17px, 1.32vw, 20px); }
@media (max-width:760px){ :root{ --base-font:15.5px; } }
html{
  font-size:var(--base-font);
  scroll-behavior:smooth;
  overflow-x:clip;                 /* ה-drift מזיז את התוכן, ובלי זה נוצרת גלילה אופקית */
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1rem;
  font-weight:300;
  line-height:1.72;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

/* Suez One קיים במשקל 400 בלבד — לא לבקש משקלים אחרים */
h1,h2,h3{ font-family:var(--f-display); font-weight:400; line-height:1.24; margin:0; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.grad{
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ─────────── רקע אחיד אחד לכל הדף ─────────── */
/* overflow פתוח — הכתמים נוסעים הרחק מחוץ למסך וחוזרים; ה-clip על body מונע גלילה אופקית */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-glow{ position:absolute; border-radius:50%; filter:blur(90px); }
.bg-glow-a{
  top:-18vh; right:-10vw; width:70vw; height:70vw;
  background:radial-gradient(circle, rgba(112,62,214,.34) 0%, rgba(112,62,214,0) 68%);
}
.bg-glow-b{
  top:38vh; left:-22vw; width:78vw; height:78vw;
  background:radial-gradient(circle, rgba(72,44,140,.30) 0%, rgba(72,44,140,0) 68%);
}
.bg-glow-c{
  bottom:-25vh; right:8vw; width:62vw; height:62vw;
  background:radial-gradient(circle, rgba(190,140,70,.14) 0%, rgba(190,140,70,0) 70%);
}
.bg-grain{
  position:absolute; inset:0;
  opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

main{ position:relative; z-index:1; will-change:transform; }

/* ─────────── סרגל עליון ─────────── */
/* הבר מפוצל לשתי שכבות: הזכוכית (בלור) מתחת לקו, והטקסט מעליו —
   כך הקו תמיד מאחורי הכיתובים, אבל הבלור לא מורח אותו */
.topbar-bg{
  position:fixed; inset:0 0 auto 0; z-index:20;
  height:66px;                      /* מתעדכן ב-JS לגובה הבר בפועל */
  background:transparent;
  transition:background .35s ease, backdrop-filter .35s ease;
}
.topbar-bg.is-solid{
  background:rgba(24,16,38,.28);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
}
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  padding-block:18px;
  background:transparent;
  transition:padding .35s ease;
}
.topbar.is-solid{ padding-block:12px; }
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:min(var(--maxw), var(--block));
  margin-inline:auto;
  padding-inline:var(--page-pad);
}
.topbar-name{ font-family:var(--f-display); font-size:1.05rem; letter-spacing:.02em; }
.topbar-nav{ display:flex; align-items:center; gap:clamp(18px,2.6vw,34px); font-size:.95rem; color:var(--ink-soft); }
.topbar-nav a{ transition:color .2s; }
.topbar-nav a:hover{ color:var(--gold-soft); }

/* ─────────── פריסה משותפת: טקסט | מרזב הקו ─────────── */
.hero,.journey,.work,.clients,.contact,.footer,.quote{
  display:grid;
  grid-template-columns:minmax(0,var(--text-col)) var(--line-col-w);
  justify-content:center;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--page-pad);
  will-change:transform;
}
.col{ grid-column:1; min-width:0; }
.gutter{ grid-column:2; position:relative; }

/* ─────────── הקו — שכבה אחת רציפה מעל כל הדף ─────────── */
.spine{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  /* הקו מתחיל מתחת לבר העליון — ראשו נחתך בגובה הבר (מסונכרן ב-JS) */
  clip-path:inset(var(--barh, 66px) 0 0 0);
}
.spine-inner{
  height:100%;
  max-width:min(var(--maxw), var(--block));
  margin-inline:auto;
  padding-inline:var(--page-pad);
  display:grid;
  grid-template-columns:minmax(0,var(--text-col)) var(--line-col-w);
  justify-content:center;
}
.spine-col{ grid-column:2; position:relative; height:100%; }   /* הקו בעמודה שלו — לא מעל הטקסט */
.spine-col svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

.pen{
  position:absolute; top:0; left:0;
  width:9px; height:9px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--gold-soft);
  box-shadow:0 0 14px 3px rgba(230,190,121,.55), 0 0 34px 10px rgba(142,99,255,.28);
  opacity:0; transition:opacity .4s;
}
.pen.is-on{ opacity:1; }

/* ─────────── 1. HERO ─────────── */
.hero{ min-height:100svh; align-items:center; padding-block:120px 60px; }
.hero-text{ grid-column:1; max-width:min(100%, 840px); }
.eyebrow{ font-size:.82rem; letter-spacing:.34em; color:var(--ink-mute); margin-bottom:26px; }
.hero h1{ font-size:clamp(2.1rem,4.4vw,3.6rem); letter-spacing:-.01em; }
.hero-sub{
  font-family:var(--f-display);
  font-size:clamp(1.1rem,1.9vw,1.6rem);
  color:var(--ink-soft);
  margin-top:14px;
}
/* ההצעה בשבע מילים — כדי שהסורק המהיר יידע תוך שניות מה מקבלים */
.hero-offer{
  margin-top:26px;
  font-size:clamp(.92rem,1.25vw,1.05rem);
  color:var(--ink-soft);
  max-width:44ch;
}
.hero-offer span:not(.nowrap){ color:var(--gold); padding-inline:6px; }
.nowrap{ white-space:nowrap; }
.tagline{
  font-family:var(--f-display);
  font-size:clamp(1rem,1.5vw,1.25rem);
  color:var(--gold-soft);
  margin-top:38px;
}
.uni{ display:inline-block; }
/* ספציפיות כפולה בכוונה — כלל ה-.btn הכללי מגדיר margin-top:8px ודורס אחרת */
.hero-text .hero-cta{ margin-top:56px; }
.hero{ position:relative; }
.line-caption{
  /* מעוגן לקו עצמו: מרכז הבלוק פחות חצי מרוחב העמודות, ועוד 55% מעמודת הקו */
  position:absolute; top:38%;
  left:calc(50% - (var(--text-col) + var(--line-col-w)) / 2 + var(--line-col-w) * .55 + 12px);
  font-size:.72rem; letter-spacing:.24em; color:var(--ink-mute);
  white-space:nowrap;
}

/* ─────────── 2. המסע ─────────── */
.journey{
  /* חמש שורות שוות בגובהן — כל beat יושב בדיוק מול קטע הקו שמתאר אותו.
     הגובה מהודק בכוונה: הסיפור שלם, אבל הדרך אל "מה אני עושה" קצרה יותר */
  --row:max(290px, 36vh);
  grid-template-rows:repeat(5, var(--row));
  padding-block:0;
}
.beat{
  grid-column:1;
  align-self:center;
  padding-inline-end:clamp(12px,3vw,40px);
  opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
}
.beat.is-in{ opacity:1; transform:none; }

/* יציאת טקסט: בלוק שנגלל החוצה למעלה נמוג (מוצמד ב-JS) */
.hero-text,.work-claim,.work-body,.work-hint,.quote blockquote,.inline-quote,
.clients .section-kicker,.clients h2,.story p,.clients-note,.logos,.contact-copy,.form{
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
/* כניסת טקסט: ה-JS מסמן את הבלוקים כ-fx, והם עולים ומופיעים כמו שלבי המסע */
.fx{ opacity:0; transform:translateY(26px); }
.fx.is-in{ opacity:1; transform:none; }
/* יציאה עדינה בלבד — דהייה עם עלייה קלה; התנועה האופקית עברה למיקומי הטקסט עצמם */
.is-out{ opacity:0 !important; transform:translateY(-16px) !important; }
.beat h2{ font-size:clamp(1.6rem,3vw,2.5rem); }
.beat h2 em{ font-style:normal; background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.beat p{ color:var(--ink-soft); margin-top:18px; }
/* הדגשות בגוף הסיפור — בולטות באמת: משקל כבד וגרדיאנט, כמו בכותרות */
.beat p em{
  font-style:normal; font-weight:600;
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─────────── כותרות קטעים ─────────── */
.section-kicker{
  display:block;
  font-size:.82rem; letter-spacing:.3em; color:var(--ink-mute);
  margin-bottom:16px;
}

/* ─────────── 3. מה אני עושה ─────────── */
.work{ padding-block:clamp(60px,8vw,110px); }
.work-claim{ font-size:clamp(1.75rem,3.2vw,2.7rem); line-height:1.25; }
.work-body{ color:var(--ink-soft); margin-top:26px; max-width:58ch; }
.work-hint{
  margin-top:clamp(40px,6vw,70px);
  font-family:var(--f-display);
  font-size:clamp(1.05rem,1.7vw,1.3rem);
  color:var(--ink-mute);
  border-inline-start:1px solid rgba(230,190,121,.35);
  padding-inline-start:20px;
  max-width:44ch;
}

/* ─────────── המלצות שזורות — נראות אחרת מהטקסט הרגיל ─────────── */
.quote{ padding-block:clamp(22px,3vw,40px); }
.quote blockquote,.inline-quote{
  position:relative;
  margin:0;
  max-width:56ch;
  background:linear-gradient(135deg, rgba(142,99,255,.09), rgba(230,190,121,.05));
  border:1px solid rgba(185,140,255,.16);
  border-radius:18px;
  padding:clamp(26px,3vw,38px) clamp(24px,3vw,40px);
  padding-block-start:clamp(40px,4.6vw,54px);
}
.inline-quote{ margin-block:clamp(30px,4vw,52px); }
/* סימן הציטוט הגדול — הופך את הבלוק למובן מיד כהמלצה */
.quote blockquote::before,.inline-quote::before{
  content:"״";
  position:absolute; top:6px; inset-inline-start:clamp(20px,2.6vw,34px);
  font-family:var(--f-display);
  font-size:4.2rem; line-height:1;
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.quote blockquote p,.inline-quote p{
  font-size:clamp(1.05rem,1.5vw,1.25rem);
  font-weight:400;
  line-height:1.75;
  color:var(--ink);
}
.quote blockquote footer,.inline-quote footer{
  margin-top:16px;
  font-size:.95rem;
  color:var(--gold-soft);
}

/* ─────────── 4. לקוחות ועבודות ─────────── */
.clients{ padding-block:clamp(40px,6vw,80px); }
.clients h2{ font-size:clamp(1.9rem,3.6vw,3rem); }

.logos{
  margin-top:clamp(34px,4vw,52px);
  overflow:hidden;
  padding-block:18px;
  -webkit-mask-image:linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
}
.logos-track{ display:flex; width:max-content; animation:marquee 38s linear infinite; }
.logos:hover .logos-track{ animation-play-state:paused; }
.logos-row{ display:flex; align-items:center; }
/* לוגואים על רקע שקוף — בלי אריחים */
.logos-row li{
  display:grid; place-items:center;
  width:158px; height:58px;
  margin-inline:clamp(14px,2vw,30px);
  opacity:.88;
  transition:opacity .3s;
}
.logos-row li:hover{ opacity:1; }
.logos-row img{
  display:block; width:100%; height:100%;
  min-width:0; min-height:0;         /* בלי זה גודל המינימום של תמונה בגריד הוא הגודל המקורי שלה */
  object-fit:contain;
}
/* לוגואים כהים שלא עוברים נגישות על רקע כהה — מולבנים */
.logos-row li.logo-white img{ filter:brightness(0) invert(.96); }

/* אם קובץ לוגו חסר — מוצג השם כטקסט במקום ריבוע שבור */
.logos-row li.is-text{
  width:auto; height:auto; opacity:.72;
  font-family:var(--f-display);
  font-size:clamp(.95rem,1.35vw,1.15rem);
  color:var(--ink-soft); white-space:nowrap;
  padding-inline:clamp(18px,2.4vw,34px);
}
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

.story{ margin-top:clamp(34px,4.5vw,56px); display:flex; flex-direction:column; gap:clamp(22px,2.6vw,34px); }
.story p{ color:var(--ink-soft); }
.story strong{ color:var(--ink); font-weight:600; }
.clients-note{ margin-top:30px; font-size:.85rem; color:var(--ink-mute); max-width:56ch; }

/* ─────────── 5. יצירת קשר ─────────── */
.contact{ padding-block:clamp(50px,7vw,100px); }
.contact .col{ grid-column:1 / -1; }   /* יצירת הקשר פרוסה על כל רוחב הדף — הטופס צריך אוויר */
.contact-grid{
  display:grid;
  grid-template-areas:"form copy";     /* בגריד RTL העמודה הראשונה היא הימנית — הטופס יושב מימין */
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,80px);
  align-items:start;
  border-top:1px solid var(--hair);
  padding-top:clamp(40px,5vw,64px);
}
.contact-copy{ grid-area:copy; }
.contact .form{ grid-area:form; }
@media (max-width:880px){
  .contact-grid{ grid-template-areas:"copy" "form"; grid-template-columns:1fr; }
}
.contact h2{ font-size:clamp(2rem,3.8vw,3.1rem); }
.contact-q{
  font-family:var(--f-display);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.5;
  margin-top:18px;
}
.contact-p{ color:var(--ink-soft); margin-top:18px; max-width:34ch; }
.contact-solo{
  margin-top:20px; max-width:36ch;
  font-size:1rem; color:var(--ink-soft);
  border-inline-start:1px solid rgba(230,190,121,.35);
  padding-inline-start:16px;
}

/* אייקונים — קו מתאר בלבד, ממורכזים מתחת לטופס במרווחים שווים */
.social{
  display:flex; justify-content:space-evenly; align-items:center;
  width:min(100%, 520px);
  margin:clamp(36px,5vw,56px) auto 0;
}
.social a{
  display:grid; place-items:center;
  color:var(--ink);
  transition:color .25s, transform .25s;
}
.social a:hover{ color:var(--gold-soft); transform:translateY(-2px); }
.social svg{
  width:30px; height:30px;
  fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}

/* ─────────── טופס ─────────── */
.form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:.92rem; letter-spacing:.1em; color:var(--ink-soft); }
.field input,.field textarea{
  font-family:inherit; font-size:1rem; color:var(--ink);
  background:rgba(255,255,255,.028);
  border:1px solid var(--hair);
  border-radius:10px;
  padding:12px 14px;
  transition:border-color .2s, background .2s;
  resize:vertical;
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:rgba(185,140,255,.6); background:rgba(255,255,255,.05);
}
.field.has-error input,.field.has-error textarea{ border-color:#E08A8A; }

.btn{
  display:inline-block;              /* <a> הוא inline — בלי זה ה-margin העליון לא נתפס */
  align-self:flex-start; margin-top:8px;
  padding:13px 42px; border:0; border-radius:14px; cursor:pointer;
  background:var(--accent-grad);
  color:#170D22;
  font-family:inherit; font-weight:600; font-size:.95rem;
  transition:box-shadow .3s, transform .2s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 34px -14px rgba(185,140,255,.9); }
.form-status{ font-size:.88rem; min-height:1.2em; color:var(--gold-soft); }
.form-status.is-error{ color:#E08A8A; }
.form-note{ font-size:.78rem; color:var(--ink-mute); }

/* ─────────── 6. פוטר ─────────── */
/* הריווח התחתון נדיב במכוון — כדי שלקו יהיה מקום להשלים את עצמו עד סוף הגלילה */
.footer{ padding-block:clamp(40px,6vw,72px) max(190px,34vh); }
.footer .col{ border-top:1px solid var(--hair); padding-top:28px; }
.footer-sign{ font-size:.82rem; color:var(--ink-mute); }

/* ─────────── מובייל ─────────── */
@media (max-width:760px){
  /* עמודה אחת על כל הרוחב — הקו רץ מאחורי הטקסט */
  .hero,.journey,.work,.clients,.contact,.footer,.quote,.spine-inner{
    grid-template-columns:1fr;
  }
  .spine-col,.col,.beat,.hero-text,.gutter{ grid-column:1; }
  .journey{ grid-template-rows:repeat(5, var(--row)); --row:max(235px,27vh); }
  .gutter{ display:none; }

  /* הקו מעומעם — נוכח אבל לא מפריע לקריאה */
  .ink.halo{ opacity:.04; }
  .ink.mid{ opacity:.09; }
  .ink.core{ opacity:.4; }
  .pen{ width:7px; height:7px; box-shadow:0 0 10px 2px rgba(230,190,121,.4); }

  /* הילה כהה סביב האותיות — הטקסט מקבל "שוליים" משלו והקו שמאחוריו לא נוגע בקריאות */
  main :is(h1,h2,h3,p,li,dt,dd,blockquote,footer,span){
    text-shadow:0 0 8px rgba(11,7,18,.95), 0 0 18px rgba(11,7,18,.8), 0 0 30px rgba(11,7,18,.6);
  }
  /* אבל לא על טקסט גרדיאנט — הצל מצטייר דרך המילוי השקוף ומעכיר את הצבעים */
  main :is(.grad, .beat h2 em, .beat p em),
  .quote blockquote::before, .inline-quote::before{ text-shadow:none; }


  .hero{ padding-block:104px 50px; }
  .hero-text{ max-width:none; }
  /* הקו עובר ב-25% מהרוחב (ר' .line-caption). ההצעה הזו ארוכה מספיק כדי לגעת שם,
     אז מצמצמים אותה שתישאר מימין לקו ולא תיחתך על ידי העט הבוהק */
  .hero-offer{ max-width:68%; }
  .beat{ padding-inline-end:0; }
  .social a{ width:42px; height:42px; }

  /* גבוה מספיק כדי לא לגעת בשם שמעל הכותרת, וצמוד לקו שעבר שמאלה */
  .line-caption{
    left:calc(25% + 12px); top:19%;
    font-size:.62rem; letter-spacing:.18em;
  }
}

/* ─────────── ווידג'ט נגישות ─────────── */
/* display מפורש ב-CSS דורס את מאפיין hidden — חייבים להחזיר לו את הכוח */
#a11yRoot [hidden]{ display:none !important; }

#a11yLauncher{
  position:fixed; z-index:200;
  width:54px; height:54px;
}
#a11yBtn{
  width:100%; height:100%;
  border:0; border-radius:50%; cursor:grab;
  display:grid; place-items:center;
  background:#2A1E45;
  color:#EFEAF6;
  border:2px solid rgba(185,140,255,.5);
  box-shadow:0 6px 24px -8px rgba(0,0,0,.7);
  touch-action:none;
}
#a11yBtn:active{ cursor:grabbing; }
#a11yBtn svg{ width:30px; height:30px; fill:currentColor; }
#a11yClose{
  position:absolute; top:-7px; right:-7px;   /* פיזית ימין-למעלה של הכפתור */
  width:21px; height:21px;
  border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:#4a3a6e; color:#EFEAF6;
  font-size:14px; line-height:1;
}
#a11yClose:hover{ background:#5d4a88; }
#a11yTab{
  position:fixed; z-index:200;
  width:26px; height:50px;
  border:0; cursor:pointer;
  display:grid; place-items:center;
  background:#2A1E45; color:#EFEAF6;
  border:1px solid rgba(185,140,255,.4);
  opacity:.85;
}
#a11yTab:hover{ opacity:1; }
#a11yTab svg{ width:18px; height:18px; fill:currentColor; }
#a11yPanel{
  position:fixed; z-index:201;
  width:250px;
  background:#1A1128;
  border:1px solid rgba(185,140,255,.3);
  border-radius:14px;
  padding:16px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow:0 14px 44px -10px rgba(0,0,0,.8);
  font-size:.92rem;
}
#a11yPanel h3{ font-size:1.05rem; margin-bottom:4px; }
.a11y-row{ display:flex; align-items:center; justify-content:space-between; padding:4px 2px; }
.a11y-font{ display:flex; align-items:center; gap:10px; }
.a11y-font button{
  width:30px; height:30px; border:0; border-radius:8px; cursor:pointer;
  background:#33254f; color:#EFEAF6; font-size:1.1rem;
}
.a11y-font b{ min-width:44px; text-align:center; font-weight:400; }
.a11y-opt,#a11yReset{
  border:1px solid transparent; border-radius:9px; cursor:pointer;
  background:#241838; color:#EFEAF6;
  padding:9px 12px; text-align:start; font-family:inherit; font-size:.92rem;
}
.a11y-opt:hover,#a11yReset:hover{ background:#33254f; }
.a11y-opt[aria-pressed="true"]{
  background:#3d2b63; border-color:var(--violet-soft);
}
.a11y-opt[aria-pressed="true"]::after{ content:" ✓"; color:var(--gold-soft); }
#a11yReset{ margin-top:4px; text-align:center; color:var(--ink-mute); }

/* ─── מצבי נגישות ─── */
/* עצירת אנימציות */
html.a11y-stop *{ animation:none !important; transition:none !important; }
html.a11y-stop .ink{ stroke-dashoffset:0 !important; }
html.a11y-stop .pen{ opacity:0 !important; }
html.a11y-stop .bg-glow{ transform:none !important; }
html.a11y-stop main,html.a11y-stop main > *{ transform:none !important; }
html.a11y-stop .beat,html.a11y-stop .is-out{ opacity:1 !important; transform:none !important; }

/* גווני אפור — על שכבות התוכן, לא על body: פילטר על body מנתק אלמנטים צפים מהמסך */
html.a11y-gray :is(main, .bg, .topbar, .topbar-bg, .spine){ filter:grayscale(1); }

/* הדגשת קישורים */
html.a11y-links a{
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-color:var(--gold) !important;
}

/* פונט קריא */
html.a11y-readable body, html.a11y-readable body *{
  font-family:Arial, "Segoe UI", sans-serif !important;
  letter-spacing:0 !important;
}

/* ניגודיות כהה — צהוב על שחור */
html.a11y-dark body{ background:#000 !important; }
html.a11y-dark .bg,html.a11y-dark .spine{ display:none !important; }
html.a11y-dark :is(h1,h2,h3,p,span,a,li,dt,dd,label,blockquote,footer,em,strong,b,i,td,th){
  color:#FFEB3B !important;
  background:none !important;
  -webkit-text-fill-color:#FFEB3B !important;
}
html.a11y-dark .topbar,html.a11y-dark #a11yPanel{ background:#000 !important; }
html.a11y-dark input,html.a11y-dark textarea{
  background:#000 !important; color:#FFEB3B !important; border-color:#FFEB3B !important;
}
html.a11y-dark .btn{ background:#FFEB3B !important; color:#000 !important; -webkit-text-fill-color:#000 !important; }
html.a11y-dark .quote blockquote,html.a11y-dark .inline-quote{ background:#111 !important; border-color:#FFEB3B !important; }
html.a11y-dark .logos-row li.logo-white img{ filter:brightness(0) invert(.92) sepia(1) saturate(6) hue-rotate(10deg); }

/* ניגודיות בהירה — כהה על לבן */
html.a11y-light body{ background:#fff !important; }
html.a11y-light .bg{ display:none !important; }
html.a11y-light :is(h1,h2,h3,p,span,a,li,dt,dd,label,blockquote,footer,em,strong,b,i,td,th){
  color:#111 !important;
  background:none !important;
  -webkit-text-fill-color:#111 !important;
}
html.a11y-light .topbar-bg{ background:rgba(255,255,255,.85) !important; }
html.a11y-light input,html.a11y-light textarea{
  background:#fff !important; color:#111 !important; border-color:#666 !important;
}
html.a11y-light .btn{ background:#111 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
html.a11y-light .quote blockquote,html.a11y-light .inline-quote{ background:#f4f1fa !important; border-color:#bbb !important; }
html.a11y-light .ink{ opacity:.55; }
html.a11y-light .logos-row li.logo-white img{ filter:none; }

/* ─────────── העדפת פחות תנועה ─────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .beat{ opacity:1; transform:none; }
  .logos-track{ animation:none; }
}