:root{
  --paper:#05070D;
  --surface:#0A1018;
  --ink:#E8EEF8;
  --body:#C5CDDC;
  --muted:#9AA3B5;
  --ice:#C5E7FF;
  --vein:#3D7EEA;
  --glow:#5BA8FF;
  --line:#1A2433;
  --snow:#FAFBFD;
  --snow-ink:#081018;
  --snow-body:#3D4654;
  --snow-muted:#6A7382;
  --snow-line:#D4DCE6;
  --font:'Noto Sans Hebrew',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:20px;
  --max:72rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color:var(--ink);font-family:var(--font);font-synthesis:none;scroll-behavior:smooth;font-weight:400}
body{min-height:100svh;font-size:17px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
::selection{background:var(--ice);color:var(--paper)}

.skip{
  position:absolute;inset-inline-start:12px;top:-200px;z-index:40;
  background:var(--ice);color:var(--paper);padding:10px 14px;
}
.skip:focus{top:12px}

.nav{
  position:fixed;inset-inline:0;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 var(--gutter);
  background:var(--paper);border-bottom:1px solid var(--line);
  gap:16px;
}
.nav--over{
  background:linear-gradient(180deg,rgba(5,7,13,.78),transparent);
  border-bottom:0;
}
.nav__mark{
  font-size:15px;font-weight:400;color:var(--ice);flex:none;
  display:inline-flex;align-items:center;gap:8px;
}
.nav__mark svg{display:block;color:var(--ice)}
.nav__links{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ice)}
.nav__end{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.nav__tel{
  font-size:12px;font-weight:600;color:var(--ice);
  min-height:44px;display:inline-flex;align-items:center;padding:0 4px;
  letter-spacing:.02em;white-space:nowrap;
}
.nav--over.nav--solid{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.nav--over.nav--light{
  background:rgba(250,251,253,.94);
  border-bottom:1px solid var(--snow-line);
}
.nav--over.nav--light .nav__mark,
.nav--over.nav--light .nav__tel,
.nav--over.nav--light .nav__links a,
.nav--over.nav--light .lang{color:var(--snow-ink)}
.nav--over.nav--light .nav__links a:hover{color:var(--vein)}
.nav--over.nav--light .nav__cta{background:var(--paper);color:var(--ice)}
.nav--over.nav--light .nav__mark svg{color:var(--vein)}
.nav__links{display:none}
@media (min-width:720px){
  .nav__tel{font-size:13px;padding:0 6px}
  .nav__links{display:flex}
}
.lang{
  background:none;border:0;color:var(--muted);font-size:13px;
  min-height:44px;padding:0 10px;cursor:pointer;
}
.nav__cta{
  font-size:13px;font-weight:600;color:var(--paper);
  min-height:36px;display:inline-flex;align-items:center;padding:0 14px;
  background:var(--ice);
}
.more{
  display:inline-flex;margin-top:28px;font-size:16px;font-weight:600;color:var(--ice);
  text-decoration:underline;text-underline-offset:3px;
}

.hero{
  position:relative;
  z-index:5;
  min-height:92svh;
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  overflow:hidden;
  isolation:isolate;
  background:var(--paper);
  padding-top:64px;
}
.hero::before,
.pins::before,
.folio::before,
.lead::before,
.page::before,
.doc::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:rgba(250,251,253,.2);
  mix-blend-mode:screen;
}
.hero::before{
  display:none;
}
.pins::before{
  mix-blend-mode:normal;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.93) 0,
      rgba(253,254,255,.78) 5vh,
      rgba(250,253,255,.52) 13vh,
      rgba(244,250,254,.28) 24vh,
      rgba(236,246,253,.11) 36vh,
      transparent 52vh),
    rgba(250,251,253,.2);
}
.hero__visual::after{display:none}
.hero__copy{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:32px var(--gutter) 24px;
  z-index:4;
}
.hero__copy::before{
  /* וילון רך מתחת לכותרת — הרקע זז עכשיו, וריד בהיר לא יבלע את הטקסט */
  content:'';
  display:block;
  position:absolute;
  inset:-10% -14% -8% -20%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(68% 58% at 60% 50%,
    rgba(3,6,13,.56) 0%,
    rgba(3,6,13,.34) 46%,
    rgba(3,6,13,0) 78%);
}
.hero__kicker{
  display:block;
  margin:0 0 18px;
  background:none;color:var(--ice);padding:0;height:auto;
  font-size:13px;font-weight:400;
}
.hero h1{
  font-size:clamp(44px, 11vw, 88px);
  font-weight:400;line-height:1.04;max-width:8ch;
  font-stretch:78%;
}
.hero__em{color:var(--ice)}
.lede{
  margin-top:20px;
  font-size:18px;line-height:1.5;color:var(--body);font-weight:400;
  max-width:26ch;
}
.hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;
  margin-top:32px;
}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 26px;margin-top:0;
  background:var(--ice);color:var(--paper);
  font-size:16px;font-weight:600;border:0;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.cta:hover{background:#E8EEF8}
.cta--ghost{
  background:transparent;color:var(--ink);
  border:0;height:auto;padding:0;min-height:44px;
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
}
.cta--ghost:hover{background:transparent;color:var(--ice)}
.hero__visual{
  position:relative;
  min-height:50svh;
  min-width:0;
  z-index:1;
  overflow:hidden;
}
.hero__bridge{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero__bridge img{
  position:absolute;inset:0;
  width:100%;height:100%;
  max-width:none;
  object-fit:cover;object-position:50% 42%;
  opacity:1;
}
.hero__visual img{
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-end:-4%;
  inset-inline-start:auto;
  width:auto;
  height:100%;
  max-width:72%;
  object-fit:contain;
  object-position:center bottom;
  will-change:auto;
  -webkit-mask-image:none;
  mask-image:none;
}
.hero__cap{margin-top:20px;font-size:12px;line-height:1.4;color:var(--muted)}
.hero__note{margin-top:10px;font-size:13px;color:var(--muted)}
.hero__plate,.hero__media canvas,.hero__shot canvas{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero__plate{object-fit:cover;object-position:52% 42%}

.page .split{margin-bottom:48px}
.page .hero__cap{margin:12px 0 28px}

.hero__shot{
  position:relative;
  aspect-ratio:1600/892;
  background:#0B0A08;
  overflow:hidden;
  border:1px solid var(--line);
}
.hero__shot .hero__breath{position:absolute;inset:-3%}
.hero__shot .hero__plate{position:absolute;inset:0;width:100%;height:100%}

.hint{
  position:absolute;inset-inline-start:var(--gutter);bottom:18px;
  transform:none;z-index:4;pointer-events:none;
  display:inline-flex;align-items:center;
  padding:8px 14px;
  background:rgba(5,7,13,.72);
  border:1px solid var(--line);
  color:var(--ink);font-size:13px;font-weight:500;
  white-space:nowrap;
  transition:opacity .45s var(--ease);
}
.hint[data-done="true"]{opacity:0}
.hint__touch{display:none}
@media (hover:none),(pointer:coarse){
  .hint__mouse{display:none}
  .hint__touch{display:inline}
}

.pain{
  padding:0 var(--gutter);
  background:var(--paper);
  border-top:1px solid var(--line);
}
.pain__grid{max-width:var(--max)}
.pain article{
  padding:56px 0;
  border-bottom:1px solid var(--line);
}
.pain__k{
  font-size:13px;font-weight:600;color:var(--muted);
  margin-bottom:14px;
}
.pain__next .pain__k{color:var(--vein)}
.pain h2{margin-bottom:14px}
.pain p{font-size:17px;line-height:1.55;color:var(--body);max-width:32ch}

.pin-spacer{overflow:visible!important}
.pins{
  position:relative;
  z-index:2;
  background:var(--paper);
  color:var(--ink);
  overflow:visible;
  isolation:isolate;
}
.pins__stone{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;object-position:50% 42%;
  pointer-events:none;user-select:none;
  z-index:0;
}
.hero__bridge img,
.pins__stone,
.folio__stone,
.lead__stone{
  /* השיש נמדד ב-71% רוויה אבל נקרא חיוור — העומק חוזר כאן */
  filter:contrast(0.90) brightness(1.12) saturate(1.45);
}
.pins__stage{
  position:relative;z-index:3;
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:108px var(--gutter) 28px;
  box-sizing:border-box;
}
.colonnade{
  flex:1;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(16px, 2.9vw, 48px);
  min-height:0;
  padding-bottom:40px;
}
.colonnade__ground{
  position:absolute;
  left:2%;right:2%;bottom:38px;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(197,231,255,.16) 12%,
    rgba(197,231,255,.34) 50%,
    rgba(197,231,255,.16) 88%,
    transparent 100%);
  pointer-events:none;
}
.col{
  position:relative;
  flex:1 1 0;
  max-width:172px;
  /* קשת: הנמוכים בקצוות, הגבוה במרכז */
  height:calc(var(--ch, 1) * clamp(340px, 55vh, 530px));
  isolation:isolate;
}
.col:nth-child(1),.col:nth-child(5){--ch:.84}
.col:nth-child(2),.col:nth-child(4){--ch:.93}
.col:nth-child(3){--ch:1}
.col__shaft{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:3px 3px 0 0;
  pointer-events:none;
}
.col__face{
  position:absolute;
  inset:0;
  /* בזלת מלוטשת: הגליל נבנה מהגרדיאנט, לא מצילום מתוח */
  background:linear-gradient(90deg,
    #04060b   0%,
    #080d15  11%,
    #121c28  27%,
    #243445  42%,
    #35495e  49%,
    #1e2b3a  60%,
    #0b111a  79%,
    #04060b 100%);
}
.col__side{
  position:absolute;
  inset:0;
  /* המרקם חוזר רק כמיקרו-פרט על המתכת, לא כחומר עצמו */
  background-image:url("assets/marble.webp?v=snow1");
  background-size:auto 150%;
  background-position:calc(6% + var(--i) * 19%) 44%;
  filter:saturate(.22) contrast(.72) brightness(1.15);
  mix-blend-mode:overlay;
  opacity:.38;
}
.col__cap{
  /* הכותרת של העמוד — הקו שתופס את האור */
  position:absolute;
  inset:0 0 auto 0;
  height:14px;
  background:linear-gradient(180deg,
    rgba(220,240,255,.92) 0%,
    rgba(150,200,245,.44) 30%,
    rgba(2,5,11,0) 100%);
  box-shadow:0 0 26px rgba(120,190,255,.42);
}
.col__text{
  position:absolute;
  inset:auto 0 0 0;
  display:flex;flex-direction:column;
  gap:8px;
  padding:0 clamp(10px, 1.2vw, 18px) clamp(18px, 2.6vh, 30px);
  text-align:start;
}
.col__text::before{
  /* וילון מקומי — הטקסט יושב על אבן, לא על צבע אחיד */
  content:'';
  position:absolute;
  inset:-34% 0 0 0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(3,6,13,0) 0%,
    rgba(3,6,13,.62) 38%,
    rgba(3,6,13,.90) 100%);
  pointer-events:none;
}
.col__num{
  font-size:11px;font-weight:400;letter-spacing:.04em;
  color:var(--ice);opacity:.72;
}
.col__word{
  margin:0;
  font-size:clamp(26px, 2.9vw, 44px);
  font-weight:600;line-height:1;
  color:var(--ink);
  font-stretch:82%;
}
.col__line{
  margin:0;
  font-size:clamp(12px, .95vw, 14px);
  line-height:1.45;
  color:var(--body);
  font-weight:300;
}
.pins__anchor{
  grid-column:2;grid-row:2;
  position:relative;z-index:2;
  text-align:center;
  padding:12px 8px;
  max-width:28rem;
  justify-self:center;
}
.pins__anchor::before{
  content:'';
  position:absolute;
  /* הקופסה גדולה, והרדיוס בדיוק 50% — כך הגרדיאנט מתאפס בדיוק על הקצה
     ולא נחתך באמצע. רדיוס גדול מ-50% תמיד ייצור קו חד. */
  inset:-74% -64% -46%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 47%,
    rgba(3,6,13,.92) 0%,
    rgba(3,6,13,.80) 30%,
    rgba(3,6,13,.46) 58%,
    rgba(3,6,13,.14) 80%,
    rgba(3,6,13,0) 100%);
}
.pins__k{
  font-size:13px;font-weight:400;color:var(--ice);
  margin-bottom:12px;
}
.pins__anchor h2{
  font-size:clamp(28px, 3.4vw, 50px);
  font-weight:600;line-height:1.15;
  margin-bottom:12px;
}
.pins__hi{
  background:linear-gradient(90deg, var(--ice), var(--glow), var(--vein));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
.pins__p{font-size:15px;line-height:1.5;color:var(--body);max-width:32ch;margin-inline:auto}
.pins__hint{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:13px;color:var(--muted);
  padding-top:8px;
}
.pins__arrow{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  animation:pins-bounce 1.8s var(--ease) infinite;
}
@keyframes pins-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
.hero__visual img{filter:none}
.show__shot img{filter:none}

@media (max-width:767px){
  .pins__grid{
    display:flex;flex-direction:column;
    gap:0;
  }
  .pins__anchor{order:-1;padding:28px 0 36px;max-width:none}
  .pillar{min-height:72svh}
  .pillar__num{font-size:clamp(120px, 42vw, 220px)}
}
@media (min-width:768px){
  html:not(.no-motion) .pins:not(.is-static) .pillar__num,
  html:not(.no-motion) .pins:not(.is-static) .pillar__fg{opacity:0}
}

.folio{
  position:relative;
  z-index:3;
  background:var(--paper);
  padding:28px 0 18vh;
  overflow:hidden;
  border-top:0;
  isolation:isolate;
}
.folio__stone{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;object-position:50% 42%;
  pointer-events:none;user-select:none;
  z-index:0;
}
.folio > :not(.folio__stone){position:relative;z-index:3}
.folio__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:0 var(--gutter) 8px;
}
.folio__k{
  font-size:13px;font-weight:400;color:var(--vein);
  display:flex;align-items:center;gap:12px;margin:0;
}
.folio__k::after{
  content:"";
  width:36px;height:1px;background:var(--vein);opacity:.55;
}
.folio__now{
  font-size:15px;font-weight:300;color:var(--ink);margin:0;
}
.folio__stage{
  position:relative;
  height:56svh;min-height:320px;
  perspective:1400px;
  perspective-origin:50% 38%;
  touch-action:pan-y;
  overflow:hidden;
  cursor:grab;
  --seat: 28%;
}
.folio__stage:active{cursor:grabbing}
.folio__slab{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:1;
  width:min(120%, 1040px);
  height:auto;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
}
.folio__ring{
  position:absolute;inset:0;
  z-index:2;
  transform-style:preserve-3d;
  --r:180px;
}
.folio__mac{
  position:absolute;
  left:50%;
  top:auto;
  bottom:var(--seat);
  width:min(54vw, 460px);
  height:auto;
  aspect-ratio:1000 / 645;
  margin:0;
  background:transparent;
  transform-origin:50% 100%;
  transform:translateX(-50%);
  transform-style:preserve-3d;
  opacity:1;
  will-change:transform, opacity;
}
.folio__mac.is-front{z-index:30}
.folio__mac img{
  display:block;width:100%;height:auto;
  background:transparent;
  object-fit:contain;object-position:center bottom;
  pointer-events:none;
  user-select:none;
  transition:filter .35s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .folio__mac.is-front:hover img{filter:brightness(1.06)}
}
.folio__mac:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
.folio__names{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;
  padding:8px var(--gutter) 0;
}
.folio__names::before{
  /* הרקע הובהר — בלי הווילון הזה השמות יורדים מתחת ל-4.5:1 */
  content:'';
  position:absolute;
  inset:-30px -8% -34px;
  z-index:-1;
  pointer-events:none;
  /* הרדיוס האנכי חייב להתאפס בתוך הקופסה, אחרת נוצר פס עם קצה חד */
  background:radial-gradient(46% 88% at 50% 50%,
    rgba(3,6,13,.92) 0%,
    rgba(3,6,13,.62) 50%,
    rgba(3,6,13,0) 100%);
}
.folio__names button{
  display:flex;align-items:baseline;gap:8px;
  background:none;border:0;padding:8px 0;min-height:44px;
  color:var(--body);font-size:14px;font-weight:300;
  cursor:pointer;
}
.folio__names button span:first-child{
  font-size:11px;font-weight:400;color:var(--ice);opacity:.62;
  font-variant-numeric:tabular-nums;
}
.folio__names button[aria-pressed="true"]{color:var(--ink)}
.folio__names button[aria-pressed="true"] span:first-child{color:var(--vein);opacity:1}
.folio__names button:hover{color:var(--vein)}

.show{
  position:relative;
  z-index:4;
  min-height:88svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:stretch;
  padding:88px var(--gutter) 48px;
  background:var(--paper);
  isolation:isolate;
  overflow:hidden;
}
/* המחשב הוא התמונה. הכרטיסייה יושבת עליו — בלי שיש שני, בלי שטיפה. */
.show::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:normal;
  height:auto;
  background:linear-gradient(to top,
    rgb(5,7,13) 0%,
    rgb(5,7,13) 22%,
    rgba(5,7,13,.72) 48%,
    rgba(5,7,13,.28) 70%,
    transparent 90%);
}
.show::after{
  content:none;
  display:none;
  background:none;
}
.show__shot{
  position:absolute;inset:0;
  min-height:100%;
  z-index:0;
  overflow:hidden;
}
.show__shot::after{display:none}
.show__shot img{
  width:100%;height:100%;
  object-fit:cover;object-position:18% 52%;
  position:absolute;inset:0;
  will-change:transform;
}
.show__cap{
  position:absolute;inset-inline-end:var(--gutter);bottom:22px;z-index:2;
  font-size:13px;color:var(--muted);
  max-width:min(32ch, calc(100% - 40px));
}
.show__copy{
  position:relative;z-index:1;
  padding:18px 22px 8px;
}
.show__copy::before{display:none}
.show__copy .band__kicker{margin-bottom:10px}
.show__copy h2{
  font-size:clamp(28px, 5.4vw, 40px);
  font-weight:400;line-height:1.08;max-width:10ch;
  font-stretch:78%;margin-bottom:10px;
}
.show__miss{color:var(--vein)}
.show__copy .band__p{color:var(--body);max-width:36ch;margin-bottom:16px;font-size:15px;line-height:1.45}
.show__copy .cta{align-self:flex-start;margin-top:4px}
.yn{
  display:grid;gap:14px;
  margin:0 0 6px;
}
.yn dt{font-size:12px;font-weight:600;color:var(--vein);margin-bottom:4px}
.yn div + div dt{color:var(--muted)}
.yn dd{font-size:14px;line-height:1.45;color:var(--ink)}

