/* ==========================================================================
   YARIN - Personal Trainer
   Design system: "FORGE / EMBER"
   Anti-generic: no Inter/Roboto, no Bootstrap/Tailwind. Handmade.

   MOTION CONVENTIONS
   - One ease-out (--e-expo) for everything the user triggers.
   - Durations come from tokens. Press 140ms / hover 200ms / panel 280ms.
   - Bounce (--e-back) is reserved for the floating WhatsApp button. Nothing else.
   - Every hover rule lives inside @media (hover:hover) so touch never sticks.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Surfaces - near-black with a violet cast, warmer as it rises */
  --ink-900:#08070C;
  --ink-800:#0D0B12;
  --ink-700:#131019;
  --ink-600:#1A1622;
  --ink-500:#241F2E;

  /* Ink on dark - all pass WCAG AA on --ink-900 */
  --bone:#F4EFE6;
  --bone-dim:#C6BEB2;
  --muted:#877F94;      /* 5.1:1 */
  --muted-2:#807990;    /* 4.8:1 - was #5C5569 at 2.8:1, failed AA */

  /* The ember */
  --ember:#FF4D1C;
  --ember-2:#FF9A2E;
  --gold:#E8B45A;
  --ink-on-ember:#160B04;

  --grad-ember:linear-gradient(102deg,var(--ember) 0%,var(--ember-2) 52%,var(--gold) 100%);
  --grad-ember-soft:linear-gradient(102deg,rgba(255,77,28,.16),rgba(232,180,90,.10));

  /* Type */
  --f-display:"Secular One",system-ui,sans-serif;
  --f-body:"Assistant",system-ui,sans-serif;
  --f-stencil:"Anton",Impact,sans-serif;   /* Latin + numerals only - no Hebrew glyphs */

  /* Fluid scale */
  --t-xs:clamp(.72rem,.68rem + .2vw,.82rem);
  --t-sm:clamp(.86rem,.82rem + .2vw,.95rem);
  --t-base:clamp(1rem,.95rem + .3vw,1.12rem);
  --t-lg:clamp(1.15rem,1.05rem + .5vw,1.4rem);
  --t-xl:clamp(1.45rem,1.2rem + 1.1vw,2rem);
  --t-2xl:clamp(1.75rem,1.35rem + 1.8vw,2.6rem);
  --t-3xl:clamp(1.95rem,1.35rem + 2.5vw,3.25rem);
  --t-4xl:clamp(2.5rem,1.4rem + 3.6vw,4.4rem);

  /* Space */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem; --sp-6:4.5rem; --sp-7:7rem; --sp-8:10rem;
  --section-y:clamp(4.5rem,3rem + 9vw,9.5rem);

  /* Shell */
  --shell:1240px;
  --gutter:clamp(1.15rem,4vw,3rem);

  /* Radii & lines */
  --r-sm:8px; --r-md:16px; --r-lg:26px; --r-xl:38px;
  --line:1px solid rgba(244,239,230,.10);
  --line-strong:1px solid rgba(244,239,230,.20);

  /* Motion - curves */
  --e-expo:cubic-bezier(.16,1,.3,1);      /* strong ease-out: everything user-triggered */
  --e-soft:cubic-bezier(.45,0,.25,1);     /* ease-in-out: looping ambient motion only */
  --e-back:cubic-bezier(.34,1.56,.64,1);  /* bounce: the FAB, and nothing else */

  /* Motion - durations */
  --d-press:.14s;    /* press feedback */
  --d-hover:.2s;     /* hover + small state changes */
  --d-panel:.28s;    /* accordion, drawer, overlay */
  --d-reveal:.45s;   /* scroll reveal */
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  /* no scroll-behavior:smooth here - main.js owns anchor scrolling so it can
     offset for the fixed nav. Two smooth-scroll systems fight each other. */
  scrollbar-color:var(--ink-500) var(--ink-900);
  scrollbar-gutter:stable;   /* stops the page jumping when a lightbox locks scroll */
}
body{
  font-family:var(--f-body);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.72;
  color:var(--bone-dim);
  background:var(--ink-900);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img,picture,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--ember);color:var(--ink-on-ember)}
:focus-visible{outline:2px solid var(--ember-2);outline-offset:4px;border-radius:4px}

/* ---------- 3. PRIMITIVES ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
.shell--wide{max-width:1500px}

section{position:relative}
.sec{padding-block:var(--section-y)}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:400;
  color:var(--bone);
  line-height:1.06;
  letter-spacing:-.015em;
}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl);line-height:1.2}
p{text-wrap:pretty}
strong{color:var(--bone);font-weight:700}

em{
  font-style:normal;
  background:var(--grad-ember);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-body);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ember-2);
  margin-bottom:var(--sp-3);
}
.kicker::before{
  content:"";width:34px;height:1px;
  background:var(--grad-ember);
  flex:none;
}
.lede{font-size:var(--t-lg);color:var(--bone-dim);line-height:1.65;max-width:56ch}
.sec-head{max-width:min(720px,100%);margin-bottom:clamp(2.5rem,5vw,4.5rem)}

/* ---------- 4. TEXTURE / ATMOSPHERE ---------- */
/* Static. The old grainShift animation re-composited a full-viewport
   mix-blend-mode layer every frame, forever, for no visible gain. */
.grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glow{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(90px);opacity:.5;z-index:0;
}
.glow--a{width:min(560px,70vw);aspect-ratio:1;background:radial-gradient(circle,rgba(255,77,28,.38),transparent 68%)}
.glow--b{width:min(460px,60vw);aspect-ratio:1;background:radial-gradient(circle,rgba(232,180,90,.24),transparent 68%)}

/* ---------- 5. PROGRESS + CURSOR ---------- */
#progress{
  position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:9999;
  background:var(--grad-ember);
  /* right = inline-start in this RTL document */
  transform:scaleX(0);transform-origin:right center;
  will-change:transform;
}
/* The wrapper is positioned by JS; the inner ring handles size so we scale
   (compositor) instead of animating width/height (layout). */
.cursor{
  position:fixed;top:0;left:0;z-index:9997;pointer-events:none;
  width:34px;height:34px;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity var(--d-hover);
}
.cursor i{
  display:block;width:100%;height:100%;border-radius:50%;
  border:1px solid rgba(255,154,46,.7);
  transition:transform var(--d-hover) var(--e-expo),background var(--d-hover),border-color var(--d-hover);
}
.cursor.on{opacity:1}
.cursor.grow i{transform:scale(2.18);background:rgba(255,77,28,.14);border-color:transparent}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- 6. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.05rem 2.1rem;
  font-family:var(--f-body);font-weight:800;font-size:var(--t-sm);
  letter-spacing:.02em;
  border-radius:100px;
  isolation:isolate;
  touch-action:manipulation;
  transition:transform var(--d-press) var(--e-expo),box-shadow var(--d-hover) var(--e-expo),color var(--d-hover);
}
.btn svg{width:1.1em;height:1.1em;flex:none;transition:transform var(--d-hover) var(--e-expo)}
/* Press feedback. Applies to every button on the site. */
.btn:active{transform:scale(.97)}

