/* ============================================================
   ארגון מלכה · הדלקת נחת
   ============================================================ */

:root{
  --ink:      #150E12;
  --ink-2:    #221720;
  --plum:     #34202C;
  --blush:    #FBEFF2;
  --blush-2:  #F4DAE1;
  --blush-3:  #EAC4CE;
  --rose:     #D6217F;
  --rose-2:   #A9145F;
  --rose-soft:#F06FAE;
  --flame:    #F0AE4E;
  --flame-2:  #FFE0A6;
  --cream:    #FFFAF7;
  --paper:    #FFF6F2;
  --muted:    #7C6672;
  --muted-2:  #A08E98;

  /* כותרות ב-Heebo במשקל כבד, טקסט רץ ברוביק. שניהם פונטים עבריים
     שנבנו לרשת, והכותרות יוצאות חדות ונקיות במקום עתיקות */
  --serif: "Heebo", "Rubik", system-ui, sans-serif;
  --sans:  "Rubik", "Assistant", system-ui, sans-serif;

  --wrap: 1180px;
  --r: 22px;

  --shadow-s: 0 2px 10px rgba(52,32,44,.06);
  --shadow-m: 0 18px 50px -18px rgba(52,32,44,.28);
  --shadow-l: 0 40px 90px -30px rgba(52,32,44,.45);

  --ease: cubic-bezier(.22,.9,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  line-height:1.72;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:800; line-height:1.18; letter-spacing:-.02em}
p{margin:0 0 1.1em}
::selection{background:var(--rose); color:#fff}

.wrap{width:min(var(--wrap), calc(100% - 44px)); margin-inline:auto}

/* film grain ------------------------------------------------ */
.grain{
  position:fixed; inset:-120px; z-index:999; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.32'/></svg>");
  mix-blend-mode:overlay;
}

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.h2{font-size:clamp(2rem, 1.2rem + 3.4vw, 3.6rem)}
.over{
  font-family:var(--sans); font-weight:700; font-size:.8rem;
  letter-spacing:.22em; text-transform:none;
  color:var(--rose); margin:0 0 .8rem;
}
.over--gold{color:var(--flame)}
.sechead{max-width:720px; margin:0 auto clamp(2.4rem,5vw,4rem); text-align:center}
.sechead__sub{color:var(--muted); margin-top:1rem; font-size:1.05rem}
.sechead--light .over{color:var(--rose)}

.prose p{font-size:1.09rem; color:#4A3A43}
.prose p:last-child{margin-bottom:0}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 2rem; border-radius:100px; overflow:hidden;
  background:linear-gradient(135deg, var(--rose) 0%, var(--rose-2) 100%);
  color:#fff; font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  box-shadow:0 12px 30px -10px rgba(169,20,95,.6);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), filter .3s;
  isolation:isolate;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 20px 44px -12px rgba(169,20,95,.7); filter:saturate(1.1)}
.btn:active{transform:translateY(-1px)}
.btn--sm{padding:.6rem 1.35rem; font-size:.93rem; box-shadow:0 8px 20px -8px rgba(169,20,95,.5)}
.btn--lg{padding:1.15rem 2.6rem; font-size:1.12rem}
.btn--xl{padding:1.3rem 3.2rem; font-size:1.2rem; width:100%; justify-content:center; max-width:460px}
.btn--light{background:linear-gradient(135deg,#fff 0%, var(--blush-2) 100%); color:var(--rose-2); box-shadow:0 20px 50px -18px rgba(0,0,0,.55)}

/* הברק הלבן שעובר על הכפתור.
   z-index חיובי בכוונה: קודם הוא היה מתחת לרקע של הכפתור ולכן לא נראה בכלל. */
.btn__spark{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg,
    transparent 34%, rgba(255,255,255,.30) 46%, rgba(255,255,255,.62) 50%,
    rgba(255,255,255,.30) 54%, transparent 66%);
  transform:translateX(-130%);
  animation:spark 4.2s var(--ease) 1.2s infinite;
}
@keyframes spark{0%,68%{transform:translateX(-130%)} 100%{transform:translateX(130%)}}

/* הכפתורים הגדולים זזים קלות כל כמה שניות, כדי שהעין תיתפס אליהם */
.btn--lg, .btn--xl{animation:nudge 4.6s var(--ease) infinite}
.btn--lg:hover, .btn--xl:hover, .btn--lg:active, .btn--xl:active{animation:none}
@keyframes nudge{
  0%, 82%, 100%{transform:translateY(0)   ; box-shadow:0 12px 30px -10px rgba(169,20,95,.6)}
  87%          {transform:translateY(-5px); box-shadow:0 22px 42px -12px rgba(169,20,95,.75)}
  93%          {transform:translateY(-1px); box-shadow:0 14px 32px -10px rgba(169,20,95,.62)}
}

.btn-ghost{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(255,255,255,.82); font-weight:600; font-size:1rem;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:.2rem;
  transition:color .3s, border-color .3s;
}
.btn-ghost:hover{color:#fff; border-color:var(--flame)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  padding:1.1rem 0; transition:all .45s var(--ease);
}
.nav__in{
  width:min(var(--wrap), calc(100% - 44px)); margin-inline:auto;
  display:flex; align-items:center; gap:2rem;
}
.brand{display:flex; align-items:center; gap:.7rem; margin-inline-end:auto}
.brand__mark{width:44px; height:44px; border-radius:12px; box-shadow:0 6px 18px -6px rgba(0,0,0,.4)}
.brand__txt{display:flex; flex-direction:column; line-height:1.15}
.brand__txt b{font-family:var(--serif); font-size:1.12rem; color:#fff; transition:color .4s}
.brand__txt i{font-style:normal; font-size:.72rem; letter-spacing:.16em; color:var(--flame); transition:color .4s}

.nav__links{display:flex; gap:1.9rem}
.nav__links a{
  font-size:.95rem; font-weight:600; color:rgba(255,255,255,.78);
  position:relative; transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; inset-block-end:-6px; inset-inline-start:0;
  width:0; height:2px; background:var(--rose-soft); transition:width .35s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{width:100%}

.nav.is-stuck{
  padding:.6rem 0;
  background:rgba(255,250,247,.92);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(52,32,44,.08), 0 10px 30px -20px rgba(52,32,44,.5);
}
.nav.is-stuck .brand__txt b{color:var(--ink)}
.nav.is-stuck .brand__txt i{color:var(--rose)}
.nav.is-stuck .nav__links a{color:var(--muted)}
.nav.is-stuck .nav__links a:hover{color:var(--ink)}

/* ============================================================
   HERO
   ============================================================ */
/* תמונת שולחן השבת הוורוד יושבת ברקע הפתיחה, ומעליה שכבת הכהיה חמה
   שמשאירה את הוורוד מבצבץ אבל שומרת על הכותרת הלבנה קריאה */
.hero{
  position:relative; overflow:hidden;
  background:
    /* בריכה כהה ורכה מתחת לכותרת בלבד, כדי שהיא תישאר קריאה
       בזמן שהשוליים נשארים בהירים ומוארים */
    radial-gradient(64% 46% at 50% 26%, rgba(16,6,12,.58) 0%, rgba(16,6,12,.30) 54%, transparent 80%),
    linear-gradient(180deg, rgba(18,10,15,.34) 0%, rgba(34,16,27,.16) 40%, rgba(15,9,13,.72) 100%),
    url("assets/hero-bg.jpg") center 30% / cover no-repeat,
    var(--ink);
  padding:clamp(5.2rem, 4.4rem + 2vw, 6.4rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem);
  display:flex; flex-direction:column; align-items:center;
}
/* הזוהר החמים יושב מאחורי הכותרת בלבד, כתאורה רכה ולא כרקע */
.hero__glow{
  position:absolute; inset-block-start:-14%; inset-inline-start:50%;
  transform:translateX(50%);
  width:120vw; height:60vw; max-width:1400px; max-height:760px;
  background:radial-gradient(circle at 50% 40%, rgba(255,190,110,.22) 0%, rgba(214,33,127,.10) 42%, transparent 68%);
  filter:blur(30px); animation:breathe 7s ease-in-out infinite; z-index:0;
}
@keyframes breathe{0%,100%{opacity:.75} 50%{opacity:1}}

.hero__in{
  position:relative; z-index:2; text-align:center;
  width:min(var(--wrap), calc(100% - 44px)); max-width:880px; margin-inline:auto;
}
.hero__h1{
  font-size:clamp(3rem, 1.4rem + 7.4vw, 6rem);
  font-weight:900; color:#fff; line-height:.98; margin:0 0 1.3rem;
  /* הרקע בהיר יותר עכשיו, לכן הכותרת צריכה צל חזק יותר כדי לא להיבלע */
  text-shadow:0 3px 30px rgba(20,6,14,.75), 0 1px 4px rgba(20,6,14,.5);
}
.hero__h1 span{display:block}
/* שתי השורות לבנות. על הרקע הוורוד הבהיר לבן נקי קורא הכי טוב,
   והצל הכהה הוא מה שמפריד אותו מהתמונה. */
.hero__h1 span:last-child{color:#fff}
.hero__sub{
  font-size:clamp(1.05rem, .95rem + .5vw, 1.32rem);
  color:#fff; max-width:640px; margin:0 auto 2rem; font-weight:300;
  text-shadow:0 2px 16px rgba(20,6,14,.8), 0 1px 3px rgba(20,6,14,.5);
}
.hero__cta{
  display:flex; align-items:center; justify-content:center;
  gap:1.8rem; flex-wrap:wrap; margin-bottom:clamp(2rem, 1.6rem + 1.4vw, 3rem);
}

/* ---------- מסגרת הסרטון ----------
   הפינות המעוגלות נצבעות על המסגרת עצמה, לכן הן נשארות זהות
   בכל גובה גלילה, גם כשהניווט נדבק למעלה. */
/* הכרטיס כמעט על כל הרוחב. נשארים בערך שני סנטימטרים מכל צד,
   כדי שהוא ייראה ענק אבל עדיין ייעצר קצת לפני הקצה. */
.hero__stage{
  position:relative; z-index:1; margin-inline:auto;
  width:calc(100% - min(5vw, 2.1cm) * 2);
}
.hero__frame{
  width:100%; margin-inline:auto;
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:clamp(18px, 1.6vw, 30px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 40px 90px -40px rgba(0,0,0,.9);
  /* isolation מונע מהפינות להישבר בזמן גלילה בספארי */
  isolation:isolate; transform:translateZ(0);
}
.hero__frame picture{position:absolute; inset:0}
.hero__frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 54%;
  animation:slowzoom 34s var(--ease) forwards;
}
@keyframes slowzoom{from{transform:scale(1.06)} to{transform:scale(1)}}

/* שכבת הווידאו יושבת מעל התמונה ונחשפת רק כשהיא באמת מוכנה לנגן */
.hero__vid{
  position:absolute; inset:0; width:100%; height:100%;
  /* 54% מוריד את הקאדר במעט בלבד, כך שהמרכז נשאר מרכז */
  object-fit:cover; object-position:center 54%;
  opacity:0; transition:opacity 1.6s var(--ease);
  pointer-events:none;
}
.hero__vid.ready{opacity:1}

/* הכהיה עדינה בקצוות בלבד. הטקסט כבר לא יושב על הסרטון,
   לכן אין צורך להחשיך אותו, רק לרכך את המפגש עם הרקע. */
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(6,3,5,.34) 100%),
    linear-gradient(to top, rgba(6,3,5,.30) 0%, transparent 34%);
}

/* ---------- הכיתוב שנכתב על התמונה ----------
   שני הצדדים מקבלים משפט משלהם, ומתחת מגיעה השורה שמחברת ביניהם.
   הכל נחשף בזה אחר זה ברגע שהתמונה נכנסת למסך. */
.shot{
  position:absolute; inset:0; z-index:2; pointer-events:none; color:#fff;
  font-family:var(--serif);
}
/* הכהיה שמאפשרת לטקסט הלבן להיקרא בלי להרוג את התמונה */
.shot::before{
  content:''; position:absolute; inset:0;
  /* מחשיך את הרצועה העליונה ואת התחתונה, איפה שיושב הטקסט,
     ומשאיר את האמצע — הפנים והשולחנות — נקי */
  background:
    linear-gradient(to bottom,
      rgba(8,4,6,.68) 0%, rgba(8,4,6,.36) 26%, rgba(8,4,6,.05) 46%,
      rgba(8,4,6,.5) 74%, rgba(8,4,6,.9) 100%);
}
.shot > *{position:absolute; margin:0}

/* הסמן המהבהב שרץ בסוף השורה בזמן ההקלדה.
   ב-RTL הקצה הלוגי הוא הצד השמאלי, ושם באמת נגמר הטקסט. */
.typing{border-inline-end:2px solid currentColor; animation:caret .8s steps(1) infinite}
@keyframes caret{50%{border-color:transparent}}

.shot__side{
  width:44%; inset-block-start:12%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  line-height:1.12; text-shadow:0 3px 22px rgba(0,0,0,.85), 0 1px 4px rgba(0,0,0,.6);
}
/* מאפיינים פיזיים בכוונה: הצד העמוס נמצא בשמאל התמונה והריק בימין,
   וזה לא משתנה עם כיוון הכתיבה */
.shot__side--full { left:3%  }
.shot__side--empty{ right:3% }
.shot__side b{
  display:block; font-weight:700; color:#fff;
  font-size:clamp(1.5rem, .9rem + 2.1vw, 3rem);
}
.shot__side i{
  display:block; font-style:normal; font-weight:700; color:#FFD98A;
  font-size:clamp(1.35rem, .8rem + 1.9vw, 2.7rem);
  text-shadow:0 3px 20px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7);
}

.shot__line{
  left:0; right:0; inset-block-end:19%; text-align:center; font-weight:700;
  font-size:clamp(1.05rem, .8rem + 1.1vw, 1.9rem);
  text-shadow:0 3px 20px rgba(0,0,0,.85);
}
.shot__line span, .shot__sub span{display:inline-block}
.shot__line::after{
  content:''; display:block; height:3px; border-radius:3px;
  width:min(260px, 46%); margin:.8rem auto 0;
  background:linear-gradient(90deg, transparent, var(--flame), transparent);
  transform:scaleX(0); transition:transform .9s var(--ease);
}
/* הקו נמתח רק אחרי שהשורה סיימה להיכתב */
.shot.is-ruled .shot__line::after{transform:scaleX(1)}

.shot__sub{
  left:0; right:0; inset-block-end:7%; text-align:center;
  font-family:var(--sans); font-weight:300;
  font-size:clamp(.82rem, .72rem + .45vw, 1.05rem);
  color:rgba(255,255,255,.86); text-shadow:0 2px 14px rgba(0,0,0,.8);
  padding-inline:8%;
}

.trust{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem 1.5rem; margin-block-start:clamp(1.6rem, 1rem + 1.6vw, 2.6rem);
}
.trust li{
  font-size:.84rem; color:rgba(255,255,255,.6); position:relative; padding-inline-start:1.1rem;
}
.trust li::before{
  content:''; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--flame);
  box-shadow:0 0 8px var(--flame);
}

/* ============================================================
   MOMENT
   ============================================================ */
.moment{
  position:relative; padding:clamp(5rem,10vw,9rem) 0;
  background:
    radial-gradient(120% 60% at 90% 0%, var(--blush) 0%, transparent 60%),
    var(--paper);
}
/* אחרי שהתמונה ירדה, הטקסט עומד לבדו במרכז ולא בעמודה צדדית */
.moment__grid{display:block}
.moment__text{max-width:760px; margin-inline:auto}
.moment__text .h2{margin-bottom:1.8rem}

.pull{
  margin:2.6rem 0 0; padding:1.6rem 0 1.6rem 0;
  border-block-start:1px solid var(--blush-3); border-block-end:1px solid var(--blush-3);
  font-family:var(--serif); font-size:clamp(1.25rem,1rem + 1vw,1.7rem); line-height:1.5; color:var(--plum);
}
.pull b{color:var(--rose-2); font-weight:700}

.frame{
  position:relative; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-l);
}
.frame::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(52,32,44,.28), transparent 55%);
  pointer-events:none;
}
.frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.frame:hover img{transform:scale(1.04)}
.frame--wide{aspect-ratio:3/2}