.band{
  padding:96px var(--gutter) 80px;
  background:var(--paper);
}
.band--paper{background:var(--paper)}
.band__inner{max-width:none}
.band__kicker{font-size:13px;font-weight:400;color:var(--vein);margin-bottom:14px}
.band h2,.page h1,.pain h2,.get h2,.doc h1{
  font-size:clamp(36px, 6vw, 64px);
  font-weight:600;line-height:1.05;max-width:12ch;margin-bottom:18px;
  font-stretch:82%;
}
.band__p,.page__lede{
  font-size:18px;line-height:1.55;color:var(--body);max-width:36ch;margin-bottom:28px;
}
.band__note{margin-top:32px;font-size:15px;color:var(--muted);max-width:36ch}
.who{
  font-size:16px;line-height:1.55;color:var(--muted);max-width:42ch;
  margin:-8px 0 40px;
}

.split{
  display:grid;gap:32px;
  align-items:center;
}
.mark{
  position:relative;
  aspect-ratio:1;
  width:min(100%,420px);
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
}
.mark img,.mark canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.mark.is-3d img{opacity:0;pointer-events:none}

.work{
  list-style:none;
  display:grid;gap:0;
  max-width:none;
  margin-top:48px;
  border-top:1px solid var(--line);
}
.work li{
  display:grid;
  grid-template-columns:3.2rem 1fr;
  column-gap:16px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.work b{font-size:13px;font-weight:400;color:var(--vein);font-variant-numeric:tabular-nums}
.work strong{font-size:clamp(22px, 3.4vw, 34px);font-weight:600;grid-column:2;font-stretch:85%}
.work span{font-size:16px;line-height:1.5;color:var(--body);max-width:32ch;grid-column:2}

.beats{display:grid;gap:32px;max-width:52rem}
.beats h3,.beats h2{font-size:22px;font-weight:600;line-height:1.25;margin-bottom:8px;max-width:18ch}
.beats p{font-size:17px;line-height:1.55;color:var(--body);max-width:36ch}

.get{
  padding:80px var(--gutter);
  background:var(--surface);
  border-top:1px solid var(--line);
}
.get h2{margin-bottom:36px;max-width:12ch}
.get__grid{display:grid;gap:40px;max-width:52rem}
.get__grid p{font-size:18px;line-height:1.55;color:var(--body);max-width:32ch}
.get .cta{margin-top:40px}
.get__yes,.get__no{font-size:13px;font-weight:600;margin-bottom:10px}
.get__yes{color:var(--vein)}
.get__no{color:var(--muted)}

.lead{
  position:relative;
  z-index:5;
  display:grid;
  gap:40px;
  padding:calc(72px + 10vh) var(--gutter) 80px;
  scroll-margin-top:72px;
  margin-top:0;
  color:var(--ink);
  background:var(--paper);
  border-top:0;
  overflow:hidden;
  isolation:isolate;
}
.lead__stone{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;object-position:50% 42%;
  pointer-events:none;user-select:none;
  z-index:0;
}
.lead > :not(.lead__stone){position:relative;z-index:3}
.lead .hero__kicker{margin-bottom:18px;color:var(--vein)}
.lead__line{
  font-size:clamp(32px, 5.5vw, 56px);
  font-weight:400;line-height:1.08;max-width:12ch;
  margin:12px 0 24px;
  font-stretch:78%;
  color:var(--ink);
}
.lead__copy p:not(.hero__kicker):not(.lead__line):not(.lead__call){
  font-size:18px;color:var(--body);line-height:1.55;margin-bottom:16px;max-width:32ch;
}
.lead__call{margin-bottom:0;color:var(--body)}
.lead__call a{color:var(--ice);font-weight:600}
.lead .cta{
  background:var(--ice);color:var(--paper);
}
.lead .cta:hover{background:#E8EEF8}
.lead .cta--ghost{background:transparent;color:var(--ink)}
.lead .cta--ghost:hover{color:var(--ice)}
.form{display:flex;flex-direction:column;gap:16px;max-width:420px}
.form .cta{width:100%;margin-top:10px;border-radius:9px}
.quiz__bar{font-size:13px;color:var(--muted);margin:0}
.quiz__ticks{display:flex;gap:6px;height:2px;margin:0 0 8px}
.quiz__ticks i{flex:1;height:2px;background:var(--line)}
.quiz__ticks i.is-on{background:var(--ice)}
.quiz__step{border:0;min-width:0;padding:0;margin:0}
.quiz__step[hidden]{display:none}
.quiz legend,.quiz__ask{
  font-size:clamp(22px, 3.6vw, 28px);
  font-weight:600;line-height:1.15;
  margin:0 0 18px;font-stretch:85%;
  max-width:16ch;
}
.quiz__ask{margin-bottom:16px}
.quiz__step > input:not([type=radio]):not([type=checkbox]){
  width:100%;height:52px;padding:0;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  font-size:18px;margin-bottom:16px;
}
.quiz__step > input:not([type=radio]):not([type=checkbox]):focus{
  outline:none;border-bottom-color:var(--ice);
}
.chips{display:flex;flex-direction:column;gap:8px}
.chip{
  position:relative;
  display:flex;align-items:center;
  min-height:52px;padding:0 16px;
  border:1px solid var(--line);cursor:pointer;font-size:16px;
}
.chip input{
  appearance:none;position:absolute;inset:0;
  width:100%;height:100%;margin:0;cursor:pointer;opacity:0;
}
.chip span{position:relative;z-index:1;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:rgba(197,231,255,.45)}
}
.chip:has(input:checked){border-color:var(--vein);color:var(--vein)}
.chip:has(input:focus-visible){outline:2px solid var(--ice);outline-offset:3px}
.quiz__nav{display:flex;align-items:center;gap:16px;margin-top:12px}
.quiz__nav .cta{width:auto;flex:1;margin-top:0}
.quiz__nav .cta--ghost{flex:none;width:auto}
.quiz__step[data-step="1"] > .cta{width:100%;margin-top:8px}
.hp{position:absolute;left:-9999px}
.f{display:flex;flex-direction:column;gap:6px}
.f span{font-size:13px;color:var(--muted)}
.f input:not([type=checkbox]){
  height:52px;padding:0 14px;
  background:transparent;border:0;border-bottom:1px solid var(--line);font-size:18px;
}
.f input:focus{outline:none;border-bottom-color:var(--ice)}
.f--check{flex-direction:row;align-items:flex-start;gap:12px;min-height:44px}
.f--check input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--ice)}
.f--check span{color:var(--body);font-size:15px;line-height:1.45}
.notice{font-size:13px;line-height:1.45;color:var(--muted)}
.notice a{color:var(--vein);text-decoration:underline;text-underline-offset:3px}
.ok{margin-top:20px;color:#8FCFB0;font-size:18px}

.phone{
  display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 32px;
}
.phone a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;
  border:1px solid var(--line);font-weight:600;
}
.phone a[href^="tel"]{border-color:var(--vein);color:var(--vein)}
.phone a:hover{background:var(--ice);color:var(--ink);border-color:var(--ice)}