.btn--primary{
  color:var(--ink-on-ember);
  background:var(--grad-ember);
  box-shadow:0 10px 34px -12px rgba(255,77,28,.75),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;   /* was clipped by overflow:hidden on .btn */
  background:linear-gradient(102deg,var(--gold),var(--ember-2),var(--ember));
  opacity:0;transition:opacity var(--d-hover) var(--e-expo);
}

.btn--ghost{
  color:var(--bone);
  border:var(--line-strong);
  background:rgba(244,239,230,.03);
  backdrop-filter:blur(8px);
  transition:transform var(--d-press) var(--e-expo),border-color var(--d-hover),color var(--d-hover);
}
.btn--lg{padding:1.25rem 2.6rem;font-size:var(--t-base)}

@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 46px -14px rgba(255,77,28,.9)}
  .btn--primary:hover::after{opacity:1}
  .btn--primary:hover svg{transform:translateX(-4px)}
  .btn--ghost:hover{border-color:rgba(255,154,46,.55);color:var(--bone);transform:translateY(-3px)}
  .btn--primary:active,.btn--ghost:active{transform:translateY(-1px) scale(.97)}
}

/* The halo lives 6px outside the button, so .btn must not clip its children -
   that is why .btn--primary::after carries border-radius:inherit instead. */
.btn-wa{position:relative}
.btn-wa::before{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
  border:1px solid rgba(255,154,46,.45);
  animation:halo 3s var(--e-soft) infinite;
  pointer-events:none;
}
@keyframes halo{
  0%{transform:scale(.94);opacity:.85}
  70%{transform:scale(1.1);opacity:0}
  100%{opacity:0}
}

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:900;
  transition:background var(--d-panel) var(--e-expo),backdrop-filter var(--d-panel),
             border-color var(--d-panel),padding var(--d-panel) var(--e-expo);
  border-bottom:1px solid transparent;
  padding-block:1.35rem;
}
.nav.stuck{
  background:rgba(8,7,12,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:rgba(244,239,230,.09);
  padding-block:.7rem;
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--f-display);font-size:1.35rem;color:var(--bone);letter-spacing:-.02em}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand__mark{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--grad-ember);
  display:grid;place-items:center;
  color:var(--ink-on-ember);
  box-shadow:0 6px 20px -8px rgba(255,77,28,.9);
}
.brand__mark svg{width:21px;height:21px;display:block}
.brand small{display:block;font-family:var(--f-body);font-size:.6rem;font-weight:700;letter-spacing:.24em;color:var(--muted);margin-top:.15rem}

.nav__links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2.1rem)}
.nav__links a{
  position:relative;font-size:var(--t-sm);font-weight:600;color:var(--bone-dim);
  padding-block:.35rem;transition:color var(--d-hover);
}
.nav__links a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;
  width:100%;height:1px;background:var(--grad-ember);
  transform:scaleX(0);transform-origin:right;   /* inline-start in RTL */
  transition:transform var(--d-hover) var(--e-expo);
}
@media (hover:hover) and (pointer:fine){
  .nav__links a:hover{color:var(--bone)}
  .nav__links a:hover::after{transform:scaleX(1)}
}
.nav__cta{display:flex;align-items:center;gap:.8rem}
.nav__cta .btn{padding:.72rem 1.5rem;font-size:var(--t-xs)}

.burger{
  display:none;position:relative;flex:none;
  width:44px;height:44px;border-radius:12px;border:var(--line);
  background:rgba(244,239,230,.03);
  touch-action:manipulation;
  transition:transform var(--d-press) var(--e-expo),border-color var(--d-hover);
}
.burger:active{transform:scale(.94)}
.burger span{
  position:absolute;top:50%;left:50%;
  width:19px;height:2px;border-radius:2px;background:var(--bone);
  transition:transform var(--d-panel) var(--e-expo),opacity var(--d-press) var(--e-expo);
}
.burger span:nth-child(1){transform:translate(-50%,calc(-50% - 6px))}
.burger span:nth-child(2){transform:translate(-50%,-50%)}
.burger span:nth-child(3){transform:translate(-50%,calc(-50% + 6px))}
.burger.open span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:translate(-50%,-50%) scaleX(.2)}
.burger.open span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:890;
  background:rgba(8,7,12,.97);backdrop-filter:blur(20px);
  display:grid;place-content:center;gap:var(--sp-2);
  text-align:center;
  opacity:0;visibility:hidden;
  transition:opacity var(--d-panel) var(--e-expo),visibility var(--d-panel);
}
.drawer.open{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--f-display);font-size:clamp(1.8rem,7vw,2.6rem);color:var(--bone);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--d-panel) var(--e-expo),transform var(--d-panel) var(--e-expo),color var(--d-hover);
}
.drawer.open a{opacity:1;transform:none}
.drawer a:active{color:var(--ember-2)}
@media (hover:hover) and (pointer:fine){
  .drawer a:hover{color:var(--ember-2)}
}
/* ה-CTA במגירה הוא כפתור, לא עוד שורת ניווט. בלי איפוס הגודל הוא יורש
   את clamp(1.8rem,7vw,2.6rem) של .drawer a, ואייקון הוואטסאפ שבתוכו
   (1.1em) מתנפח ל-46px. */
.drawer .btn{margin-top:var(--sp-3);justify-self:center;font-size:var(--t-base)}

/* ---------- 8. HERO ---------- */
/* התמונה היא רקע מלא של הסקשן והכיתוב יושב מעליה. הניגודיות מגיעה כולה
   מ-.hero__scrim ולא מהתמונה עצמה, כדי שהחלפת תמונה לא תשבור את הקריאות. */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding-block:clamp(6.5rem,13vh,9rem) clamp(2.5rem,6vh,4rem);
  overflow:hidden;isolation:isolate;
  background:var(--ink-900);
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg picture{display:block;width:100%;height:100%}
/* No transition here on purpose: main.js writes transform every scroll frame
   for the parallax. A transition would make it lag a full second behind.
   ה-scale נותן לפרלקסה מרווח לנסוע בלי לחשוף את קצה התמונה. */
/* transform-origin בראש התמונה ולא במרכזה: ה-scale של הפרלקסה גדל כלפי מטה
   בלבד, ולכן קודקוד הראש לא נאכל על ידי הקצה העליון, וכל המרווח שנוצר יושב
   למטה - בדיוק לאן שהפרלקסה נוסעת בגלילה. */
.hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transform:scale(1.06);transform-origin:50% 0;
}

/* המקור הוא פורטרט צר (1152x1818, חתוך כך שהוא מתחיל בדיוק מעל הראש ונגמר
   ברגליים - בלי קיר מת מלמעלה). פרוס על מסך רחב, cover היה משאיר רק ראש
   וכתפיים; לכן על דסקטופ התמונה תופסת עמודה בצד הפנימי
   (בעברית - שמאל), יוצאת מהקצה בלי מסגרת, והקצה שלה נמוג אל הרקע במסכה.
   מבחינת הקורא זו עדיין תמונת רקע שהכיתוב יושב מעליה, אבל הקומפוזיציה
   מראה גוף שלם ולא תקריב פנים. */