.moment__fig{margin:0}
.moment__fig .frame{aspect-ratio:4/5}
.moment__fig figcaption{
  margin-top:1rem; font-size:.88rem; color:var(--muted-2); text-align:center;
}

/* ============================================================
   HOW
   ============================================================ */
.how{padding:clamp(4.5rem,9vw,8rem) 0; background:var(--cream); border-block:1px solid var(--blush-2)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2.2rem)}
.step{
  position:relative; padding:2.4rem 1.9rem 2rem; border-radius:var(--r);
  background:#fff; box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.step:hover{transform:translateY(-6px); box-shadow:var(--shadow-m)}
.step__n{
  display:grid; place-items:center; width:52px; height:52px; border-radius:16px;
  font-family:var(--serif); font-size:1.5rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--rose) 0%, var(--rose-2) 100%);
  box-shadow:0 10px 24px -10px rgba(169,20,95,.7); margin-bottom:1.3rem;
}
.step h3{font-size:1.4rem; margin-bottom:.6rem}
.step p{color:var(--muted); font-size:1rem; margin:0}
.how__note{
  margin:2.8rem auto 0; text-align:center; max-width:520px;
  font-size:.95rem; color:var(--muted-2);
}

/* ============================================================
   IMPACT
   ============================================================ */
.impact{padding:clamp(5rem,10vw,9rem) 0; background:var(--paper)}