.foot{
  position:relative;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  padding:48px var(--gutter) 40px;font-size:13px;color:var(--snow-muted);
  background:var(--snow);
  border-top:0;
}
.foot:has(.foot__who){
  flex-direction:column;align-items:stretch;gap:22px;
}
.foot__who{
  font-size:16px;line-height:1.5;color:var(--snow-body);max-width:42ch;margin:0;
}
.foot__row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
}
.foot a:hover{color:var(--vein)}
.foot__mark{color:var(--vein)}

.pulse-grain.is-off{opacity:0;transition:opacity .45s var(--ease)}
.a11y__btn{
  width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
}
.a11y__panel{
  position:absolute;inset-inline-start:0;bottom:58px;width:min(78vw,272px);
  background:var(--surface);border:1px solid var(--line);padding:1rem;
  display:none;flex-direction:column;gap:.55rem;
}
.a11y__panel[data-open="true"]{display:flex}
.a11y__panel h2{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:.2rem}
.a11y__panel button{
  display:block;width:100%;text-align:start;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--line);
  padding:.7rem .8rem;min-height:44px;
}
.a11y__panel button[aria-pressed="true"]{background:var(--ice);color:var(--ink);border-color:var(--ice)}
.a11y__panel a{display:block;color:var(--muted);font-size:13px;padding-top:.5rem;border-top:1px solid var(--line)}

html.no-motion *,
html.no-motion *::before,
html.no-motion *::after{
  animation:none!important;transition:none!important;scroll-behavior:auto!important
}
@keyframes stone-drift{
  0%,100%{transform:scale(1.05) translate3d(-0.9%, -0.6%, 0)}
  50%    {transform:scale(1.09) translate3d(0.9%,  0.7%, 0)}
}
html:not(.no-motion) .hero__bridge img,
html:not(.no-motion) .pins__stone,
html:not(.no-motion) .folio__stone,
html:not(.no-motion) .lead__stone{
  animation:stone-drift 26s ease-in-out infinite;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .hero__bridge img,
  .pins__stone,
  .folio__stone,
  .lead__stone{animation:none;transform:none;will-change:auto}
}
html.no-motion .pins__arrow{animation:none}
html.no-motion .pins__stone,
html.no-motion .folio__stone,
html.no-motion .lead__stone,
html.no-motion .hero__bridge img{transform:none;animation:none}
html.no-motion .pillar,
html.no-motion .pillar__num,
html.no-motion .pillar__fg{opacity:1;visibility:visible;transform:none}
html.no-motion .folio__stage{perspective:none;height:auto;min-height:0;padding-bottom:14%}
html.no-motion .folio__slab{bottom:0;width:min(100%, 840px)}
html.no-motion .folio__ring{position:relative;inset:auto;transform:none!important}
html.no-motion .folio__mac{
  position:relative;left:auto;top:auto;bottom:auto;transform:none;
  width:min(92vw, 560px);height:auto;margin:0 auto 8%;
  opacity:1;
}
html.no-motion .folio__mac:not(.is-front){display:none}
@media (prefers-reduced-motion: reduce){
  .folio__mac:not(.is-front){display:none}
}
html.no-motion .folio__mac img{height:auto}
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
html.text-lg{font-size:118%}
html.text-xl{font-size:134%}