@media (min-width:961px){
  .hero__bg{
    inset-inline-start:auto;inset-inline-end:0;
    width:clamp(520px,55%,1000px);
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 20%);
            mask-image:linear-gradient(to left,transparent 0,#000 20%);
  }
}

/* ארבע שכבות: צד הכיתוב (בעברית - ימין), רצפה תחתונה שמחברת לסקשן הבא,
   כתם עליון שמחזיק את הניווט, ונגיעת אמבר שמחזירה את התמונה למותג. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to left,rgba(8,7,12,.92) 0%,rgba(8,7,12,.66) 26%,rgba(8,7,12,.2) 50%,rgba(8,7,12,.05) 72%,transparent 100%),
    linear-gradient(to top,var(--ink-900) 0%,rgba(8,7,12,.5) 18%,rgba(8,7,12,.08) 46%,transparent 72%),
    linear-gradient(to bottom,rgba(8,7,12,.7) 0%,transparent 22%),
    linear-gradient(102deg,rgba(255,77,28,.16),transparent 58%);
}
.hero__inner{position:relative;z-index:2;width:100%}
.hero__copy{max-width:min(620px,100%)}
.hero h1{
  font-size:var(--t-4xl);
  line-height:.98;
  letter-spacing:-.03em;
  margin-bottom:var(--sp-3);
}
/* The padding/margin pair keeps Hebrew descenders (ק ן ך ף ץ) from being
   sheared off by the overflow:hidden mask. */
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>span{
  display:block;
  padding-bottom:.14em;margin-bottom:-.14em;
  transform:translateY(110%);
  animation:lineUp .75s var(--e-expo) forwards;
}
.hero h1 .ln:nth-child(1)>span{animation-delay:.12s}
.hero h1 .ln:nth-child(2)>span{animation-delay:.2s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.28s}
@keyframes lineUp{to{transform:translateY(0)}}

.hero__sub{
  font-size:var(--t-lg);max-width:44ch;margin-bottom:var(--sp-4);
  opacity:0;animation:fadeUp .5s var(--e-expo) .42s forwards;
}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:.9rem;
  opacity:0;animation:fadeUp .5s var(--e-expo) .5s forwards;
}
.hero .kicker{opacity:0;animation:fadeUp .45s var(--e-expo) .05s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hero__stats{
  display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.6rem);
  margin-top:clamp(1.5rem,3vw,2.2rem);padding-top:1.2rem;
  border-top:var(--line);
  opacity:0;animation:fadeUp .5s var(--e-expo) .64s forwards;
}
.stat__n{
  font-family:var(--f-stencil);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1;
  color:var(--bone);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  direction:ltr;text-align:right;
}
/* "3+" and "24/7" are LTR numeric expressions, so the container is ltr.
   A stat with a Hebrew unit is a Hebrew phrase and has to run rtl, or bidi
   places the unit to the right of the number and it reads "months 3". */
/* Anton carries no Hebrew glyphs - the suffix has to fall back deliberately,
   not mid-word into whatever the OS picks. */
.stat__n em{font-size:.62em;font-family:var(--f-body);font-weight:800}
.stat__n>span[data-count]{display:inline-block;text-align:center}
.stat__l{font-size:var(--t-xs);color:var(--muted);letter-spacing:.06em;margin-top:.35rem;max-width:16ch}

/* צ'יפ הזמינות. יושב בתוך עמודת הכיתוב, לא על התמונה - על רקע פתוח
   הוא היה צף בלי עוגן. */
.hero__tag{
  display:inline-flex;align-items:center;gap:.85rem;
  margin-top:1.1rem;
  padding:.8rem 1.1rem;border-radius:var(--r-md);
  background:rgba(13,11,18,.6);backdrop-filter:blur(14px);
  border:var(--line-strong);
  opacity:0;animation:fadeUp .5s var(--e-expo) .56s forwards;
}
/* Static. One pulsing element per viewport is enough, and that is the CTA halo. */
.hero__tag .dot{width:9px;height:9px;border-radius:50%;background:#39D98A;flex:none;box-shadow:0 0 0 4px rgba(57,217,138,.18)}
.hero__tag p{font-size:var(--t-xs);line-height:1.45;color:var(--bone-dim)}
.hero__tag b{color:var(--bone);display:block;font-size:var(--t-sm)}

/* scale(.9), not scale(0) - nothing in the real world appears from nothing. */

.scrollcue{
  position:absolute;z-index:3;inset-block-end:1.6rem;inset-inline-start:50%;
  transform:translateX(50%);
  display:grid;justify-items:center;gap:.5rem;
  font-size:.62rem;letter-spacing:.3em;color:var(--muted-2);
  transition:opacity var(--d-panel) var(--e-expo);
}
/* Its job is done the moment the user scrolls. main.js adds .gone. */
.scrollcue.gone{opacity:0}
.scrollcue i{display:block;width:1px;height:44px;background:linear-gradient(to bottom,var(--ember-2),transparent);animation:cue 2.1s var(--e-soft) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 9. TICKER ---------- */


/* ---------- 10. PAIN CARDS ---------- */
.pain{background:var(--ink-800);overflow:hidden}
.pain .glow--a{inset-block-start:-14%;inset-inline-end:-8%}

.pain__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
  gap:clamp(1rem,2vw,1.5rem);
}
.card{
  position:relative;isolation:isolate;
  padding:clamp(1.7rem,3vw,2.4rem);
  border-radius:var(--r-lg);
  border:var(--line);
  background:linear-gradient(160deg,rgba(36,31,46,.72),rgba(13,11,18,.5));
  overflow:hidden;
  transition:transform var(--d-hover) var(--e-expo),border-color var(--d-hover),background var(--d-hover);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:var(--grad-ember-soft);
  transition:opacity var(--d-hover) var(--e-expo);
}
.card__n{
  font-family:var(--f-stencil);font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,154,46,.42);
  margin-bottom:1.1rem;transition:color var(--d-hover),-webkit-text-stroke-color var(--d-hover);
}
.card h3{margin-bottom:.7rem}
.card p{font-size:var(--t-sm);color:var(--muted);line-height:1.75}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-7px);border-color:rgba(255,154,46,.32)}
  .card:hover::before{opacity:1}
  .card:hover .card__n{color:rgba(255,154,46,.14)}
}

.pain__close{
  position:relative;
  margin-top:clamp(2.2rem,4vw,3.4rem);
  padding:clamp(1.6rem,3vw,2.4rem);
  padding-inline-start:clamp(1.9rem,3.4vw,2.8rem);
  border-radius:var(--r-lg);
  background:linear-gradient(to left,rgba(255,77,28,.08),transparent 72%);
  font-family:var(--f-display);font-size:var(--t-xl);line-height:1.4;color:var(--bone);
}
.pain__close::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;
  width:3px;border-radius:3px;background:var(--grad-ember);
}

/* ---------- 11. STORY / BEFORE-AFTER ---------- */
.story{background:var(--ink-900);overflow:hidden}
.story .glow--b{inset-block-end:-10%;inset-inline-start:-10%}
.story__grid{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.story__text p+p{margin-top:1.15rem}
.story__text p{color:var(--muted);font-size:var(--t-base)}
.story__text p:first-of-type{color:var(--bone-dim);font-size:var(--t-lg)}
.story__sign{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--line);
  display:flex;align-items:center;gap:1rem;
}
.story__sign b{font-family:var(--f-display);font-size:var(--t-lg);color:var(--bone);display:block}
.story__sign span{font-size:var(--t-xs);color:var(--muted);letter-spacing:.1em}