.calc{
  display:flex; align-items:stretch; justify-content:center; gap:clamp(.6rem,1.6vw,1.6rem);
  flex-wrap:wrap; margin-bottom:clamp(3.5rem,7vw,6rem);
}
.calc__card{
  flex:1 1 210px; max-width:280px; text-align:center; padding:2.2rem 1.2rem;
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow-s);
  border:1px solid rgba(234,196,206,.6);
}
.calc__card--hi{
  background:linear-gradient(160deg, var(--plum) 0%, var(--ink) 100%);
  border-color:transparent; box-shadow:var(--shadow-m);
}
.calc__num{
  font-family:var(--serif); font-weight:900; line-height:1;
  font-size:clamp(2.6rem,2rem + 2.4vw,4rem); color:var(--rose-2);
  display:flex; align-items:baseline; justify-content:center; gap:.12em;
}
.calc__num em{font-style:normal; font-size:.42em; color:var(--rose-soft)}
.calc__card--hi .calc__num{color:var(--flame-2)}
.calc__card--hi .calc__num em{color:var(--flame)}
.calc__lbl{margin:.7rem 0 .25rem; font-weight:700; font-size:1.02rem}
.calc__card--hi .calc__lbl{color:#fff}
.calc__sub{margin:0; font-size:.86rem; color:var(--muted-2)}
.calc__card--hi .calc__sub{color:rgba(255,255,255,.55)}
.calc__op{
  align-self:center; font-family:var(--serif); font-size:2rem; color:var(--blush-3); font-weight:300;
}

/* ---------- מסלול הכסף (שלושת השלבים מתחת ל"לאן הכסף הולך") ----------
   הכרטיסים בגריד של שלוש עמודות, ומאחוריהם קו מקווקו שמחבר ביניהם.
   גובה הקו (top) מכוון למרכז העיגול: ריפוד עליון 34px ועוד חצי עיגול 34px.
   אם משנים את גודל העיגול או את הריפוד, צריך לעדכן גם את הקו. */
.path{
  --gap:clamp(1.6rem,3vw,2.6rem);
  list-style:none; margin:0 0 clamp(3rem,6vw,5rem); padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
}
/* חץ קטן בין כרטיס לכרטיס, שמראה את כיוון הזרימה (מימין לשמאל) */
.path__step:not(:last-child)::after{
  content:''; position:absolute; top:60px; inset-inline-end:calc(var(--gap) / -2 - 4px);
  width:11px; height:11px; transform:rotate(45deg);
  border-left:2px solid var(--blush-3); border-bottom:2px solid var(--blush-3);
}
.path__step{
  position:relative; z-index:1; text-align:center;
  padding:34px clamp(1.1rem,2vw,1.7rem) 1.9rem;
  background:var(--cream); border:1px solid rgba(214,33,127,.10); border-radius:24px;
  box-shadow:0 24px 46px -32px rgba(52,32,44,.5);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.path__step:hover{transform:translateY(-4px); box-shadow:0 30px 54px -30px rgba(52,32,44,.55)}
.path__ic{
  display:grid; place-items:center; width:68px; height:68px; margin:0 auto 1.15rem;
  border-radius:50%; color:var(--rose-2);
  background:linear-gradient(160deg,#fff 0%, var(--blush) 100%);
  box-shadow:0 0 0 1px rgba(214,33,127,.14), 0 14px 26px -16px rgba(169,20,95,.55);
}
.path__ic svg{width:30px; height:30px}
.path__step h3{font-size:1.2rem; margin-bottom:.55rem}
.path__step p{margin:0; color:#4A3A43; font-size:1rem; line-height:1.65}

@media(max-width:860px){
  .path{grid-template-columns:1fr; gap:1rem}
  .path__step:not(:last-child)::after{display:none}
  .path__step{padding:26px 1.3rem 1.5rem}
  .path__ic{width:58px; height:58px; margin-bottom:.9rem}
  .path__ic svg{width:26px; height:26px}
}

.together{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center}
.together__txt h3{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.4rem); margin-bottom:1.1rem}
.together__txt p{color:#4A3A43; font-size:1.06rem}
.together__txt b{color:var(--rose-2)}
.together__small{font-size:.9rem !important; color:var(--muted-2) !important; margin-bottom:1.8rem !important}

/* ============================================================
   CANDLE WALL
   ============================================================ */
.wall{
  padding:clamp(4.5rem,9vw,8rem) 0;
  background:linear-gradient(170deg, var(--ink) 0%, var(--plum) 60%, var(--ink-2) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.wall::before{
  content:''; position:absolute; inset-block-start:-30%; inset-inline-start:50%; transform:translateX(50%);
  width:900px; height:900px;
  background:radial-gradient(circle, rgba(240,174,78,.14) 0%, transparent 62%);
}
.wall .sechead{position:relative}
.wall .over{color:var(--flame)}
.wall .h2{color:#fff}

.wall__grid{
  position:relative; display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(.5rem,1.2vw,1rem); max-width:900px; margin:0 auto;
}
/* קיר השמות: לא נרות אלא תוויות קטנות שזורמות אחת אחרי השנייה,
   כמו רשימה שממשיכה ולא נגמרת. כל שם עם נקודה זעירה שנושמת.
   השורות לא מיושרות לרשת — הרוחב נקבע לפי אורך השם. */
.wall__grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.5rem .45rem; max-width:840px;
}
.nm{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.32rem .78rem .32rem .62rem; border-radius:999px;
  border:1px solid rgba(255,214,150,.14);
  background:rgba(255,255,255,.035);
  font-family:var(--sans); font-weight:500; font-size:.8rem; letter-spacing:.01em;
  color:rgba(255,255,255,.72); line-height:1.4; white-space:nowrap;
  opacity:0; transform:translateY(7px) scale(.96);
  transition:opacity .55s var(--ease), transform .55s var(--ease),
             border-color .3s var(--ease), color .3s var(--ease),
             background-color .3s var(--ease);
}
.nm.on{opacity:1; transform:none}
.nm b{font-weight:500}

/* הנקודה: גרעין חם עם הילה רכה, שנושמת לאט */
.nm__dot{
  width:5px; height:5px; border-radius:50%; flex:none;
  background:var(--flame-2);
  box-shadow:0 0 5px rgba(255,190,110,.85), 0 0 12px rgba(240,174,78,.35);
}
.nm.on .nm__dot{animation:pulsedot 4.2s ease-in-out infinite}
@keyframes pulsedot{
  0%,100%{opacity:.85; transform:scale(1)}
  50%    {opacity:.4;  transform:scale(.78)}
}

.nm:hover{
  color:#fff; border-color:rgba(255,214,150,.36); background:rgba(255,255,255,.07);
}

/* השם של הגולשת עצמה */
.nm--mine{
  color:var(--flame-2); font-weight:700;
  border-color:rgba(255,214,150,.5); background:rgba(240,174,78,.1);
  box-shadow:0 0 18px -4px rgba(240,174,78,.4);
}
.nm--mine b{font-weight:700}
.nm--mine .nm__dot{box-shadow:0 0 8px rgba(255,206,130,.95), 0 0 18px rgba(240,174,78,.5)}

/* "ועוד…" — סוגר את הרשימה בלי לסגור אותה */
.nm--more{
  border-style:dashed; border-color:rgba(255,214,150,.24);
  background:none; color:rgba(255,214,150,.62);
  font-family:var(--serif); font-size:.92rem; font-style:italic;
  padding-inline:.9rem;
}
.nm--more:hover{background:none; color:rgba(255,214,150,.85)}

.wall__empty{
  margin:0 auto; padding:1.4rem 0; text-align:center; max-width:420px;
  color:rgba(255,255,255,.62); font-size:1.02rem;
}
.wall .sechead__sub{color:rgba(255,255,255,.6)}

/* ============================================================
   VOICE
   ============================================================ */
.voice{padding:clamp(4.5rem,9vw,8rem) 0; background:var(--cream)}
.voice__in{max-width:820px; margin-inline:auto; text-align:center; position:relative}
.quotemark{
  font-family:var(--serif); font-size:9rem; line-height:.5; color:var(--blush-2);
  margin-bottom:1.2rem;
}
.voice blockquote{
  margin:0 0 1.6rem; font-family:var(--serif);
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.15rem); line-height:1.5; color:var(--plum);
}
.voice cite{font-style:normal; font-size:.9rem; color:var(--muted-2); letter-spacing:.06em}

/* ============================================================
   PRAYER
   ============================================================ */
.prayer{
  padding:clamp(5rem,10vw,9rem) 0; color:#fff; position:relative; overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(240,174,78,.16) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, #1D131A 100%);
}
.prayer__in{max-width:960px; text-align:center}
.prayer .h2{color:#fff; margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.prayer__cols{display:grid; grid-template-columns:1fr 1.15fr; gap:1.4rem; text-align:start}
.prayer__card{
  padding:2.2rem 2rem; border-radius:var(--r);
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(6px);
}
.prayer__txt{font-size:1.12rem; line-height:1.9; color:rgba(255,255,255,.92); margin-bottom:1rem}
.prayer__txt--serif{font-family:var(--serif); font-size:clamp(1.15rem,1rem + .7vw,1.5rem); line-height:1.7}
.prayer__src{margin:0; font-size:.82rem; color:var(--flame); letter-spacing:.05em}
.prayer__foot{
  margin:clamp(2.4rem,5vw,3.4rem) auto 0; max-width:640px;
  color:rgba(255,255,255,.62); font-size:1.02rem; font-weight:300;
}

/* ============================================================
   GIVE
   ============================================================ */
.give{
  padding:clamp(5rem,10vw,9rem) 0;
  background:
    radial-gradient(100% 60% at 50% 0%, var(--blush) 0%, transparent 55%),
    var(--paper);
}
.give__in{max-width:900px}

.give__in{max-width:1120px}
.give__grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,4vw,3.6rem);
  align-items:center;
}

/* ---- הבקרה ---- */
.give__ctrl{
  padding:clamp(1.8rem,3vw,2.6rem); border-radius:var(--r);
  background:#fff; box-shadow:var(--shadow-m); border:1px solid rgba(234,196,206,.7);
  text-align:center;
}
.dial{display:flex; align-items:baseline; justify-content:center; gap:.18em; margin-bottom:.2rem}
.dial__v{
  font-family:var(--serif); font-weight:900; line-height:.9;
  font-size:clamp(3.4rem,2.4rem + 3vw,5rem); color:var(--rose-2);
  font-variant-numeric:tabular-nums;
}
.dial__c{font-family:var(--serif); font-size:1.7rem; color:var(--rose-soft); font-weight:700}
.dial__p{align-self:flex-end; font-size:.9rem; color:var(--muted-2); margin-inline-start:.4rem}

/* ---- הסליידר ---- */
.slider{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; margin:1.6rem 0 .5rem;
  border-radius:100px; outline:none; cursor:pointer;
  background:linear-gradient(to left, var(--rose) 0%, var(--rose) var(--fill,0%), var(--blush-2) var(--fill,0%), var(--blush-2) 100%);
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--blush) 40%, var(--rose) 100%);
  border:3px solid #fff; box-shadow:0 6px 18px -4px rgba(169,20,95,.65);
  cursor:grab; transition:transform .18s var(--ease);
}
.slider::-webkit-slider-thumb:hover{transform:scale(1.12)}
.slider:active::-webkit-slider-thumb{cursor:grabbing; transform:scale(1.04)}
.slider::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; border:3px solid #fff;
  background:var(--rose); box-shadow:0 6px 18px -4px rgba(169,20,95,.65); cursor:grab;
}
.slider:focus-visible{box-shadow:0 0 0 4px rgba(214,33,127,.25)}
.slider__ends{
  display:flex; justify-content:space-between;
  font-size:.76rem; color:var(--muted-2); margin-bottom:1.4rem;
}

/* ---- צ'יפים ---- */
.chips{display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem}
.chip{
  position:relative; padding:.55rem 1.1rem; border-radius:100px;
  border:1.5px solid var(--blush-2); background:#fff;
  font-weight:700; font-size:.92rem; color:var(--plum);
  transition:all .28s var(--ease);
}
.chip:hover{border-color:var(--rose-soft)}
.chip.is-on{background:var(--rose); border-color:var(--rose); color:#fff}
.chip i{
  position:absolute; inset-block-start:-9px; inset-inline-start:50%; transform:translateX(50%);
  font-style:normal; font-size:.6rem; letter-spacing:.05em; white-space:nowrap;
  background:var(--flame); color:#3A2410; padding:.1rem .5rem; border-radius:100px;
}
.chip.is-on i{background:var(--flame-2)}

.give__line{
  font-family:var(--serif); font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);
  color:var(--muted); margin-bottom:1.3rem;
}
.give__trust{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:1.4rem;
}

/* ---- הסצנה ---- */
.scene{margin:0}
.scene__frame{
  position:relative; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-l); background:var(--ink); aspect-ratio:16/9;
}
.scene__vid{width:100%; height:100%; object-fit:cover; display:block}
.scene__grad{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(20,10,16,.42) 0%, transparent 34%);
}
.scene__tag{
  position:absolute; inset-block-end:1rem; inset-inline-start:1rem;
  background:rgba(255,255,255,.92); color:var(--rose-2);
  font-size:.8rem; font-weight:700; padding:.4rem .9rem; border-radius:100px;
  backdrop-filter:blur(6px); transition:background .4s, color .4s;
}
.scene__tag.is-full{background:var(--rose); color:#fff}
.scene figcaption{
  margin-top:.9rem; font-size:.84rem; color:var(--muted-2); text-align:center;
}
.scene figcaption b{color:var(--muted); font-weight:600}
.give__trust li{font-size:.82rem; color:var(--muted-2); position:relative; padding-inline-start:1rem}
.give__trust li::before{
  content:''; position:absolute; inset-inline-start:0; inset-block-start:.6em;
  width:5px; height:5px; border-radius:50%; background:var(--rose-soft);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:clamp(4.5rem,9vw,8rem) 0; background:var(--cream); border-block-start:1px solid var(--blush-2)}
.faq__in{max-width:820px}
.acc__i{
  border-block-end:1px solid var(--blush-2);
}
.acc__i summary{
  list-style:none; cursor:pointer; padding:1.5rem 0;
  font-family:var(--serif); font-size:clamp(1.08rem,1rem + .4vw,1.35rem); font-weight:500;
  color:var(--plum); position:relative; padding-inline-end:2.6rem;
  transition:color .3s;
}
.acc__i summary::-webkit-details-marker{display:none}
.acc__i summary:hover{color:var(--rose-2)}
.acc__i summary::after{
  content:''; position:absolute; inset-inline-end:.4rem; inset-block-start:50%;
  width:11px; height:11px; margin-block-start:-7px;
  border-right:2px solid var(--rose); border-bottom:2px solid var(--rose);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.acc__i[open] summary::after{transform:rotate(-135deg); margin-block-start:-2px}
.acc__i p{
  margin:0 0 1.6rem; color:var(--muted); font-size:1.02rem; max-width:66ch;
  animation:fadeUp .5s var(--ease);
}
@keyframes fadeUp{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ============================================================
   FINAL
   ============================================================ */
.final{
  padding:clamp(5rem,10vw,9rem) 0; text-align:center; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--rose-2) 0%, #6E1046 45%, var(--ink) 100%);
}
.final::before{
  content:''; position:absolute; inset-block-start:-40%; inset-inline-end:-10%;
  width:700px; height:700px;
  background:radial-gradient(circle, rgba(255,224,166,.2) 0%, transparent 62%);
}
.final__in{position:relative; max-width:640px}
.final h2{font-size:clamp(1.9rem,1.3rem + 2.6vw,3.2rem); margin-bottom:.8rem}
.final p{color:rgba(255,255,255,.78); font-size:1.12rem; margin-bottom:2.4rem; font-weight:300}
.final .btn--xl{margin-inline:auto}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink); color:rgba(255,255,255,.62); padding:clamp(3.5rem,7vw,5.5rem) 0 0}
.foot__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.4rem;
  padding-bottom:3rem;
}
.foot__logo{width:120px; margin-bottom:1.1rem; border-radius:14px}
.foot__brand p{font-size:.94rem; max-width:280px}
.foot__col h4{font-family:var(--sans); font-size:.8rem; letter-spacing:.16em; color:var(--flame); margin-bottom:1rem}
.foot__col p{margin:0 0 .55rem; font-size:.93rem}
.foot__col a{transition:color .3s}
.foot__col a:hover{color:#fff}
.foot__bar{
  border-block-start:1px solid rgba(255,255,255,.1); padding:1.4rem 0;
  width:min(var(--wrap), calc(100% - 44px)); margin-inline:auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem;
  font-size:.83rem; color:rgba(255,255,255,.4);
}
.foot__hash{color:var(--rose-soft); letter-spacing:.06em}

/* ============================================================
   STICKY DOCK
   ============================================================ */
.dock{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:90;
  display:none; align-items:center; gap:1rem;
  padding:.75rem 1.1rem calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(255,250,247,.96); backdrop-filter:blur(14px);
  box-shadow:0 -6px 30px -12px rgba(52,32,44,.4);
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.dock.on{transform:none}
.dock__txt{display:flex; flex-direction:column; line-height:1.25; margin-inline-end:auto}
.dock__txt b{font-family:var(--serif); font-size:1.05rem; color:var(--rose-2)}
.dock__txt span{font-size:.76rem; color:var(--muted-2)}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.r{opacity:0; transform:translateY(26px); animation:rise .95s var(--ease) forwards; animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1; transform:none}}

.reveal{opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.steps .step.in:nth-child(2){transition-delay:.12s}
.steps .step.in:nth-child(3){transition-delay:.24s}
.calc .reveal.in:nth-child(2){transition-delay:.08s}
.calc .reveal.in:nth-child(3){transition-delay:.16s}
.calc .reveal.in:nth-child(4){transition-delay:.24s}
.calc .reveal.in:nth-child(5){transition-delay:.32s}
.acc .acc__i.in:nth-child(2){transition-delay:.06s}
.acc .acc__i.in:nth-child(3){transition-delay:.12s}
.acc .acc__i.in:nth-child(4){transition-delay:.18s}
.acc .acc__i.in:nth-child(5){transition-delay:.24s}
.acc .acc__i.in:nth-child(6){transition-delay:.3s}

/* ============================================================
   אווירה חיה
   ניצוצות עולים, תמונות רקע שזזות לאט, וכותרות שנחשפות מילה-מילה
   ============================================================ */

/* שכבת הניצוצות. הקנבס נדחף כילד ראשון בסקשן, ולכן כל התוכן
   שיושב אחריו ומוגדר position:relative מצויר מעליו. */
.embers{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}

/* תמונת רקע רכה שזזה לאט יותר מהגלילה, כדי לתת עומק */
.secbg{
  position:absolute; inset:-10% 0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  will-change:transform;
}
/* בסקשנים הבהירים התמונה היא מרקם ולא תמונה: מטושטשת וכמעט שקופה,
   כדי שהטקסט יישאר הדבר היחיד שקוראים */
.secbg--table  {background-image:url("assets/table.jpg");  opacity:.06; filter:blur(5px)}
.secbg--hands  {background-image:url("assets/hands.jpg");  opacity:.07; filter:blur(5px)}
.secbg--candles{background-image:url("assets/hero.jpg");   opacity:.16; mix-blend-mode:screen}
.secbg--final  {background-image:url("assets/hero.jpg");   opacity:.24; mix-blend-mode:soft-light}

/* הסקשנים שמארחים שכבות רקע צריכים מסגרת ותוכן שצף מעליהן */
.impact, .voice{position:relative; overflow:hidden}
.impact > .wrap, .voice > .wrap, .prayer > .wrap, .final > .wrap{position:relative; z-index:1}

/* הזוהר החמים בסקשנים הכהים נושם, כמו נר */
.wall::before, .final::before{animation:breathe 9s ease-in-out infinite}

/* כותרות שמתעוררות מילה אחרי מילה */
.words .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-block-end:.12em; margin-block-end:-.12em;
}
.words .w i{
  display:inline-block; font-style:inherit;
  transform:translateY(115%); opacity:0;
  transition:transform .8s var(--ease), opacity .8s var(--ease);
  transition-delay:calc(var(--i) * 55ms);
}
.words.is-lit .w i{transform:none; opacity:1}

/* השם האישי בקיר, מופיע אחרי שהגולשת יוצאת לסליקה */
.nm--mine{animation:litpop .9s var(--ease)}
@keyframes litpop{from{transform:scale(.2); opacity:0} 60%{transform:scale(1.12)} to{transform:scale(1); opacity:1}}
.wall__mine{
  margin:1.8rem auto 0; text-align:center; color:var(--flame-2);
  font-size:1rem; letter-spacing:.02em; position:relative;
  animation:fadeUp .8s var(--ease);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .nav__links{display:none}
  .moment__grid{grid-template-columns:1fr}
  .moment__fig{order:-1; max-width:460px; margin-inline:auto}
  .steps{grid-template-columns:1fr}
  .together{grid-template-columns:1fr}
  .prayer__cols{grid-template-columns:1fr}
  .give__grid{grid-template-columns:1fr}
  .scene{order:-1}
  .foot__grid{grid-template-columns:1fr 1fr}
  .calc__op{display:none}
  .calc__card{flex:1 1 100%; max-width:none}
  .dock{display:flex}
  /* הכפתור הדביק יושב מעל הפוטר, לכן משאירים לו מקום
     כדי שהשורה האחרונה לא תסתתר מאחוריו */
  .foot{padding-block-end:calc(78px + env(safe-area-inset-bottom))}
}

/* במסך מגע האצבע צריכה יעד גדול יותר מהעכבר */
@media (pointer:coarse){
  .slider{height:10px; margin:1.8rem 0 .6rem}
  .slider::-webkit-slider-thumb{width:36px; height:36px}
  .slider::-moz-range-thumb{width:32px; height:32px}
  .chip{padding:.7rem 1.25rem; font-size:.95rem}

  /* כל קישור וכפתור מקבל גובה שאפשר לפגוע בו עם אצבע */
  .btn-ghost{min-height:44px; padding-block:.5rem}
  .nav .btn--sm{min-height:42px}
  .foot__col p{margin-bottom:.15rem}
  .foot__col a{display:inline-block; padding-block:.5rem}
  .nav__links a{padding-block:.4rem}

  /* טקסטים זעירים שקשה לקרוא בטלפון */
  .over{font-size:.86rem; letter-spacing:.18em}
  .slider__ends{font-size:.84rem}
  .dock__txt span{font-size:.8rem}
  .trust li{font-size:.84rem}
  .scene__tag{font-size:.88rem}
}

@media (max-width:820px){
  /* בנייד נטענת גרסה קלה של תמונת הרקע */
  .hero{
    background:
      radial-gradient(90% 44% at 50% 24%, rgba(16,6,12,.62) 0%, rgba(16,6,12,.34) 56%, transparent 82%),
      linear-gradient(180deg, rgba(18,10,15,.36) 0%, rgba(34,16,27,.18) 40%, rgba(15,9,13,.76) 100%),
      url("assets/hero-bg-m.jpg") center 30% / cover no-repeat,
      var(--ink);
  }
  /* בטאבלט עדיין התמונה הרוחבית. המסגרת נשארת 16:9 בדיוק כמו התמונה,
     אחרת שני צדי המסך המפוצל נחתכים והמשפחות נכנסות פנימה */
  .hero__frame{aspect-ratio:16/9}
  .hero__frame img{object-position:center 40%; animation:none}
  .hero__glow{width:160vw; height:90vw}
  .hero__in{max-width:none}
  .hero__sub{max-width:none}
}

/* בנייד המסגרת מקבלת בדיוק את היחס של התמונה האנכית (4:5),
   כדי ששני חצאי המסך המפוצל יישארו שלמים ולא ייחתכו */
@media (max-width:700px){
  .hero__frame{aspect-ratio:4/5}
  .hero__frame img{object-position:center center}

  /* בתמונה האנכית הצד הריק למעלה והעמוס למטה. כל כיתוב יושב בתוך
     החצי שלו, עם אוויר מהתפר שבאמצע ומהקצוות. */
  .shot__side{width:88%; left:6%; right:auto}
  .shot__side--empty{inset-block-start:6%}
  .shot__side--full { inset-block-start:53% }
  .shot__side b{font-size:1.8rem}
  .shot__side i{font-size:1.6rem}
  /* המסגרת בנייד היא 4:5 ולכן נמוכה יותר מבעבר. הערכים למטה מפורקים כך
     שהשורה המחברת, הקו והשורה הקטנה לא יידרסו אחת את השנייה */
  .shot__line{inset-block-end:17%; font-size:1.12rem}
  .shot__line::after{width:min(170px, 52%); margin-block-start:.45rem}
  .shot__sub{inset-block-end:3.5%; font-size:.86rem; padding-inline:6%}
}

@media (max-width:600px){
  .wrap, .nav__in, .foot__bar{width:calc(100% - 32px)}
  .hero{padding:5.4rem 0 2.6rem}
  .hero__stage{width:calc(100% - 28px)}
  .hero__frame{border-radius:16px}
  .hero__h1{margin-bottom:1rem}
  .hero__sub{margin-bottom:1.6rem}
  .hero__cta{gap:1rem; margin-bottom:1.8rem}
  .trust{gap:.4rem 1.1rem}
  .trust li{font-size:.82rem}
  .hero__cta .btn--lg{width:100%; justify-content:center}
  .brand__mark{width:38px; height:38px}
  .nav .btn--sm{padding:.5rem 1.05rem; font-size:.85rem}
  .foot__grid{grid-template-columns:1fr; gap:2rem}
  .quotemark{font-size:6rem}
  .give__box{padding:1.6rem 1.2rem}
  .btn--xl{padding:1.1rem 1.6rem; font-size:1.05rem}

  /* קיר השמות בנייד: תוויות מעט צפופות יותר, שייכנסו שתיים-שלוש בשורה */
  .wall__grid{gap:.42rem .34rem}
  .nm{font-size:.75rem; padding:.28rem .62rem .28rem .5rem; gap:.34rem}
  .nm--more{font-size:.86rem; padding-inline:.72rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .r,.reveal{opacity:1; transform:none}
}