.page{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:96px var(--gutter) 72px;max-width:52rem;
}
.page > *{position:relative;z-index:3}
.page h2{font-size:22px;font-weight:600;margin:32px 0 10px}
.page > p{font-size:18px;line-height:1.6;color:var(--body);max-width:42ch;margin-bottom:16px}
.page .cta{margin-top:28px}
.get--inpage{padding:48px 0;background:transparent;border:0}
.page .beats{margin:36px 0}
.page .hero__shot{
  order:0;height:auto;max-height:none;min-height:0;
  aspect-ratio:1600/892;margin:0 0 36px;border:1px solid var(--line);
}

.doc{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:96px var(--gutter) 64px;max-width:40rem;
}
.doc > *{position:relative;z-index:3}
.doc h1{font-size:32px;font-weight:400;max-width:16ch;margin-bottom:16px}
.doc .lede{font-size:18px;max-width:none;margin-bottom:36px}
.doc h2{font-size:20px;font-weight:600;margin:32px 0 10px}
.doc p,.doc li{font-size:17px;line-height:1.6;color:var(--body);margin-bottom:12px}
.doc ul{padding-inline-start:1.2rem;margin-bottom:16px}
.doc a{color:var(--vein);text-decoration:underline;text-underline-offset:3px}
.doc__meta{font-size:13px;color:var(--muted);margin-top:40px}

@keyframes grain{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-2%,1%,0)}
}
@keyframes glowshift{
  from{opacity:.72;transform:scale(1)}
  to{opacity:1;transform:scale(1.08)}
}
@keyframes rise{
  to{opacity:1;transform:none}
}
#studio,#demo,#work,#lead,#method{scroll-margin-top:72px}
.reveal{
  opacity:0;
  transform:translateY(16px);
  animation:rise .32s var(--ease) forwards;
}
html.no-motion .reveal{opacity:1;transform:none;animation:none}

@media (min-width:900px){
  :root{--gutter:56px}
  .nav__links{gap:22px;font-size:14px}
  .hero{
    grid-template-columns:.92fr 1.18fr;
    min-height:92svh;
    background:var(--paper);
  }
  .hero__copy{
    justify-content:center;
    padding:72px var(--gutter) 56px 8px;
    grid-column:1;
    grid-row:1;
  }
  .hero h1{font-size:86px}
  .hero__visual{
    min-height:92svh;
    grid-column:1 / -1;
    grid-row:1;
  }
  .hero__bridge{grid-column:1 / -1;grid-row:1}
  .hero__visual img{
    max-width:64%;
    inset-inline-end:-2%;
    object-position:center bottom;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .folio{padding:36px 0 20vh}
  .folio__now{font-size:18px}
  .folio__stage{height:68svh;min-height:480px}
  .folio__slab{width:min(100%, 1360px);bottom:0}
  .folio__mac{
    width:min(42vw, 440px);
  }
  .folio__names button{font-size:15px}
  .show{min-height:100svh;align-items:start}
  .show__shot img{object-position:12% 55%}
  .show::before{
    background:linear-gradient(to left,
      rgb(5,7,13) 0%,
      rgb(5,7,13) 18%,
      rgba(5,7,13,.55) 34%,
      transparent 58%);
  }
  .show .deck{
    width:min(100%, 440px);
    margin-inline-end:auto;
    margin-top:0;
    align-self:start;
  }
  .show__copy{padding:20px 24px 4px}
  .show__copy h2{font-size:36px}
  .yn{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:16px}
  .work{grid-template-columns:1fr;max-width:44rem}
  .work li:nth-child(odd),.work li:nth-child(even){
    padding-inline:0;border-inline-start:0;
  }
  .lead{
    grid-template-columns:1.1fr .9fr;
    gap:72px;
    align-items:end;
    padding:calc(96px + 8vh) var(--gutter) 96px;
  }
  .lead .ok{grid-column:2}
  .pain__grid{display:grid;grid-template-columns:1fr 1fr}
  .pain article{padding:64px 0;border-bottom:0;border-top:1px solid var(--line)}
  .pain article:last-child{padding-inline-start:48px;border-inline-start:1px solid var(--line)}
  .pain article:first-child{padding-inline-end:48px}
  .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
  .beats{grid-template-columns:1fr 1fr 1fr;gap:40px}
  .get__grid{grid-template-columns:1fr 1fr;gap:64px}
  .page .hero__shot{max-width:52rem}
}

@media (hover:none),(pointer:coarse){
  .f--check input{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  .cta{transition:none}
  .hero__breath,.hero__glow,.hero__visual::after,.pins__arrow,
  .hero__bridge img,.pins__stone,.folio__stone,.lead__stone{animation:none}
  .reveal{opacity:1;transform:none;animation:none}
  html{scroll-behavior:auto}
}

@media (max-width:767px){
  /* חמישה עמודים בשורה = 54px לעמוד. במובייל הקולונדה נשכבת. */
  .colonnade{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:12px;
    padding-bottom:16px;
  }
  .colonnade__ground{display:none}
  .col{
    --ch:1;
    max-width:none;
    height:auto;
    min-height:104px;
    display:flex;
    align-items:stretch;
    border-radius:4px;
    overflow:hidden;
    background:linear-gradient(90deg, rgba(3,6,13,.88) 0%, rgba(3,6,13,.60) 100%);
  }
  .col__shaft{
    position:relative;
    inset:auto;
    flex:0 0 58px;
    border-radius:0;
  }
  .col__cap{
    inset:0 auto 0 0;
    width:4px;height:auto;
    background:linear-gradient(180deg,
      rgba(220,240,255,.85) 0%,
      rgba(150,200,245,.30) 60%,
      rgba(2,5,11,0) 100%);
    box-shadow:0 0 18px rgba(120,190,255,.36);
  }
  .col__text{
    position:relative;
    inset:auto;
    flex:1 1 auto;
    justify-content:center;
    gap:5px;
    padding:14px 16px;
  }
  .col__text::before{display:none}
  .col__word{font-size:26px}
  .col__line{font-size:13px}
}

/* ── השבירה: מקטע השיטה הוא חדר אחר ────────────────────────────
   כל האתר כחול. כאן האבן חמה, האור ענברי, והעין מקבלת הפוגה.
   אותו קובץ שיש — רק אור אחר עליו. */

.pins{
  --warm:#C5E7FF;      /* --ice — אותו לבן-בהיר של הקישורים */
  --warm-hi:#EDF7FF;
  --warm-lo:#7FB4E0;
}
.pins__stone{
  /* החדר האחר: אבן מונוכרום עם ורידים לבנים, לא שיש כחול */
  filter:grayscale(1) brightness(.56) contrast(1.30);
}
.pins .pins__k{color:var(--warm-hi)}
.pins .pins__hi{
  background:linear-gradient(90deg, var(--warm-hi), var(--warm), var(--warm-lo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pins .colonnade__ground{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(197,231,255,.20) 12%,
    rgba(237,247,255,.48) 50%,
    rgba(197,231,255,.20) 88%,
    transparent 100%);
}
.pins .col__cap{
  background:linear-gradient(180deg,
    rgba(240,250,255,.96) 0%,
    rgba(197,231,255,.50) 30%,
    rgba(3,6,13,0) 100%);
  box-shadow:0 0 32px rgba(160,210,255,.44);
}
.pins .col__num{color:var(--warm-hi);opacity:.86}
.pins .col__side{
  /* המרקם על העמוד נשאר קר — הניגוד בין העמוד לחדר הוא מה שעובד */
  filter:saturate(.18) contrast(.72) brightness(1.1);
}
.pins .col__face{
  background:linear-gradient(90deg,
    #04060b   0%,
    #080d15  11%,
    #131c26  27%,
    #26333f  42%,
    #3a4753  49%,
    #202a34  60%,
    #0b1017  79%,
    #04060b 100%);
}

/* ── המעבר בין החדרים ──────────────────────────────────────────
   ההירו כחול ובהיר, החדר הבא חם וכהה. בלי זה נוצר קו אופקי חד.
   הפתרון: ההירו נגמר בחושך, והחדר הבא מתחיל בחושך. */


/* ── מפרקי החדרים ──────────────────────────────────────────────
   כל מקטע הוא תמונה על --paper שחור. מיסוך הקצוות גורם לכל חדר
   להיגמר ולהתחיל בחושך, וכך אין אף קו אופקי בין מקטעים.
   מדוד: 4 גבולות, הקפיצה הגדולה הייתה 0.115 ⟶ מתחת ל-0.02. */




/* מפרקי החדרים — שכבות-על במקום מסכות.
   מסכה על תמונת מסך-מלא עלתה 400ms רסטור. גרדיאנט על אלמנט ריק הוא חינם. */
.lead::before{
  mix-blend-mode:normal;
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(140px, 22vh, 280px);
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgb(5,7,13) 0%,
    rgba(5,7,13,.86) 26%,
    rgba(5,7,13,.42) 60%,
    rgba(5,7,13,0) 100%);
}
.folio::after{
  mix-blend-mode:normal;
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:clamp(140px, 22vh, 280px);
  z-index:2;
  pointer-events:none;
  background:linear-gradient(0deg,
    rgb(5,7,13) 0%,
    rgba(5,7,13,.86) 26%,
    rgba(5,7,13,.42) 60%,
    rgba(5,7,13,0) 100%);
}

/* ── חיבורי אור בין המקטעים ─────────────────────────────────────
   העיצוב המקורי כבר עשה את זה ב-.pins::before בלבד. כאן זה נפרס
   על כל גבול: כל מקטע נפתח בהבזק לבן שדועך, ולכן אין קו אופקי.
   mix-blend-mode:screen — אור שנוסף, לא צבע שנמרח. */
.folio::before,
.lead::before{
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.93) 0,
      rgba(253,254,255,.78) 5vh,
      rgba(250,253,255,.52) 13vh,
      rgba(244,250,254,.28) 24vh,
      rgba(236,246,253,.11) 36vh,
      transparent 52vh),
    rgba(250,251,253,.2);
}
/* גם בתחתית — שני חצאי-הבזק יוצרים יחד גשר אחד רציף על התפר */
@media (min-width:768px){
.hero::after,
.pins::after,
.folio::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:52vh;
  z-index:2;
  pointer-events:none;
  /* דסקטופ בלבד. על מובייל חנוק פי 4 השכבות האלה קפצו ל-1,926ms
     בפריים הגרוע — מעל תקציב 22ms ב-FREEZE.md. */
  mix-blend-mode:screen;
  background:linear-gradient(to top,
    rgba(255,255,255,.93) 0,
    rgba(253,254,255,.78) 10%,
    rgba(250,253,255,.52) 25%,
    rgba(244,250,254,.28) 46%,
    rgba(236,246,253,.11) 69%,
    transparent 100%);
}
}

/* ── המסך שמחכה לשם שלכם ───────────────────────────────────────
   הטופס לא מרחף על השיש — הוא יושב בתוך מסך.
   (טופס בפרספקטיבה של הצילום נמדד כלא-קריא, ולכן המסך נבנה, לא מומפה.) */
.screen{
  position:relative;
  width:100%;
  max-width:540px;
}
.screen__glow{
  position:absolute;
  inset:-12% -9% -20%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(52% 52% at 50% 56%,
    rgba(61,126,234,.44) 0%,
    rgba(61,126,234,.16) 46%,
    transparent 100%);
  filter:blur(16px);
}
.screen__bezel{
  position:relative;
  z-index:1;
  border-radius:13px;
  overflow:hidden;
  background:linear-gradient(180deg,#141c28 0%,#0b111a 24%,#06090f 100%);
  box-shadow:
    0 0 0 1px rgba(197,231,255,.17),
    inset 0 1px 0 rgba(255,255,255,.15),
    0 30px 64px rgba(0,0,0,.62);
}
.screen__bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 15px;
  border-bottom:1px solid rgba(197,231,255,.11);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0));
}
.screen__dots{display:flex;gap:6px;flex:none}
.screen__dots i{width:9px;height:9px;border-radius:50%;background:rgba(197,231,255,.20)}
.screen__url{
  flex:1;min-width:0;
  text-align:center;
  font-size:13px;line-height:1.2;
  color:var(--muted);
  background:rgba(3,6,13,.62);
  border:1px solid rgba(197,231,255,.10);
  border-radius:999px;
  padding:6px 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.screen__url[data-filled]{color:var(--ice);border-color:rgba(197,231,255,.28)}
.screen__foot{
  display:block;margin:0 auto;
  width:24%;height:11px;
  border-radius:0 0 9px 9px;
  background:linear-gradient(180deg,#121a24,#070b11);
  box-shadow:0 12px 26px rgba(0,0,0,.55);
}
.screen .form.quiz{
  max-width:none;
  padding:24px 22px 26px;
  gap:14px;
}

/* השדות היו שקופים עם קו תחתון — בלתי נראים על השיש. */
.quiz__step > input:not([type=radio]):not([type=checkbox]),
.f input:not([type=checkbox]){
  height:50px;
  padding:0 14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(197,231,255,.17);
  border-radius:8px;
  color:var(--ink);
  font-size:17px;
}
.quiz__step > input:not([type=radio]):not([type=checkbox]):focus,
.f input:not([type=checkbox]):focus{
  outline:none;
  border-color:var(--ice);
  background:rgba(197,231,255,.075);
}
.screen ::placeholder{color:rgba(154,163,181,.78)}
.screen .chip{
  border-radius:8px;
  border-color:rgba(197,231,255,.17);
  background:rgba(255,255,255,.035);
}
.screen .chip:hover{border-color:rgba(197,231,255,.34)}
.screen .chip:has(input:checked){
  border-color:var(--ice);
  background:rgba(197,231,255,.11);
}
.screen .quiz__bar{color:var(--body)}
.screen .notice{font-size:12px;line-height:1.45;color:var(--muted)}
@media (max-width:767px){
  .screen{max-width:none}
  .screen .form.quiz{padding:20px 16px 22px}
}

/* תיבת האישור הייתה ריבוע לבן ברירת-מחדל על מסך כהה */
.screen .f--check input{
  appearance:none;
  width:20px;height:20px;flex:none;margin-top:3px;
  border:1px solid rgba(197,231,255,.34);
  border-radius:5px;
  background:rgba(255,255,255,.05);
  display:grid;place-content:center;
  cursor:pointer;
}
.screen .f--check input:checked{
  background:var(--ice);
  border-color:var(--ice);
}
.screen .f--check input:checked::after{
  content:'';
  width:11px;height:6px;
  border:2px solid var(--paper);
  border-top:0;border-inline-end:0;
  transform:translateY(-1px) rotate(-45deg);
}
.screen .f--check input:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.screen .notice a{color:var(--ice);text-decoration:underline;text-underline-offset:3px}

.pins::after{
  /* וילון תחתון דטרמיניסטי. המסכה על התמונה לא הספיקה — האבן בהירה
     דווקא בתחתית, ורמז הגלילה נמדד 1.31:1 מולה. */
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:clamp(180px, 30vh, 380px);
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,7,13,0)   0%,
    rgba(5,7,13,.52) 30%,
    rgba(5,7,13,.90) 62%,
    rgba(5,7,13,1)   100%);
}
.pins .pins__hint{color:var(--body)}