/* Comparison slider.
   main.js writes clip-path on the image and transform on the handle directly.
   It used to set --pos on the container, which invalidated style for every
   child on every pointer frame. --pos survives only as the pre-JS default. */
.compare{
  position:relative;direction:ltr;
  border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:3/4;
  border:var(--line-strong);
  box-shadow:0 46px 92px -40px rgba(0,0,0,.95);
  cursor:ew-resize;user-select:none;touch-action:pan-y;
  background:var(--ink-700);
  --pos:15%;
}
.compare img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 26%;pointer-events:none;
}
.compare__after{z-index:1}
.compare__before{z-index:2;clip-path:inset(0 0 0 var(--pos))}
.compare::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(8,7,12,.62),transparent 44%);
}
.compare__handle{
  position:absolute;z-index:5;top:0;bottom:0;left:var(--pos);
  width:2px;background:var(--bone);
  transform:translateX(-50%);
  box-shadow:0 0 22px rgba(255,154,46,.6);
}
.compare__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:var(--grad-ember);color:var(--ink-on-ember);
  display:grid;place-content:center;
  box-shadow:0 12px 34px -8px rgba(0,0,0,.9),0 0 0 5px rgba(8,7,12,.5);
  transition:transform var(--d-hover) var(--e-expo);
}
.compare:active .compare__knob{transform:translate(-50%,-50%) scale(.94)}
@media (hover:hover) and (pointer:fine){
  .compare:hover .compare__knob{transform:translate(-50%,-50%) scale(1.09)}
  .compare:active .compare__knob{transform:translate(-50%,-50%) scale(1.02)}
}
.compare__knob svg{width:24px;height:24px}
.compare__lbl{
  position:absolute;z-index:4;bottom:1.2rem;
  padding:.5rem 1.05rem;border-radius:100px;
  font-family:var(--f-body);font-weight:800;font-size:var(--t-xs);letter-spacing:.16em;
  background:rgba(8,7,12,.66);backdrop-filter:blur(10px);
  border:var(--line-strong);color:var(--bone);
  direction:rtl;
}
.compare__lbl--before{right:1.2rem}
.compare__lbl--after{left:1.2rem;background:var(--grad-ember);color:var(--ink-on-ember);border-color:transparent}
.compare__hint{
  position:absolute;z-index:4;top:1.2rem;left:50%;transform:translateX(-50%);
  direction:rtl;font-size:var(--t-xs);color:var(--bone);
  padding:.42rem 1rem;border-radius:100px;
  background:rgba(8,7,12,.6);backdrop-filter:blur(10px);border:var(--line);
  transition:opacity var(--d-panel) var(--e-expo);pointer-events:none;
}
.compare.touched .compare__hint{opacity:0}

/* ---------- 12. PILLARS ---------- */
.pillars{background:var(--ink-800);overflow:hidden}
.pillars .glow--a{inset-block-start:20%;inset-inline-start:-14%;opacity:.34}
.pillars__list{display:grid;gap:0;border-top:var(--line)}
.pillar{
  display:grid;
  grid-template-columns:auto minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(1rem,2.6vw,2.2rem);align-items:start;
  padding-block:clamp(1.8rem,3.4vw,2.8rem);
  border-bottom:var(--line);
  transition:background var(--d-hover) var(--e-expo),padding-inline var(--d-hover) var(--e-expo);
  position:relative;
}
.pillar::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:0;
  background:var(--grad-ember-soft);
  transition:width .38s var(--e-expo);
}
@media (hover:hover) and (pointer:fine){
  .pillar:hover::before{width:100%}
  .pillar:hover{padding-inline:clamp(.6rem,1.6vw,1.6rem)}
}
.pillar__n{
  font-family:var(--f-stencil);font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--ember-2);line-height:1.4;position:relative;z-index:1;
}
.pillar h3{position:relative;z-index:1}
.pillar p{font-size:var(--t-sm);color:var(--muted);position:relative;z-index:1;line-height:1.8}

/* ---------- 13. PROCESS ---------- */
.process{background:var(--ink-800);overflow:hidden}
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(1.2rem,2.4vw,2rem);position:relative;
}
.step{
  position:relative;padding:clamp(1.7rem,3vw,2.3rem);
  border-radius:var(--r-lg);border:var(--line);
  background:linear-gradient(165deg,rgba(36,31,46,.55),rgba(8,7,12,.35));
  transition:transform var(--d-hover) var(--e-expo),border-color var(--d-hover);
}
@media (hover:hover) and (pointer:fine){
  .step:hover{transform:translateY(-7px);border-color:rgba(255,154,46,.3)}
}
.step__badge{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-content:center;margin-bottom:1.2rem;
  background:var(--grad-ember);color:var(--ink-on-ember);
  font-family:var(--f-stencil);font-size:1.25rem;line-height:1;
  box-shadow:0 12px 30px -12px rgba(255,77,28,.9);
}
.step h3{margin-bottom:.6rem}
.step p{font-size:var(--t-sm);color:var(--muted)}
.step__meta{
  margin-top:1.1rem;padding-top:1rem;border-top:var(--line);
  font-size:var(--t-xs);color:var(--ember-2);font-weight:700;letter-spacing:.08em;
}

/* ---------- 14. GALLERY ---------- */
.gallery{background:var(--ink-800);overflow:hidden}
/* רצועה בגובה קבוע, לא masonry. שלוש תמונות לאורך מלא הפכו את #results
   לבלוק הגבוה בדף (1.85 מסכים) בדיוק במקום שבו הוא אמור לסגור - בין
   סרטוני המתאמנים לאחריות. הריבוע חותך מעט, ולכן לכל תמונה יש --pos
   משלה ב-HTML כדי שהפנים יישארו בפריים. */
.gal{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.7rem,1.4vw,1.1rem);
}
.gal__item{
  margin:0;aspect-ratio:1/1;
  position:relative;border-radius:var(--r-md);overflow:hidden;
  border:var(--line);cursor:pointer;
  background:var(--ink-700);
  touch-action:manipulation;
  transition:transform var(--d-press) var(--e-expo),border-color var(--d-hover);
}
.gal__item picture{display:block;block-size:100%}
.gal__item img{
  inline-size:100%;block-size:100%;
  object-fit:cover;object-position:var(--pos,50% 30%);
  transition:transform .35s var(--e-expo),filter var(--d-hover);filter:saturate(.9) contrast(1.03);
}
.gal__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,12,.7),transparent 55%);
  opacity:.75;transition:opacity var(--d-hover)}