/* ── מפרק אחד בלבד: פוליו ───────────────────────────────────────
   ⛔ הגרסה הקודמת שמה שכבות גם על .show ו-.lead ב-z-index:2 —
   ול-.lead__copy ול-.show__miss אין z-index, אז השכבות כיסו תוכן.
   התפרים folio→show ו-show→lead היו ⚠ עוד לפני שנגעתי; לא שווה את הסיכון. */
.folio::before,
.folio::after{
  content:'';
  position:absolute;
  left:0; right:0;
  height:clamp(120px, 20vh, 260px);
  z-index:1;            /* מעל תמונת הרקע (0), מתחת לתוכן (3) */
  pointer-events:none;
}
.folio::before{
  top:0;
  background:linear-gradient(180deg,
    rgba(5,7,13,.98) 0%, rgba(5,7,13,.68) 38%, rgba(5,7,13,.26) 70%, rgba(5,7,13,0) 100%);
}
.folio::after{
  bottom:0;
  background:linear-gradient(0deg,
    rgba(5,7,13,.98) 0%, rgba(5,7,13,.68) 38%, rgba(5,7,13,.26) 70%, rgba(5,7,13,0) 100%);
}

/* ── הפוטר ─────────────────────────────────────────────────────
   היה גוש לבן בלי עיצוב בסוף אתר כהה. עכשיו הוא סוגר את האתר
   באותו חושך, והטלפון והוואטסאפ הם כפתורים — זו נקודת התפיסה האחרונה. */
.foot{
  background:var(--paper);
  color:var(--muted);
  border-top:1px solid rgba(197,231,255,.11);
  padding:52px var(--gutter) 40px;
  gap:26px;
}
.foot::before{
  content:'';
  position:absolute;
  inset:auto 0 100% 0;
  height:120px;
  pointer-events:none;
  background:linear-gradient(0deg, rgba(5,7,13,.9) 0%, rgba(5,7,13,0) 100%);
}
.foot__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:26px 40px;
}
.foot__brand{display:flex;flex-direction:column;gap:12px;min-width:0}
.foot__mark{
  font-size:20px;font-weight:600;color:var(--ink);
  letter-spacing:.01em;
}
.foot__who{
  font-size:15px;line-height:1.55;color:var(--body);
  max-width:44ch;margin:0;
}
.foot__act{display:flex;flex-wrap:wrap;gap:12px}
.foot__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 22px;
  border:1px solid rgba(197,231,255,.30);
  border-radius:9px;
  font-size:15px;font-weight:500;
  color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.foot__btn:hover{border-color:var(--ice);background:rgba(197,231,255,.08)}
.foot__btn--solid{
  background:var(--ice);border-color:var(--ice);color:var(--paper);font-weight:600;
}
.foot__btn--solid:hover{background:#DCEFFF;border-color:#DCEFFF}
.foot__row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding-top:22px;
  border-top:1px solid rgba(197,231,255,.08);
  font-size:13px;
}
.foot__row a{color:var(--muted)}
.foot__row a:hover{color:var(--ice)}
.foot__c{color:var(--muted);margin-inline-start:auto}

/* היררכיה בטופס: "המשך" הוא מעבר, "דמו חינם" הוא ההתחייבות */
.screen .quiz [data-next]{
  background:transparent;
  border:1px solid rgba(197,231,255,.32);
  color:var(--ink);
}
.screen .quiz [data-next]:hover{border-color:var(--ice);background:rgba(197,231,255,.08)}
@media (max-width:767px){
  .foot__top{flex-direction:column;align-items:stretch}
  .foot__act{width:100%}
  .foot__btn{flex:1 1 46%}
  .foot__c{margin-inline-start:0;width:100%}
}