.gal__item:active{transform:scale(.985)}
.gal__zoom{
  position:absolute;z-index:2;inset-block-end:.8rem;inset-inline-end:.8rem;
  width:38px;height:38px;border-radius:50%;display:grid;place-content:center;
  background:rgba(8,7,12,.7);backdrop-filter:blur(8px);border:var(--line-strong);
  color:var(--bone);opacity:0;transform:scale(.92);
  transition:opacity var(--d-hover) var(--e-expo),transform var(--d-hover) var(--e-expo);
}
.gal__zoom svg{width:16px;height:16px}
@media (hover:none),(pointer:coarse){
  .gal__zoom{opacity:1;transform:none}
}
@media (hover:hover) and (pointer:fine){
  .gal__item:hover{transform:translateY(-5px);border-color:rgba(255,154,46,.35)}
  .gal__item:hover img{transform:scale(1.07);filter:saturate(1.05) contrast(1.05)}
  .gal__item:hover::after{opacity:.35}
  .gal__item:hover .gal__zoom{opacity:1;transform:none}
  .gal__item:active{transform:translateY(-5px) scale(.985)}
}

/* Lightbox - transform-origin stays centered: a modal is not anchored to a trigger. */
.lb{
  position:fixed;inset:0;z-index:9990;
  display:grid;place-items:center;
  background:rgba(4,3,7,.94);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;
  transition:opacity var(--d-panel) var(--e-expo),visibility var(--d-panel);
  padding:clamp(1rem,5vw,3rem);
}
.lb.open{opacity:1;visibility:visible}
.lb img{
  max-width:min(94vw,760px);max-height:86svh;width:auto;
  border-radius:var(--r-lg);border:var(--line-strong);
  box-shadow:0 40px 100px -30px rgba(0,0,0,1);
  transform:scale(.94);transition:transform var(--d-panel) var(--e-expo);
}
.lb.open img{transform:none}
.lb__btn{
  position:absolute;width:52px;height:52px;border-radius:50%;
  display:grid;place-content:center;
  background:rgba(244,239,230,.07);border:var(--line-strong);color:var(--bone);
  backdrop-filter:blur(10px);
  touch-action:manipulation;
  transition:background var(--d-hover),transform var(--d-press) var(--e-expo);
}
.lb__btn svg{width:20px;height:20px}
.lb__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb__prev{right:clamp(.6rem,2.5vw,2.5rem);top:50%;transform:translateY(-50%)}
.lb__next{left:clamp(.6rem,2.5vw,2.5rem);top:50%;transform:translateY(-50%)}
.lb__close:active{transform:scale(.93)}
.lb__prev:active,.lb__next:active{transform:translateY(-50%) scale(.93)}
@media (hover:hover) and (pointer:fine){
  .lb__btn:hover{background:rgba(255,77,28,.85)}
  .lb__close:hover{transform:scale(1.08)}
  .lb__prev:hover,.lb__next:hover{transform:translateY(-50%) scale(1.08)}
}
.lb__count{
  position:absolute;inset-block-end:clamp(1rem,3vw,2rem);inset-inline:0;
  text-align:center;font-family:var(--f-stencil);font-size:.9rem;color:var(--muted);letter-spacing:.14em;
  direction:ltr;
}

/* ---------- 15. GUARANTEE ---------- */
.guarantee{position:relative;overflow:hidden;background:var(--ink-900);
  padding-block:calc(var(--section-y) * 1.35)}
.guarantee__box{
  position:relative;isolation:isolate;
  border-radius:var(--r-xl);
  padding:clamp(2.2rem,5.5vw,4.5rem);
  border:1px solid rgba(255,154,46,.24);
  background:
    radial-gradient(700px 340px at 78% 0%,rgba(255,77,28,.2),transparent 66%),
    linear-gradient(160deg,rgba(36,31,46,.85),rgba(8,7,12,.75));
  text-align:center;
  overflow:hidden;
}
.guarantee__seal{
  width:clamp(84px,10vw,108px);aspect-ratio:1;margin:0 auto var(--sp-3);
  border-radius:50%;display:grid;place-content:center;
  background:var(--grad-ember);color:var(--ink-on-ember);
  box-shadow:0 20px 50px -16px rgba(255,77,28,.9);
}
/* Percentages here resolve against a grid area that is itself sized by its
   content, so the icon collapsed to ~0. Track the seal's own clamp instead. */
.guarantee__seal svg{width:clamp(37px,4.4vw,47px);height:clamp(37px,4.4vw,47px)}
.guarantee__cta{margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.final__reassure{max-width:46ch;margin-inline:auto;margin-top:var(--sp-2);
  font-size:var(--t-sm);color:var(--muted)}
.guarantee h2{margin-bottom:var(--sp-2);max-width:min(660px,100%);margin-inline:auto}
.guarantee p{max-width:52ch;margin-inline:auto;font-size:var(--t-lg);color:var(--bone-dim)}

.story__cta{
  display:inline-flex;align-items:center;gap:.7rem;
  margin-top:var(--sp-3);padding-block:.55rem;min-height:44px;
  font-weight:700;font-size:var(--t-sm);color:var(--ember-2);
  border-block-end:1px solid rgba(255,154,46,.32);
  transition:color var(--d-hover),border-color var(--d-hover);
}
.story__cta svg{width:18px;height:18px;flex:none}
.story__cta-arrow{transition:transform var(--d-hover) var(--e-expo)}
@media (hover:hover) and (pointer:fine){
  .story__cta:hover{color:var(--gold);border-color:var(--gold)}
  .story__cta:hover .story__cta-arrow{transform:translateX(-4px)}
}

/* The rule says "this is not a fourth step" - it closes the sequence
   instead of continuing it. */
.steps__cta{
  margin-top:clamp(2.4rem,4.5vw,3.6rem);
  padding-top:clamp(2.2rem,4vw,3.2rem);
  border-top:var(--line);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  text-align:center;
}
.steps__cta p{
  font-family:var(--f-display);font-size:var(--t-xl);
  color:var(--bone);line-height:1.25;max-width:22ch;
}

/* ---------- 16. FAQ ---------- */
.faq{background:var(--ink-800)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.faq__grid>:first-child{position:sticky;top:calc(var(--nav-h,80px) + 2rem)}
@media (max-width:960px){.faq__grid>:first-child{position:static}}
.acc{border-top:var(--line)}
.acc__item{border-bottom:var(--line)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding-block:clamp(1.2rem,2.2vw,1.65rem);
  text-align:start;
  font-family:var(--f-display);font-size:var(--t-lg);color:var(--bone);
  touch-action:manipulation;
  transition:color var(--d-hover),transform var(--d-press) var(--e-expo);
  transform-origin:right center;   /* inline-start in RTL */
}
.acc__q:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){
  .acc__q:hover{color:var(--ember-2)}
}
.acc__ico{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:var(--line-strong);display:grid;place-content:center;
  transition:background var(--d-hover),border-color var(--d-hover),color var(--d-hover);
  position:relative;
}
.acc__ico::before,.acc__ico::after{
  content:"";position:absolute;top:50%;left:50%;
  background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform var(--d-panel) var(--e-expo);
}
.acc__ico::before{width:13px;height:2px}
.acc__ico::after{width:2px;height:13px}
/* No rotate(180deg): the icon is a symmetric plus inside a circle, so half a
   second of rotation was visually identical to none. The bar collapse is the signal. */
.acc__item.open .acc__ico{background:var(--grad-ember);border-color:transparent;color:var(--ink-on-ember)}
.acc__item.open .acc__ico::after{transform:translate(-50%,-50%) scaleY(0)}
.acc__a{overflow:hidden;height:0;transition:height var(--d-panel) var(--e-expo)}
.acc__a>div{padding-bottom:clamp(1.2rem,2.2vw,1.6rem);color:var(--muted);font-size:var(--t-sm);max-width:64ch;line-height:1.85}

/* ---------- 17. FINAL CTA ---------- */
.final{
  padding-block:calc(var(--section-y) * 1.35);
  position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(900px 480px at 50% 110%,rgba(255,77,28,.26),transparent 66%),
    var(--ink-900);
}
.final h2{font-size:var(--t-4xl);line-height:1.02;letter-spacing:-.03em;max-width:min(720px,100%);margin-inline:auto;margin-bottom:var(--sp-3)}
.final p{max-width:48ch;margin-inline:auto;font-size:var(--t-lg);margin-bottom:var(--sp-4)}
.final__actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.final__note{margin-top:var(--sp-3);font-size:var(--t-xs);color:var(--muted-2);letter-spacing:.05em}

/* ---------- 18. FOOTER ---------- */
.footer{background:var(--ink-900);border-top:var(--line);padding-block:var(--sp-5) var(--sp-4)}
.footer__top{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:flex-start}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer__nav a{font-size:var(--t-sm);color:var(--muted);transition:color var(--d-hover);
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.footer__nav a:active{color:var(--ember-2)}
.socials{display:flex;gap:.6rem}
.socials a{
  width:44px;height:44px;border-radius:50%;display:grid;place-content:center;
  border:var(--line);color:var(--bone-dim);
  touch-action:manipulation;
  transition:border-color var(--d-hover),color var(--d-hover),transform var(--d-press) var(--e-expo),background var(--d-hover);
}
.socials a:active{transform:scale(.94)}
.socials svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  .footer__nav a:hover{color:var(--ember-2)}
  .socials a:hover{border-color:transparent;background:var(--grad-ember);color:var(--ink-on-ember);transform:translateY(-3px)}
  .socials a:active{transform:translateY(-1px) scale(.94)}
}
.footer__bot{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:var(--t-xs);color:var(--muted-2);
}
/* Credit line. Quiet on purpose - it belongs to me, not to Yarin's pitch. */
.footer__credit{
  margin-top:var(--sp-2);
  padding-bottom:env(safe-area-inset-bottom);
  font-size:calc(var(--t-xs) * .92);color:var(--muted-2);opacity:.72;
  letter-spacing:.02em;
}
.footer__credit a{
  color:inherit;text-decoration:underline;
  text-decoration-color:rgba(244,239,230,.22);text-underline-offset:.22em;
  transition:color var(--d-hover),text-decoration-color var(--d-hover);
}
.footer__credit a:active{color:var(--ember-2)}
@media (hover:hover) and (pointer:fine){
  .footer__credit a:hover{color:var(--ember-2);text-decoration-color:currentColor}
}

/* Floating WhatsApp - the one element allowed to bounce. */
.fab{
  position:fixed;z-index:880;
  inset-block-end:max(clamp(1rem,3vw,1.6rem), env(safe-area-inset-bottom));
  inset-inline-start:max(clamp(1rem,3vw,1.6rem), env(safe-area-inset-left));
  width:56px;height:56px;border-radius:50%;
  display:grid;place-content:center;
  background:#25D366;color:#062B14;
  box-shadow:0 14px 36px -10px rgba(37,211,102,.7);
  touch-action:manipulation;
  opacity:0;transform:scale(.9);pointer-events:none;
  transition:opacity var(--d-hover) var(--e-expo),transform .32s var(--e-back),box-shadow var(--d-hover);
}
.fab.show{opacity:1;transform:scale(1);pointer-events:auto}
.fab.show:active{transform:scale(.93)}
.fab svg{width:27px;height:27px}
@media (hover:hover) and (pointer:fine){
  .fab.show:hover{box-shadow:0 20px 46px -10px rgba(37,211,102,.95)}
}

/* ---------- 19. SCROLL REVEAL ---------- */
[data-rv]{opacity:0;transform:translateY(24px);transition:opacity var(--d-reveal) var(--e-expo),transform var(--d-reveal) var(--e-expo)}
[data-rv="left"]{transform:translateX(30px)}
[data-rv="right"]{transform:translateX(-30px)}
[data-rv="scale"]{transform:scale(.96)}
[data-rv].in{opacity:1;transform:none}

/* ==========================================================================
   19b. UPGRADE LAYER - editorial depth, spotlight, new components
   ========================================================================== */

/* ---------- ghost numerals behind section heads ---------- */
.sec-head{position:relative;z-index:1}
.ghost{
  position:absolute;z-index:-1;pointer-events:none;user-select:none;
  inset-block-start:50%;inset-inline-start:0;
  transform:translateY(-50%);
  font-family:var(--f-stencil);font-size:clamp(6rem,9vw,9.5rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,154,46,.16);
  direction:ltr;
}
@media (max-width:1000px){.ghost{display:none}}

/* ---------- cursor spotlight on interactive cards ---------- */
.card,.step,.feature{--mx:50%;--my:0%}
.card::after,.step::after,.feature::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(320px circle at var(--mx) var(--my),rgba(255,154,46,.15),transparent 62%);
  transition:opacity var(--d-hover) var(--e-expo);
}
.step,.feature{isolation:isolate}
@media (hover:hover) and (pointer:fine){
  .card:hover::after,.step:hover::after,.feature:hover::after{opacity:1}
}

/* ה-aurora (כתמי אמבר מטושטשים בהירו) הוסר יחד עם מעבר ההירו לתמונת רקע
   מלאה - התמונה תופסת את כל הסקשן והכתמים היו יושבים מתחתיה. גוון האמבר
   נשאר, אפוי כשכבה ב-.hero__scrim. */

/* ---------- nav active link ---------- */
.nav__links a.active{color:var(--bone)}
.nav__links a.active::after{transform:scaleX(1)}

/* ---------- FEATURES ---------- */
.features{background:var(--ink-900);overflow:hidden}
.features .glow--b{inset-block-start:8%;inset-inline-end:-12%}
.features__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,1.8vw,1.3rem);
}
@media (max-width:900px){.features__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.features__grid{grid-template-columns:1fr}}
.feature{
  position:relative;overflow:hidden;
  padding:clamp(1.5rem,2.6vw,2.05rem);
  border-radius:var(--r-lg);border:var(--line);
  background:linear-gradient(162deg,rgba(36,31,46,.62),rgba(8,7,12,.42));
  transition:transform var(--d-hover) var(--e-expo),border-color var(--d-hover);
}
.feature__ico{
  width:48px;height:48px;border-radius:15px;flex:none;
  display:grid;place-content:center;margin-bottom:1.05rem;
  color:var(--ember-2);
  background:linear-gradient(160deg,rgba(255,154,46,.16),rgba(255,77,28,.05));
  border:1px solid rgba(255,154,46,.26);
  transition:transform var(--d-hover) var(--e-expo),background var(--d-hover),color var(--d-hover);
}
.feature__ico svg{width:22px;height:22px}
.feature h3{font-size:var(--t-lg);margin-bottom:.5rem;line-height:1.25}
.feature p{font-size:var(--t-sm);color:var(--muted);line-height:1.75}
.feature__pill{
  display:inline-block;margin-top:.9rem;
  font-size:.68rem;font-weight:800;letter-spacing:.12em;
  color:var(--ember-2);
}
@media (hover:hover) and (pointer:fine){
  .feature:hover{transform:translateY(-6px);border-color:rgba(255,154,46,.3)}
  .feature:hover .feature__ico{transform:translateY(-2px) rotate(-5deg);background:var(--grad-ember);color:var(--ink-on-ember);border-color:transparent}
}