/* ── ההירו: בריכת אור, לא חצי מסך ───────────────────────────────
   ⛔ הגרסה הקודמת חתכה מסכה אנכית — יצאו שני חצאים עם קו ביניהם.
   כאן האבן היא הילה רדיאלית סביב המחשב שנמסה לכל הכיוונים,
   ובעוצמה נמוכה — כך שהצד ריק אבל הכל נשאר גוף אחד.
   הרדיוסים מחושבים כך שהג׳רדיאנט מתאפס לפני קצה הקופסה. */
@media (min-width:768px){
  .hero__bridge{
    inset:0;
    width:auto;
    right:0;
  }
  .hero__bridge img{
    opacity:.56;
    -webkit-mask-image:radial-gradient(64% 59% at 30.5% 55.5%,
      #000 0%,
      rgba(0,0,0,.85) 23%,
      rgba(0,0,0,.51) 45%,
      rgba(0,0,0,.21) 67%,
      rgba(0,0,0,.055) 84%,
      transparent 100%);
    mask-image:radial-gradient(64% 59% at 30.5% 55.5%,
      #000 0%,
      rgba(0,0,0,.85) 23%,
      rgba(0,0,0,.51) 45%,
      rgba(0,0,0,.21) 67%,
      rgba(0,0,0,.055) 84%,
      transparent 100%);
  }
}

/* ── הטופס על מסך המחשב ────────────────────────────────────────
   ההטלה מחושבת ב-lib/deck.js מארבע פינות המסך בצילום.
   מתחת ל-980px, ובמצב הפחתת תנועה, זה נופל למצב שטוח וקריא. */
.deck{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.deck__fit{
  position:absolute;
  top:0;
  left:0;right:auto;
  pointer-events:auto;
  will-change:transform;
}
.deck .screen{max-width:none;width:100%;height:100%}
.deck .screen__glow{display:none}
.deck .screen__foot{display:none}
.deck .screen__bezel{
  height:100%;
  overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:0;
  background:linear-gradient(180deg, rgba(8,14,22,.90) 0%, rgba(4,7,12,.94) 100%);
  box-shadow:inset 0 0 0 1px rgba(197,231,255,.10);
}
.deck .form.quiz{flex:1;justify-content:center;padding:26px 40px 30px;gap:16px;overflow:hidden}

/* ההטלה מקטינה — הטיפוגרפיה גדלה כדי לפצות */
.deck .screen__bar{padding:16px 22px}
.deck .screen__url{font-size:19px;padding:9px 20px}
.deck .screen__dots i{width:13px;height:13px}
.deck .quiz__bar{font-size:18px}
.deck .quiz legend{font-size:38px;margin-bottom:22px;max-width:none}
.deck .quiz__ask{font-size:30px;margin-bottom:14px;max-width:none}
.deck .quiz__step > input:not([type=radio]):not([type=checkbox]),
.deck .f input:not([type=checkbox]){height:66px;font-size:23px;padding:0 20px;border-radius:10px}
.deck .chip{min-height:64px;font-size:21px;padding:0 20px;border-radius:10px}
.deck .f span{font-size:18px}
.deck .form .cta{min-height:64px;font-size:21px;border-radius:11px}
.deck .notice{font-size:16px}
.deck .f--check span{font-size:18px}
.deck .f--check input{width:26px;height:26px}
.deck .quiz__ticks{height:3px}
.deck .quiz__ticks i{height:3px}

/* המצב השטוח — מתחת ל-980px או בהפחתת תנועה */
.deck[data-flat]{
  position:relative;
  inset:auto;
  z-index:4;
  pointer-events:auto;
  margin-top:0;
  width:min(100%, 540px);
  align-self:center;
}
.deck[data-flat] .deck__fit{
  position:relative;
  transform:none!important;
  width:auto!important;height:auto!important;
}
.deck[data-flat] .screen{height:auto;max-width:none}
.deck[data-flat] .screen__glow{display:block}
.deck[data-flat] .screen__foot{display:block}
.deck[data-flat] .screen__bezel{
  height:auto;border-radius:13px;
  background:linear-gradient(180deg,#141c28 0%,#0b111a 24%,#06090f 100%);
  box-shadow:0 0 0 1px rgba(197,231,255,.17), inset 0 1px 0 rgba(255,255,255,.15), 0 30px 64px rgba(0,0,0,.62);
}
.deck[data-flat] .form.quiz{padding:8px 22px 22px;gap:12px}
.deck[data-flat] .screen__bar{padding:11px 15px}
.deck[data-flat] .screen__url{font-size:13px;padding:6px 14px}
.deck[data-flat] .screen__dots i{width:9px;height:9px}
.deck[data-flat] .quiz__bar{font-size:13px}
.deck[data-flat] .quiz legend,
.deck[data-flat] .quiz__ask{font-size:clamp(22px,3.6vw,28px);margin-bottom:18px}
.deck[data-flat] .quiz__step > input:not([type=radio]):not([type=checkbox]),
.deck[data-flat] .f input:not([type=checkbox]){height:50px;font-size:17px}
.deck[data-flat] .chip{min-height:52px;font-size:16px}
.deck[data-flat] .form .cta{min-height:48px;font-size:16px}
.deck[data-flat] .notice{font-size:12px}

/* ── ריסון גשר האור ────────────────────────────────────────────
   שני הבזקים של 52vh ב-93% לבן נפגשים על כל תפר ויוצרים יחד
   כמעט שני מסכים של לבן. הרעיון נשאר, הסלאב יורד. */
.folio::before,
.lead::before{
  height:clamp(90px, 15vh, 210px);
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.40) 0,
      rgba(252,254,255,.24) 26%,
      rgba(246,251,255,.11) 55%,
      transparent 100%),
    rgba(250,251,253,.06);
}
.hero::after,
.pins::after,
.folio::after{
  height:clamp(90px, 15vh, 210px);
  background:linear-gradient(to top,
    rgba(255,255,255,.40) 0,
    rgba(252,254,255,.24) 26%,
    rgba(246,251,255,.11) 55%,
    transparent 100%);
}

/* המדרגה שהסלאב הלבן הסתיר: המקטע הקודם נגמר כהה, השיש כאן מתחיל בהיר.
   ::before תפוס בשביל הבזק האור, אז הרמפה הכהה יושבת ב-::after. */
.lead::after{
  content:'';
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(150px, 24vh, 320px);
  z-index:1;
  pointer-events:none;
  mix-blend-mode:normal;
  background:linear-gradient(180deg,
    rgb(5,7,13)      0%,
    rgba(5,7,13,.86) 24%,
    rgba(5,7,13,.48) 56%,
    rgba(5,7,13,.16) 80%,
    rgba(5,7,13,0)  100%);
}

/* נעילה: הדמו לא מקבל שיש שני ולא הבזק לבן — המחשב הוא התמונה. */
.show::after{
  content:none;
  display:none;
  background:none;
}

/* ── הסגירה ────────────────────────────────────────────────────
   הטופס עלה למסך המחשב, אז המקטע הזה נשאר עם עמודה ריקה.
   הטקסט הסוגר תופס עכשיו את המקום שהכרטיס ישב בו. */
@media (min-width:900px){
  .lead{
    grid-template-columns:1fr;
    justify-items:center;
    align-items:center;
    padding:calc(84px + 7vh) var(--gutter) 92px;
  }
  .lead .ok{grid-column:1}
}
.lead__copy{
  max-width:44rem;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
}
.lead__copy > *{margin:0}
.lead__line{
  font-size:clamp(30px, 4.6vw, 62px);
  line-height:1.08;
  font-stretch:80%;
}
.lead__copy > p[data-i18n="leadP"]{
  font-size:clamp(15px, 1.5vw, 18px);
  color:var(--body);
  max-width:34ch;
}
.lead__call{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:12px;
  margin-top:10px;
}
.lead__call > span[data-i18n="callOr"]{
  width:100%;
  font-size:13px;color:var(--muted);
  margin-bottom:2px;
}
.lead__call > span[aria-hidden]{display:none}
.lead__call a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;
  border:1px solid rgba(197,231,255,.30);
  border-radius:9px;
  font-size:16px;font-weight:500;
  color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.lead__call a:hover{border-color:var(--ice);background:rgba(197,231,255,.08)}
.lead__call a[href^="tel:"]{
  background:var(--ice);border-color:var(--ice);color:var(--paper);font-weight:600;
}
.lead__call a[href^="tel:"]:hover{background:#DCEFFF;border-color:#DCEFFF}

/* --vein ב-13px לא עובר על שיש בהיר. נפל כאן בפעם השלישית. */
.lead .hero__kicker{color:var(--ice)}

/* ── הסגירה לצד המחשב ──────────────────────────────────────────
   היה מקטע נפרד מתחת. עכשיו רגע אחד: מחשב עם טופס, והטקסט לצידו. */
.show__close{
  position:relative;
  z-index:5;
  width:100%;
  margin-top:26px;
}
@media (min-width:900px){
  .show__close{
    position:absolute;
    top:50%;
    right:var(--gutter);
    transform:translateY(-50%);
    width:min(29%, 380px);
    margin-top:0;
  }
}
.show__close .lead__copy{
  max-width:none;
  text-align:start;
  align-items:flex-start;
}
.show__close .lead__line{
  font-size:clamp(28px, 3.1vw, 48px);
  line-height:1.08;
}
.show__close .lead__call{justify-content:flex-start}
.show__close .lead__call > span[data-i18n="callOr"]{text-align:start}
.show__close .ok{margin-top:18px}

/* ── אור בין העמודים ───────────────────────────────────────────
   כל עמוד פולט אור לצדדים. במפגש בין שניים הרווח נדלק,
   והקולונדה נקראת כיחידה אחת במקום חמישה חלקים. */
.col{ isolation:auto; }
.col::after{
  content:'';
  position:absolute;
  inset:2% -58% 5% -58%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(42% 46% at 50% 44%,
      rgba(255,255,255,.66) 0%,
      rgba(252,254,255,.34) 34%,
      rgba(246,251,255,.12) 66%,
      transparent 100%);
}
/* קו אור דק בדיוק על קו המפגש, שמחבר כותרת לכותרת */
.colonnade::after{
  content:'';
  position:absolute;
  left:0;right:0;
  top:0;height:100%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.10) 26%,
    rgba(255,255,255,.16) 40%,
    rgba(255,255,255,.06) 62%,
    transparent 84%);
  mix-blend-mode:screen;
}