/* ---------- CHIPS (למי זה מתאים) ---------- */
.forwho{
  margin-top:clamp(2.2rem,4vw,3.2rem);
  padding:clamp(1.5rem,3vw,2.2rem);
  border-radius:var(--r-lg);border:var(--line);
  background:linear-gradient(to left,rgba(255,77,28,.06),transparent 70%);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1rem,2.4vw,2rem);
}
.forwho__t{
  font-family:var(--f-display);font-size:var(--t-lg);color:var(--bone);
  flex:none;max-width:14ch;line-height:1.25;
}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;flex:1}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.58rem 1.05rem;border-radius:100px;
  border:var(--line);background:rgba(244,239,230,.035);
  font-size:var(--t-sm);font-weight:600;color:var(--bone-dim);
  transition:border-color var(--d-hover),color var(--d-hover),transform var(--d-press) var(--e-expo);
}
.chip svg{width:14px;height:14px;flex:none;color:var(--ember-2)}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:rgba(255,154,46,.42);color:var(--bone);transform:translateY(-2px)}
}

/* ---------- VIDEO TESTIMONIALS ---------- */
.vouch{background:var(--ink-900);overflow:hidden}
.vouch .glow--a{inset-block-end:-16%;inset-inline-start:-10%;opacity:.34}
.vouch__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));
  gap:clamp(.9rem,1.8vw,1.3rem);
}
.vcard{
  position:relative;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--r-lg);border:var(--line);
  background:var(--ink-700);cursor:pointer;
  touch-action:manipulation;
  transition:transform var(--d-press) var(--e-expo),border-color var(--d-hover);
}
.vcard:active{transform:scale(.985)}
.vcard video,.vcard img{width:100%;height:100%;object-fit:cover}
.vcard::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,12,.88) 4%,rgba(8,7,12,.1) 46%,transparent 70%);
  pointer-events:none;
}
.vcard__play{
  position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(50%,-50%);
  width:58px;height:58px;border-radius:50%;
  display:grid;place-content:center;
  background:rgba(244,239,230,.14);backdrop-filter:blur(10px);
  border:1px solid rgba(244,239,230,.3);color:var(--bone);
  transition:background var(--d-hover),transform var(--d-hover) var(--e-expo),color var(--d-hover);
}
.vcard__play svg{width:22px;height:22px;margin-inline-start:2px}
@media (hover:hover) and (pointer:fine){
  .vcard:hover{transform:translateY(-6px);border-color:rgba(255,154,46,.35)}
  .vcard:hover .vcard__play{background:var(--grad-ember);color:var(--ink-on-ember);border-color:transparent;transform:translate(50%,-50%) scale(1.1)}
  .vcard:active{transform:translateY(-6px) scale(.985)}
}
.vcard__meta{position:absolute;z-index:2;inset-block-end:1.05rem;inset-inline:1.05rem}
.vcard__meta b{display:block;font-family:var(--f-display);font-size:var(--t-base);color:var(--bone)}
.vcard__meta span{font-size:var(--t-xs);color:var(--muted)}

/* video lightbox */
.vlb{
  position:fixed;inset:0;z-index:9991;display:grid;place-items:center;
  background:rgba(4,3,7,.95);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;
  transition:opacity var(--d-panel) var(--e-expo),visibility var(--d-panel);
  padding:clamp(1rem,4vw,2.5rem);
}
.vlb.open{opacity:1;visibility:visible}
.vlb video{
  max-width:min(92vw,430px);max-height:86svh;
  border-radius:var(--r-lg);border:var(--line-strong);
  background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,1);
}

/* ---------- GUARANTEE CONTRACT ---------- */
/* display:flex + width:fit-content ולא inline-flex: ב-inline-flex הצ'יפ
   והכפתור הם שני תיבות inline באותו בלוק ממורכז, ולכן נחתו זה לצד זה.
   עכשיו הצ'יפ תופס שורה משלו והכפתור יורד מתחתיו. */
.window{
  display:flex;width:fit-content;margin-inline:auto;
  align-items:center;gap:.6rem;
  margin-top:clamp(1.6rem,3vw,2.2rem);
  padding:.7rem 1.3rem;border-radius:100px;
  border:1px solid rgba(255,154,46,.32);
  background:rgba(255,77,28,.09);
  font-size:var(--t-sm);font-weight:700;color:var(--bone);
}
.window svg{width:16px;height:16px;color:var(--ember-2);flex:none}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:960px){
  .nav__links{display:none}
  .nav__cta .btn{display:none}
  .burger{display:block}
  /* בטלפון התמונה היא פורטרט מלא מסך והכיתוב נצמד לתחתית. ה-padding העליון
     הגדול הוא מה שקונה את הרצועה שבה רואים אותו נקי, לפני שהטקסט מתחיל -
     בלי זה הכיתוב ממלא את כל הגובה והתמונה נשארת רק כרמז מתחתיו. */
  .hero{align-items:flex-end;padding-block:clamp(12rem,44vw,15rem) clamp(1.6rem,5vw,2.4rem)}
  .hero__copy{max-width:100%}
  /* בטלפון ההירו נלחם על 844 פיקסלים: הסטטיסטיקות מתכווצות כדי שהשורה
     התחתונה עדיין תיכנס מעל הקיפול, אחרי שהתמונה קיבלה את הרצועה שלה. */
  .hero__tag{margin-top:1.1rem;padding:.7rem 1rem}
  .hero__stats{margin-top:1.5rem;padding-top:1.1rem;gap:1.4rem}
  /* בטלפון הכיתוב יושב ישירות על הצילום ולא על אזור כהה, ולכן צל רך.
     לא על הכפתורים - להם יש רקע משלהם. */
  .hero .kicker,.hero__sub{text-shadow:0 1px 3px rgba(8,7,12,.85),0 2px 18px rgba(8,7,12,.8)}
  /* ל-h1 אסור text-shadow: השורה השנייה היא <em> עם gradient ב-background-clip
     ומילוי שקוף, ולכן הצל נצבע *בתוך* האותיות ומלכלך אותן במקום להפריד אותן
     מהרקע. drop-shadow פועל על התוצאה המצוירת, ולכן נותן צללית נקייה. */
  .hero h1{
    text-shadow:none;
    filter:drop-shadow(0 1px 2px rgba(8,7,12,.92)) drop-shadow(0 4px 16px rgba(8,7,12,.7));
  }
  /* ובטלפון גם מוותרים על ה-gradient עצמו: מילוי אטום פירושו שאין דרך לשום
     דבר "לעבור מבעד" לאותיות, בשום דפדפן. על שתי מילים ההבדל מהמדרג כמעט
     לא נראה, והקריאוּת על גוף מואר חשובה יותר. */
  .hero h1 em{
    background:none;
    color:var(--ember-2);
    -webkit-text-fill-color:var(--ember-2);
  }
  .hero__bg img{object-position:42% 0}
  .hero__scrim{
    background:
      linear-gradient(to top,var(--ink-900) 0%,rgba(8,7,12,.9) 22%,rgba(8,7,12,.7) 44%,rgba(8,7,12,.44) 64%,rgba(8,7,12,.12) 78%,transparent 90%),
      linear-gradient(to bottom,rgba(8,7,12,.7) 0%,transparent 20%),
      linear-gradient(102deg,rgba(255,77,28,.14),transparent 60%);
  }
  .hero h1{font-size:clamp(2.6rem,9.5vw,4rem)}
  .scrollcue{display:none}
  .story__grid{grid-template-columns:1fr;gap:clamp(2.2rem,6vw,3rem)}
  /* The section is one deictic sentence plus one photograph: "הייתי הילד
     בתמונה הזאת". Stacked in source order the photo landed ~800px below the
     headline that points at it, and after the CTA - so the ask fired before
     the evidence. Photo first; "הזאת" now points at what was just seen. */
  .story__media{order:-1;max-width:460px;margin-inline:auto;width:100%}
  .faq__grid{grid-template-columns:1fr}
  .pillar{grid-template-columns:auto minmax(0,1fr);row-gap:.5rem}
  .pillar p{grid-column:2}
  /* never translate horizontally on small screens - avoids any chance of x-overflow */
  [data-rv="left"],[data-rv="right"]{transform:translateY(22px)}
}
/* טלפון שכוב: אין גובה לפורטרט מלא, אז חוזרים לקומפוזיציה של הדסקטופ -
   כיתוב בעמודה צרה בצד, התמונה נחתכת לרצועה. */