/* קצוות העמוד נדלקים — בלי זה המפגש בין העמוד לאור נשאר קו חד */
.col__shaft::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(90deg,
    rgba(255,255,255,.52) 0%,
    rgba(255,255,255,.20) 5%,
    rgba(255,255,255,.04) 13%,
    transparent 26%,
    transparent 74%,
    rgba(255,255,255,.04) 87%,
    rgba(255,255,255,.20) 95%,
    rgba(255,255,255,.52) 100%);
}

/* כפתור וואטסאפ — אייקון + טקסט. הטופס כבר לא פותח וואטסאפ,
   אז זה המקום היחיד שממנו נכנסים לשיחה. */
.wa-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:9px;
}
.wa-btn .wa-i{
  flex:none;
  color:#25D366;
}
.wa-btn:hover .wa-i{color:#3ceb80}

/* ── הפעימה הבהירה ─────────────────────────────────────────────
   נמדד: חמשת המקטעים ישבו על 0.11–0.33 בהירות, בזמן שחציון השדה
   (13 אתרי סטודיו בקורפוס) הוא 0.49. לא חסרו גוונים — הקורפוס אומר
   שחציון האתרים משתמש בגוון אחד. חסר היה **טווח**.
   כאן נפתח חדר מואר, ושאר האתר נשאר כהה. */
.pins__stone{
  filter:grayscale(1) brightness(1.42) contrast(0.86);
}
/* חדר בהיר ⟵ דיו כהה. אחרת הכותרת נעלמת. */
.pins{
  --warm:#4A5568;
  --warm-hi:#2A3444;
  --warm-lo:#6B7688;
  color:var(--snow-ink);
}
.pins .pins__k{color:#333E4F}
.pins .pins__hi{
  background:none;
  -webkit-background-clip:border-box;background-clip:border-box;
  color:#1B4FD8;
}
.pins .pins__anchor h2{color:var(--snow-ink)}
.pins .pins__p{color:var(--snow-body)}
.pins .pins__hint,
.pins .pins__hint span{color:#5A6678}
.pins .pins__arrow{color:#5A6678}
/* הווילון מתחת לכותרת היה כהה — על חדר בהיר הוא כתם */
.pins__anchor::before{
  background:radial-gradient(50% 50% at 50% 47%,
    rgba(250,251,253,.92) 0%,
    rgba(250,251,253,.72) 34%,
    rgba(250,251,253,.34) 64%,
    rgba(250,251,253,0) 100%);
}
/* בחדר מואר עמוד לא פולט אור — הוא מטיל צל. */
.col::after{
  background:radial-gradient(44% 48% at 50% 46%,
    rgba(12,18,28,.34) 0%,
    rgba(12,18,28,.16) 44%,
    rgba(12,18,28,.05) 72%,
    transparent 100%);
}
.col__shaft::after{
  mix-blend-mode:normal;
  background:linear-gradient(90deg,
    rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.10) 6%,
    transparent 20%,
    transparent 80%,
    rgba(255,255,255,.10) 94%,
    rgba(255,255,255,.30) 100%);
}
.colonnade::after{display:none}
.colonnade__ground{
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(20,28,40,.14) 12%,
    rgba(20,28,40,.30) 50%,
    rgba(20,28,40,.14) 88%,
    transparent 100%);
}

/* ההיפוך לחדר בהיר היה גורף מדי. העמודים עצמם נשארו כהים,
   אז טקסט שיושב עליהם חייב להישאר בהיר. נמדד: 1.38:1 ⟵ נכשל. */
.pins .col__num{color:var(--ice);opacity:.9}
.pins .col__word{color:var(--ink)}
.pins .col__line{color:var(--body)}
/* רמז הגלילה יושב על האבן הבהירה, לא על עמוד — הוא חייב כהה. נמדד 1.09:1. */
.pins .pins__hint,
.pins .pins__hint span,
.pins .pins__hint svg{color:#111925}

/* האבן מתחת לרמז מגוונת — שינוי צבע לבדו הגיע רק ל-3.22:1.
   רקע רך מבטיח את הניגודיות בלי קשר למה שמתחת. */
.pins .pins__hint{
  position:relative;
  align-self:center;
  padding:8px 20px;
  border-radius:999px;
  isolation:isolate;
}
.pins .pins__hint::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(250,251,253,.94) 0%,
    rgba(250,251,253,.80) 46%,
    rgba(250,251,253,.34) 78%,
    rgba(250,251,253,0) 100%);
}

/* ── המעברים סביב החדר המואר ────────────────────────────────────
   הפעימה הבהירה הפכה את גשרי האור הלבנים למזיקים: הם מבהירים
   בדיוק במקום שצריך להחשיך. נמדד folio→show 0.192 — מצוק.
   כאן: כל חדר נכנס ויוצא דרך חושך, וזה גם מה שמפריד ביניהם. */
.pins::after,
.folio::before,
.folio::after,
.show::before{
  content:'';
  position:absolute;
  left:0;right:0;
  height:clamp(140px, 22vh, 300px);
  z-index:2;
  pointer-events:none;
  mix-blend-mode:normal;
}
.pins::after,
.folio::after{
  top:auto;bottom:0;
  background:linear-gradient(0deg,
    rgb(5,7,13)      0%,
    rgba(5,7,13,.88) 26%,
    rgba(5,7,13,.50) 58%,
    rgba(5,7,13,.16) 82%,
    rgba(5,7,13,0)  100%);
}
.folio::before,
.show::before{
  top:0;bottom:auto;
  background:linear-gradient(180deg,
    rgb(5,7,13)      0%,
    rgba(5,7,13,.88) 26%,
    rgba(5,7,13,.50) 58%,
    rgba(5,7,13,.16) 82%,
    rgba(5,7,13,0)  100%);
}

/* ── מפרק אור בין כל שני מקטעים ─────────────────────────────────
   לא רמפה כהה ולא חתך: כל גבול נפתח בהבזק לבן שדועך לשני הכיוונים.
   שני חצאים נפגשים על התפר ויוצרים גשר אחד רציף.
   ⚠ הכיול קריטי — לבן חזק מדי יוצר סלאב, חלש מדי משאיר קו. */
.hero::after,
.pins::before,
.pins::after,
.folio::before,
.folio::after,
.show::before,
.show::after,
.lead::before{
  content:'';
  position:absolute;
  left:0;right:0;
  height:clamp(120px, 19vh, 260px);
  z-index:2;
  pointer-events:none;
  mix-blend-mode:normal;
}
/* חצי עליון של המפרק — יושב בתחתית המקטע שנגמר */
.hero::after,
.pins::after,
.folio::after,
.show::after{
  top:auto;bottom:0;
  background:linear-gradient(0deg,
    rgba(255,255,255,.62) 0%,
    rgba(252,254,255,.40) 22%,
    rgba(248,252,255,.20) 48%,
    rgba(244,250,255,.07) 74%,
    rgba(244,250,255,0) 100%);
}
/* חצי תחתון — יושב בראש המקטע שמתחיל */
.pins::before,
.folio::before,
.show::before,
.lead::before{
  top:0;bottom:auto;
  background:linear-gradient(180deg,
    rgba(255,255,255,.62) 0%,
    rgba(252,254,255,.40) 22%,
    rgba(248,252,255,.20) 48%,
    rgba(244,250,255,.07) 74%,
    rgba(244,250,255,0) 100%);
}

/* folio→show: החיזוק שניסיתי העלה את השיא ל-0.535 — בהיר יותר
   מהחדר המואר עצמו. הפרופיל הראה שזו גבעה חלקה ולא מדרגה, אז
   המדד שלי שיקר. רק מאריכים מעט, בלי להגביר. */
.folio::after,
.show::before{
  height:clamp(140px, 22vh, 300px);
}

/* הקו החד באמצע הגשר: מעל הגבול שיש בהיר, מתחתיו רקע שחור —
   ואותה שכבת לבן על שני בסיסים שונים נותנת תוצאה שונה.
   הפתרון: הלבן מגיע כמעט לאטימות מלאה **בנקודת המפגש עצמה**,
   כך ששני הצדדים מתכנסים לאותו ערך, ואז דועך מהר. */
.hero::after,
.pins::after,
.folio::after,
.show::after{
  background:linear-gradient(0deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.72) 7%,
    rgba(254,255,255,.48) 20%,
    rgba(250,253,255,.26) 40%,
    rgba(246,251,255,.11) 64%,
    rgba(244,250,255,.03) 84%,
    rgba(244,250,255,0) 100%);
}
.pins::before,
.folio::before,
.show::before,
.lead::before{
  background:linear-gradient(180deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.72) 7%,
    rgba(254,255,255,.48) 20%,
    rgba(250,253,255,.26) 40%,
    rgba(246,251,255,.11) 64%,
    rgba(244,250,255,.03) 84%,
    rgba(244,250,255,0) 100%);
}

/* השיש מימין הוא חלק מהצילום, לא רקע. הבלוק הסוגר יושב עליו
   ולכן הוא רועש. דעיכה אופקית מנקה את הצד ומשאירה את המחשב. */
.show__shot::after{
  display:block;
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(270deg,
    rgb(5,7,13)      0%,
    rgba(5,7,13,.96) 12%,
    rgba(5,7,13,.80) 24%,
    rgba(5,7,13,.42) 34%,
    rgba(5,7,13,.12) 43%,
    rgba(5,7,13,0)   52%);
}

/* "דמו חינם" ישב כאן כשורה של 13px ונבלע. זו ההצעה עצמה —
   היא צריכה להיקרא לפני הכותרת, לא אחריה. */
.show__close .hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  padding:9px 18px;
  border-radius:999px;
  background:var(--ice);
  color:var(--paper);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  align-self:flex-start;
}
.show__close .hero__kicker::before{
  content:'';
  width:7px;height:7px;
  border-radius:50%;
  background:#12B76A;
  box-shadow:0 0 0 3px rgba(18,183,106,.28);
  flex:none;
}

/* ── האור שעונה לסמן ─────────────────────────────────────────────────────
   מפת הנורמל אפויה מהתצלום עצמו (scripts/bake-relight.py) והשיידר מזיז
   עליה אור לפי הסמן. העוטף חייב להיות בדיוק קופסת התמונה — הקנבס יושב
   ב-inset:0 עליו, וכל סטייה בין השניים היא אור שנופל במקום הלא נכון. */
.hero__visual .hero__lit{
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-end:-4%;
  inset-inline-start:auto;
  width:auto;
  aspect-ratio:1536 / 1024;
  max-width:72%;
}
.hero__visual .hero__lit img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center bottom;
  display:block;
}
/* ⛔ אסור להסתיר את התצלום. ה-alpha של השיידר הוא uAmt — הוא מתוכנן לשבת
   מעל התמונה ולתת לה להיראות דרכו במנוחה. הסתרתה מורידה את ההירו ל-34%
   מעצמתו (נמדד: -42.7% לומיננס, היילייטים 0.99 ⟶ 0.49). */
@media (max-width:900px){
  .hero__visual .hero__lit{max-width:64%;inset-inline-end:-2%}
}

/* ⛔ האור בין העמודות גולש ב-58% מרוחב העמודה לכל צד (.col::after). בשולחן
   עבודה העמודות זו לצד זו והגלישה הזו היא כל הפואנטה — אבל בנייד הן מוערמות,
   הגלישה יוצאת מהדף, והוא נגלל לצדדים 194px. clip חותך אופקית בלי ליצור
   מכל גלילה, ולכן האור בין עמודה לעמודה נשאר בדיוק כפי שהוא. */
.colonnade{overflow-x:clip}
/* וגם במעלה: .pins__anchor גולש 214px מעבר לרוחבו, והדבר היחיד שעצר את זה
   היה body{overflow-x:hidden} — דפוס ששובר את עצמו על iOS ומתעלם ממנו
   position:fixed. clip כאן סוגר את זה במקור, ומשאיר את הציר האנכי פתוח. */
.pins__stage{overflow-x:clip}
.pins{overflow-x:clip}


/* ── טלפון: לפטופ אחד גדול במקום מניפה ─────────────────────────────────
   נמדד ב-390px: המניפה נתנה 131px ללפטופ. זה המקטע שאמור להוכיח שאנחנו
   יודעים לבנות, ובגודל הזה לא רואים בו כלום. הסף כאן חייב להתאים לסף
   ב-lib/folio.js (stage.clientWidth < 700), אחרת אחד מהם עובד לבד. */
@media (max-width:699px){
  .folio__mac{width:min(88vw, 430px)}
  /* ⛔ height:auto מאפס את הבמה — כל ילדיה ממוקמים אבסולוטית. הגובה נגזר
     מהלפטופ (221px) ומהמושב שלו על האבן, ולא מ-svh: 68svh נתן 574px לבמה
     שמחזיקה לפטופ של 164px, וזה כל החלל המת שהיה שם. */
  .folio__stage{height:auto;min-height:330px}
}

/* ── טלפון: ההירו ─────────────────────────────────────────────────────
   נמדד ב-390px: המכל היה 50svh = 422px, והלפטופ תפס ממנו 166px — 248px
   של שיש ריק מתחתיו, בדיוק במסך הראשון. ההיפוך: הלפטופ בזרימה, והמכל
   מקבל את גובהו ממנו. ⚠️ אסור min-height:0 בלי להוציא את הלפטופ
   מ-position:absolute — מכל שכל ילדיו אבסולוטיים קורס לאפס. */
@media (max-width:899px){
  .hero__visual{
    min-height:0;
    display:flex;
    align-items:flex-end;
  }
  .hero__visual .hero__lit{
    position:relative;
    inset:auto;
    width:97%;
    max-width:none;
    margin-inline-start:auto;
    margin-inline-end:-3%;
  }
}

/* ── טלפון: יעדי מגע וטקסט קטן ─────────────────────────────────────────
   נמדד ב-390px: «דמו חינם» בניווט 75×36, «vela» 58×23, קישורי הפוטר 35×20.
   הרצפה בשתי המערכות (iOS/Android) היא 44px, ואצבע לא מדייקת כמו סמן.
   הטקסט הקטן ביותר היה 11px («עמוד תווך · 01»). */
@media (max-width:899px){
  .nav__mark,
  .nav__cta,
  .lang{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    min-width:44px;
  }
  .nav__cta{padding-inline:16px}
  .nav__tel{
    display:inline-flex;align-items:center;
    min-height:44px;
    font-size:13px;
  }
  .foot__row a,
  .foot__row button{
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding-inline:10px;
  }
  .foot__row{row-gap:0}
  .col__num{font-size:13px}
  .folio__names button span:first-child{font-size:13px}
  /* ⚠️ .deck[data-flat] .notice (סגוליות 0,3,0) גובר על .notice — בטלפון
     הדק תמיד flat, ולכן חייבים לכוון בדיוק לאותו סלקטור. */
  .yn dt,.deck[data-flat] .notice,.deck[data-flat] .notice a{font-size:13px}
  .foot__mark{display:inline-flex;align-items:center;min-height:44px}
  /* 20vh = 169px של שיש ריק אחרי העבודות, על מסך שממילא צריך לגלול בו */
  .folio{padding-bottom:9vh}
}

/* ── טלפון: עמוד אחד במסך ──────────────────────────────────────────────
   נמדד ב-390×844: הכרטיס היה 104px, ונראו ארבעה עמודים מתוך חמישה
   בבת אחת. בשולחן העבודה הקולונדה נבנית עמוד-אחר-עמוד בהצמדת גלילה
   (lib/pins.js, min-width:768px) — ובטלפון הבנייה הזו לא רצה כלל
   ונשארה ערימה. כאן כל עמוד מקבל מסך, והנעילה עוצרת אותו במקום.
   ⚠️ scroll-snap מותר כאן רק מפני ש-Lenis מוגדר syncTouch:false —
   במגע הדפדפן גולל בעצמו, ואין מי שיילחם בנעילה. */
@media (max-width:767px){
  html{scroll-snap-type:y proximity}
  .colonnade{gap:0}
  /* ⚠️ המסך הוא יחידת הנעילה — לא הכרטיס. אם הכרטיס עצמו נמתח ל-780px
     מתקבל מלבן כהה ענק סביב שלוש שורות טקסט. אז .col הוא מסגרת שקופה
     בגובה מסך, והעמוד והלוח מתמרכזים בתוכה על השיש. */
  .col{
    min-height:calc(100svh - 64px);
    align-items:center;
    background:none;
    overflow:visible;
    border-radius:0;
    padding-inline:14px;
    gap:14px;
    scroll-snap-align:center;
    scroll-margin-block:64px;
  }
  .col__shaft{
    flex:0 0 78px;
    height:min(56svh, 420px);
    border-radius:3px;
    overflow:hidden;
  }
  .col__text{
    align-self:center;
    flex:1 1 auto;
    justify-content:center;
    gap:12px;
    padding:24px 20px;
    border-radius:4px;
    background:linear-gradient(90deg, rgba(3,6,13,.90) 0%, rgba(3,6,13,.62) 100%);
  }
  .col__num{font-size:13px;letter-spacing:.07em}
  .col__word{font-size:clamp(40px, 13vw, 58px);line-height:1.0}
  .col__line{font-size:16.5px;line-height:1.55;max-width:24ch}
}

/* ⛔ נסיגה מהשינוי שלמעלה: מרגע שמקטע השיטה גדל ל-4301px, ‎.pins__stone
   (position:absolute; height:100%) נמתח על כל הגובה — מקור של 1280px על
   4301px הוא הגדלה של פי 3.4, והשיש נמרח. הפתרון: הוא נשאר בגובה מסך
   ודביק, כך שהחדר עומד והעמודים עוברים בו. ‎margin-block-end שלילי
   מבטל את המקום שהוא תופס בזרימה, אחרת הוא דוחף את הבמה למטה. */
@media (max-width:767px){
  .pins__stone{
    position:sticky;
    inset:auto;
    top:0;
    width:100%;
    height:100svh;
    margin-block-end:-100svh;
  }
}