@media (max-width:960px) and (min-width:640px) and (max-height:520px) and (orientation:landscape){
  .hero{align-items:center;padding-block:clamp(5.5rem,15vh,7rem) clamp(1.5rem,5vh,2.5rem)}
  .hero__copy{max-width:min(560px,62%)}
  .hero__bg{
    inset-inline-start:auto;inset-inline-end:0;width:62%;
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 26%);
            mask-image:linear-gradient(to left,transparent 0,#000 26%);
  }
  .hero__bg img{object-position:50% 0}
  .hero__scrim{
    background:
      linear-gradient(to left,rgba(8,7,12,.96) 0%,rgba(8,7,12,.88) 24%,rgba(8,7,12,.58) 46%,rgba(8,7,12,.22) 68%,rgba(8,7,12,.04) 100%),
      linear-gradient(to top,var(--ink-900) 0%,rgba(8,7,12,.6) 22%,rgba(8,7,12,.12) 52%,transparent 78%),
      linear-gradient(to bottom,rgba(8,7,12,.78) 0%,transparent 24%),
      linear-gradient(102deg,rgba(255,77,28,.16),transparent 58%);
  }
}
/* מסך נמוך (טלפונים קטנים): הרצועה שמעל הכיתוב מתקצרת כדי שה-CTA יישאר
   מעל הקיפול. התמונה עדיין נראית - פשוט פחות ממנה. */
@media (max-width:960px) and (max-height:700px) and (orientation:portrait){
  .hero{padding-block:clamp(7.5rem,26vw,10rem) clamp(1.6rem,5vw,2.4rem)}
}
@media (max-width:820px){
  .forwho{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .forwho__t{max-width:100%}
}
@media (max-width:700px){
  /* שלושה ריבועים בשורה הם 110px כל אחד בטלפון - קטן מדי. רצועה נגללת
     במקום: הכרטיס הבא מציץ מהצד ומסמן שיש עוד, והסקשן נשאר בגובה כרטיס אחד. */
  .gal{
    grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:68%;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .gal::-webkit-scrollbar{display:none}
  .gal__item{scroll-snap-align:center}
  /* פריט שגלול הצידה ברצועה לא חותך את ה-viewport, ולכן ה-IntersectionObserver
     של [data-rv] לא יירה עליו לעולם וה-opacity:0 יישאר לתמיד. ברצועה מוותרים
     על ה-reveal הפרטני ומראים את כל התמונות יחד. */
  .gal__item[data-rv]:not(.in){opacity:1;transform:none}
  .ghost{font-size:clamp(4.5rem,22vw,7rem);inset-block-start:-.34em}
  .vouch__grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .btn{padding:.95rem 1.6rem}
  .btn--lg{padding:1.1rem 1.9rem}
  .hero__actions .btn{flex:1 1 100%}
  .final__actions .btn{flex:1 1 100%}
  .compare__knob{width:48px;height:48px}
  .compare__lbl{font-size:.66rem;padding:.4rem .8rem}
  .footer__top{flex-direction:column;gap:var(--sp-3)}
  /* ה-FAB קבוע בפינה התחתונה בצד ההתחלה - ב-RTL זה בדיוק איפה
     ששורת הקרדיט מתחילה. נותנים לה מקום לנשום מתחת. */
  .footer__credit{padding-bottom:calc(env(safe-area-inset-bottom) + 4.8rem)}
  .lb__prev{right:.4rem}
  .lb__next{left:.4rem}
  .lb__btn{width:44px;height:44px}
}
@media (max-width:420px){
  .hero__stats{gap:1.1rem}
  .stat__n{font-size:1.5rem}
  .sec{padding-block:clamp(3.5rem,12vw,5rem)}
}
@media (max-width:340px){
  .gal{grid-auto-columns:82%}
}

/* ---------- 21. A11Y ---------- */
/* Reduced motion means fewer and gentler animations, not none. Opacity and
   colour still transition (they aid comprehension); movement is what goes. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    animation-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  [data-rv],[data-rv].in{transform:none!important}
  .hero h1 .ln>span{transform:none!important;animation:none!important}
  .hero__sub,.hero__actions,.hero__stats,.hero__tag,.hero .kicker{
    opacity:1!important;transform:none!important;animation:none!important;
  }
  .grain,.cursor,.scrollcue{display:none}
  .btn-wa::before{display:none}
  .fab{transform:none!important}
  .fab.show:active,.btn:active,.burger:active,.chip:active,
  .gal__item:active,.socials a:active,.acc__q:active,.vcard:active{transform:none!important}
  .card:hover,.step:hover,.feature:hover,.gal__item:hover,
  .vcard:hover,.socials a:hover,.chip:hover,.btn--primary:hover,.btn--ghost:hover{
    transform:none!important;
  }
}

/* A skip link nobody can see when it is focused is not a skip link. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sr-only:focus,.sr-only:focus-visible{
  position:fixed;z-index:9999;
  inset-block-start:1rem;inset-inline-start:1rem;
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  padding:.8rem 1.4rem;border-radius:100px;
  background:var(--grad-ember);color:var(--ink-on-ember);
  font-weight:800;font-size:var(--t-sm);
}