/* =========================================================================
   LK FINANCE — HOME 2026  ·  "White / Turquoise / Gold"
   דף הבית בלבד. מוגבל ל-body.home26 ולא נוגע בשאר האתר.
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
/* Light technological. Lior tried the dark build and came back to light — the
   right call for a site whose job is reading long articles. What survives from
   the dark pass is everything that was not about the ground: Rubik instead of a
   serif, mono numerals, hairline borders, sharp radii, no gradient on text. */
.home26 {
  /* Paper */
  --paper:#FFFFFF;
  --paper-2:#F7F9FA;
  --paper-3:#EFF3F5;
  --sand:#FBF6EC;

  /* Ink */
  --ink:#0A0B0D;
  --ink-2:#3A414D;
  --ink-3:#646C7A;
  --ink-4:#98A0AD;

  /* Turquoise — back to the brand value, which reads correctly on paper */
  --teal:#0E9E8C;
  --teal-dk:#0B7D6F;
  --teal-lt:#2FC7B2;
  --teal-pale:rgba(14,158,140,.10);
  --teal-wash:rgba(14,158,140,.06);

  /* Gold */
  --gold:#B8860B;
  --gold-dk:#8A6508;
  --gold-pale:rgba(184,134,11,.12);
  --gold-wash:rgba(184,134,11,.07);

  --violet:#6C5CE7;

  /* Hairlines, not soft shadows. This is what keeps it from going pastel. */
  --line:rgba(10,11,13,.10);
  --line-2:rgba(10,11,13,.18);
  --line-gold:rgba(184,134,11,.3);

  --sh-1:0 1px 2px rgba(10,11,13,.04);
  --sh-2:0 1px 2px rgba(10,11,13,.05), 0 18px 40px -24px rgba(10,11,13,.22);
  --sh-3:0 1px 3px rgba(10,11,13,.06), 0 30px 64px -30px rgba(10,11,13,.3);
  --sh-teal:0 0 0 1px rgba(14,158,140,.22), 0 20px 50px -24px rgba(14,158,140,.4);

  --grad-brand:linear-gradient(180deg,var(--teal-lt),var(--teal));
  --grad-text:none;
  --grad-gold:linear-gradient(180deg,#D9A62A,#8A6508);

  /* "glass" on paper is a very light tint, not a translucent white */
  --glass:#FFFFFF;
  --glass-hi:#FFFFFF;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;

  --f-display:'Rubik',system-ui,sans-serif;
  --f-ui:'Rubik',system-ui,sans-serif;
  --f-body:'Assistant',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --shell:min(1240px, 100% - 44px);
}

/* ---------- 2. BASE ---------- */
.home26 *{margin:0;padding:0;box-sizing:border-box}
.home26 *::selection{background:var(--teal);color:#fff}
html:has(.home26){scroll-behavior:smooth;overflow-x:clip;background:#fff;color-scheme:light}

.home26{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  direction:rtl;
  line-height:1.65;
  font-size:16.5px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.home26 img{max-width:100%;height:auto;width:auto;display:block}
.home26 a{color:inherit;text-decoration:none}
.home26 :where(button){font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.home26 ul{list-style:none}

.shell{width:var(--shell);margin-inline:auto}
.shell-narrow{width:min(880px,100% - 44px);margin-inline:auto}
.home26 section{position:relative;padding:clamp(62px,6.6vw,100px) 0}

/* ---------- 3. ATMOSPHERE ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos-base{
  position:absolute;inset:0;
  background:
    radial-gradient(62% 48% at 84% -10%, rgba(14,158,140,.09) 0%, transparent 62%),
    radial-gradient(48% 42% at 6% 2%, rgba(108,92,231,.06) 0%, transparent 64%),
    linear-gradient(180deg,#FFFFFF 0%,#FCFDFD 55%,#FFFFFF 100%);
}
.atmos-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(10,11,13,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,11,13,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 92% 62% at 50% 22%,#000 0%,transparent 76%);
          mask-image:radial-gradient(ellipse 92% 62% at 50% 22%,#000 0%,transparent 76%);
}
.aurora{position:absolute;border-radius:50%;filter:blur(120px);opacity:.34;will-change:transform}
.aurora.a{width:min(600px,70vw);aspect-ratio:1;top:-16%;inset-inline-end:-10%;
  background:radial-gradient(circle,rgba(14,158,140,.34),transparent 68%);animation:drift 26s var(--ease) infinite}
.aurora.b{width:min(520px,62vw);aspect-ratio:1;top:34%;inset-inline-start:-14%;
  background:radial-gradient(circle,rgba(108,92,231,.24),transparent 68%);animation:drift 32s var(--ease) -9s infinite}
.aurora.c{width:min(440px,54vw);aspect-ratio:1;bottom:-10%;inset-inline-end:24%;
  background:radial-gradient(circle,rgba(14,158,140,.2),transparent 70%);animation:drift 38s var(--ease) -18s infinite}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(46px,-38px,0) scale(1.09)}
  66%{transform:translate3d(-34px,34px,0) scale(.93)}
}
#constellation{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.atmos-noise{display:none}
.home26 > *:not(.atmos){position:relative}

/* ---------- 4. TYPE ---------- */
.home26 h1,.home26 h2,.home26 h3,.home26 h4{font-family:var(--f-display);line-height:1.15;letter-spacing:-.006em}
.d1{font-size:clamp(2.1rem,4.5vw,3.6rem);font-weight:800;letter-spacing:-.012em;line-height:1.18}
.d2{font-size:clamp(1.76rem,3.4vw,2.65rem);font-weight:800;letter-spacing:-.01em;line-height:1.22}
.d3{font-size:clamp(1.34rem,2.15vw,1.76rem);font-weight:700;letter-spacing:-.008em}
.d4{font-size:1.1rem;font-weight:800}
/* היה כאן גרדיאנט על הטקסט. בעברית זה יוצא גרוע במיוחד, כי כל אות מקבלת
   גוון אחר והמילה מאבדת אחידות, וזה גם הסימן הכי מזוהה של אתר שנבנה מהר.
   הדגשה נעשית עכשיו בצבע מלא. */
.grad{color:var(--teal)}
.lead{font-size:clamp(1.04rem,1.5vw,1.22rem);color:var(--ink-3);line-height:1.78}
.muted{color:var(--ink-3)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line-2);
  font-size:.79rem;font-weight:700;letter-spacing:.03em;color:var(--teal);
  box-shadow:var(--sh-1);
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--gold-wash);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.42;transform:scale(.72)}}

.sec-head{text-align:center;max-width:760px;margin:0 auto clamp(40px,4.6vw,60px)}
.sec-head .lead{margin-top:16px}
.sec-head .d2{margin-top:18px}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;
  font-family:var(--f-body);font-weight:700;font-size:1rem;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),background .3s,border-color .3s,color .3s;
  will-change:transform;position:relative;overflow:hidden;isolation:isolate;
}
.btn-primary{
  background:var(--grad-brand);color:#fff;
  box-shadow:0 0 0 1px rgba(47,224,196,.42), 0 16px 44px -12px rgba(47,224,196,.6);
}
.btn-primary::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--teal-lt),var(--teal));
  opacity:0;transition:opacity .34s var(--ease);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(47,224,196,.55), 0 24px 60px -14px rgba(47,224,196,.7)}
.btn-primary:hover::after{opacity:1}
.btn-ghost{
  background:#fff;color:var(--ink);
  border:1px solid var(--line-2);box-shadow:var(--sh-1);
}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--sh-2);color:var(--teal)}
.btn-lg{padding:18px 38px;font-size:1.08rem}
.btn .arw{transition:transform .32s var(--ease);display:inline-block}
.btn:hover .arw{transform:translateX(-5px)}

.link-arw{display:inline-flex;align-items:center;gap:7px;color:var(--teal);font-weight:700;transition:gap .28s var(--ease)}
.link-arw:hover{gap:13px}

/* ---------- 6. SCROLL PROGRESS ---------- */
.progress{position:fixed;top:0;inset-inline:0;height:2.5px;z-index:120;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .1s linear}

/* ---------- 7. NAV ---------- */
.nav26{position:fixed;top:0;inset-inline:0;z-index:100;transition:all .38s var(--ease)}
.nav26::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .38s var(--ease);
  background:rgba(255,255,255,.86);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--line);box-shadow:0 1px 24px rgba(11,26,46,.05);
}
.nav26.stuck::before{opacity:1}
.nav-in{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:22px;
  padding:18px 0;position:relative;transition:padding .38s var(--ease)}
.nav26.stuck .nav-in{padding:11px 0}

.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand-tile{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:#fff;padding:7px;border:1px solid var(--line);
  box-shadow:0 6px 18px -8px rgba(46,164,160,.5);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease);
}
.brand:hover .brand-tile{transform:translateY(-2px) rotate(-3deg);box-shadow:0 12px 28px -8px rgba(46,164,160,.6);border-color:var(--line-2)}
.brand-tile img{width:100%;height:auto}
.brand-txt{font-family:var(--f-ui);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.brand-txt small{display:block;font-family:var(--f-body);font-weight:500;font-size:.72rem;color:var(--ink-3);letter-spacing:.02em;margin-top:2px}

.nav-menu{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:11px;
  font-size:.95rem;font-weight:600;color:var(--ink-2);
  transition:color .26s,background .26s;
}
.nav-link:hover,.nav-item.open .nav-link{color:var(--teal);background:var(--teal-wash)}
.nav-link .chev{width:9px;height:9px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s var(--ease)}
.nav-item.open .chev{transform:rotate(-135deg) translateY(-2px)}

.mega{
  position:absolute;top:calc(100% + 12px);inset-inline-end:0;min-width:330px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;
  box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.98);transform-origin:top;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.mega a{display:flex;align-items:flex-start;gap:13px;padding:11px 13px;border-radius:14px;transition:background .24s}
.mega a:hover{background:var(--paper-3)}
.mega .ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(140deg,var(--teal-pale),var(--gold-pale));border:1px solid var(--line);font-size:1.05rem}
.mega b{display:block;font-family:var(--f-ui);font-weight:700;font-size:.94rem;color:var(--ink)}
.mega span{display:block;font-size:.8rem;color:var(--ink-3);line-height:1.5;margin-top:2px}
.mega .cnt{margin-inline-start:auto;align-self:center;font-size:.72rem;font-weight:800;color:var(--gold-dk);
  background:var(--gold-wash);border:1px solid var(--line-gold);border-radius:999px;padding:3px 9px;flex:none}

.nav-cta{padding:11px 22px;font-size:.93rem;flex:none}
.burger{display:none;flex:none;width:44px;height:44px;border-radius:12px;background:var(--glass);border:1px solid var(--line-2);
  place-items:center;gap:5px;flex-direction:column;box-shadow:var(--sh-1)}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform .34s var(--ease),opacity .24s}
.nav26.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav26.open .burger span:nth-child(2){opacity:0}
.nav26.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 8. HERO ---------- */
.hero26{padding:clamp(118px,13vh,152px) 0 clamp(54px,6vw,76px)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,4.4vw,62px);align-items:center}

.hero-h1{margin-top:22px}
.hero-h1 .line{display:block;overflow:hidden;padding-block:.06em;margin-block:-.06em}
.hero-h1 .line > span{display:block;animation:riseIn 1s var(--ease) backwards}
.hero-h1 .line:nth-child(1) > span{animation-delay:.08s}
.hero-h1 .line:nth-child(2) > span{animation-delay:.2s}
@keyframes riseIn{from{transform:translateY(105%);opacity:0}to{transform:translateY(0);opacity:1}}

.rotator{display:inline-grid;vertical-align:bottom;text-align:start}
.rotator > span{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .24s var(--ease),transform .24s var(--ease)}
.rotator > span.on{opacity:1;transform:translateY(0);transition-duration:.52s;transition-delay:.2s}

.hero-lead{margin-top:22px;max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:22px;font-size:.88rem;color:var(--ink-3)}
.hero-note span{display:inline-flex;align-items:center;gap:7px}
.hero-note svg{width:15px;height:15px;stroke:var(--teal);fill:none;stroke-width:2.4;flex:none}

/* --- VSL --- */
.vsl{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;
  border:1px solid var(--line);background:var(--paper-3);
  box-shadow:0 2px 6px rgba(11,26,46,.05), 0 30px 70px -30px rgba(11,26,46,.28);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.vsl:not(.is-static):hover{transform:translateY(-5px);
  box-shadow:0 3px 8px rgba(11,26,46,.06), 0 44px 90px -32px rgba(11,26,46,.34)}
.vsl.is-static{cursor:default}
.home26 .vsl-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.vsl::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(10,11,13,.55) 0%,rgba(10,11,13,.16) 26%,transparent 48%)}
.vsl-ui{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,2.1vw,24px)}
.vsl-top{display:flex;align-items:center;gap:10px}
.vsl-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);font-size:.75rem;font-weight:800;color:var(--teal-dk);backdrop-filter:blur(10px);
  letter-spacing:.02em;box-shadow:0 6px 18px -8px rgba(11,26,46,.4)}
.vsl-badge i{width:6px;height:6px;border-radius:50%;background:#E2483D;box-shadow:0 0 0 4px rgba(226,72,61,.16);animation:pulse 1.9s infinite}
.vsl-bot{display:flex;align-items:center;gap:15px;padding:0 4px 2px}
.vsl-play{
  position:relative;flex:none;
  width:clamp(48px,4.4vw,56px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand);box-shadow:0 14px 34px -10px rgba(23,117,113,.7);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease);
}
.vsl-play::before{content:'';position:absolute;inset:-11px;border-radius:50%;border:1.5px solid rgba(46,164,160,.5);animation:ripple 2.8s ease-out infinite}
.vsl-play::after{content:'';position:absolute;inset:-11px;border-radius:50%;border:1.5px solid rgba(212,165,55,.45);animation:ripple 2.8s ease-out -1.4s infinite}
@keyframes ripple{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.55);opacity:0}}
.vsl-play svg{width:36%;height:36%;fill:#fff;margin-inline-start:2px}
.vsl:hover .vsl-play{transform:scale(1.09);box-shadow:0 20px 46px -10px rgba(23,117,113,.8)}
.vsl-bot .d4{color:#fff;font-family:var(--f-display);font-weight:700;text-shadow:0 1px 12px rgba(10,11,13,.5)}
.vsl-bot p{font-size:.86rem;color:rgba(255,255,255,.82);margin-top:3px;max-width:34ch}
.vsl-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5;background:#000;object-fit:contain}

/* --- stat rail --- */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(42px,5vw,64px);
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2)}
.rail div{background:var(--paper-2);padding:24px 20px;text-align:center;transition:background .34s var(--ease);
  display:flex;flex-direction:column;justify-content:center}
.rail div:last-child{background:rgba(245,198,91,.05)}
.rail div:last-child b{color:var(--gold-dk)}
.rail div:last-child:hover{background:rgba(245,198,91,.09)}
.rail div:hover{background:var(--paper-2)}
.rail b{display:block;font-family:var(--f-mono);font-weight:600;letter-spacing:-.03em;font-size:clamp(2.1rem,3.7vw,3rem);
  color:var(--teal);line-height:1;font-variant-numeric:lining-nums}
.rail span{display:block;font-size:.83rem;color:var(--ink-3);margin-top:8px;line-height:1.45;text-wrap:balance}

/* ---------- 9. MARQUEE ---------- */
.marq{padding:0;overflow:hidden;border-block:1px solid var(--line-2);
  background:var(--paper-3);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marq-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(50%)}}
.marq-track span{display:inline-flex;align-items:center;gap:16px;padding:16px 24px;white-space:nowrap;
  font-family:var(--f-ui);font-weight:700;font-size:.94rem;letter-spacing:.01em;color:var(--ink)}
.marq-track span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.55}

/* ---------- 10. BENTO HUB ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.tile{
  position:relative;overflow:hidden;isolation:isolate;
  grid-column:span 2;min-height:212px;
  padding:26px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--line);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease);
  will-change:transform;
}
.tile::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .42s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(46,164,160,.10),transparent 64%);
}
.tile::after{
  content:'';position:absolute;top:0;inset-inline:16%;height:2px;
  background:linear-gradient(90deg,transparent,var(--teal),var(--gold),transparent);opacity:0;transition:opacity .42s}
.tile:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh-3)}
.tile:hover::before,.tile:hover::after{opacity:1}
.tile-xl{grid-column:span 3;min-height:270px}
.tile-lg{grid-column:span 3}
.tile-sm{grid-column:span 2}

.tile-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-size:1.25rem;
  background:linear-gradient(140deg,var(--teal-pale),var(--gold-pale));border:1px solid var(--line);
  transition:transform .44s var(--ease)}
.tile:hover .tile-ico{transform:scale(1.08) rotate(-5deg)}
.tile h3{margin-top:16px;font-size:1.2rem;font-weight:800;color:var(--ink)}
.tile p{margin-top:8px;font-size:.92rem;color:var(--ink-3);line-height:1.65}
.tile-foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pill{font-size:.75rem;font-weight:800;color:var(--teal);background:var(--teal-wash);
  border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;white-space:nowrap}
.tile-go{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:var(--ink-3);transition:color .28s,gap .3s var(--ease)}
.tile:hover .tile-go{color:var(--teal);gap:12px}

.viz-bars{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:16px}
.viz-bars i{flex:1;border-radius:3px;background:linear-gradient(180deg,var(--teal-lt),var(--teal-pale));opacity:.8;
  transform-origin:bottom;animation:grow 1.4s var(--ease) backwards}
.viz-bars i:nth-child(even){opacity:.55}
@keyframes grow{from{transform:scaleY(.06);opacity:.2}to{transform:scaleY(1);opacity:1}}
.viz-ring{width:74px;height:74px;margin-top:14px;border-radius:50%;
  background:conic-gradient(var(--teal) 0 42%,var(--teal-lt) 42% 68%,var(--gold) 68% 86%,var(--paper-3) 86% 100%);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%);mask:radial-gradient(circle,transparent 56%,#000 57%);
  animation:spinIn 1.1s var(--ease) backwards}
@keyframes spinIn{from{transform:rotate(-120deg) scale(.7);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
.viz-line{margin-top:14px;height:56px;width:100%}
.viz-line path{fill:none;stroke:url(#lkline);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:var(--len,340);stroke-dashoffset:var(--len,340)}
.in .viz-line path{animation:draw 1.7s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- 11. REELS ----------
   הכרטיסים היו טיפוגרפיים בלבד: כותרת ומספר רפאים, בלי שום קדימון. עכשיו כל
   כרטיס מארח אמבד אמיתי של הרילס, שנטען רק כשגוללים אליו (IntersectionObserver
   ב-home26.js). הכותרת והקישור קיימים ב-DOM תמיד, כך שגם אם אינסטגרם חסומה
   אצל הגולש נשאר כרטיס שאפשר ללחוץ עליו. */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.reel{display:flex;flex-direction:column;gap:12px}

.reel-frame{
  position:relative;aspect-ratio:9/14;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:linear-gradient(168deg,var(--c1,rgba(47,224,196,.12)) 0%,rgba(255,255,255,.02) 62%);
  box-shadow:var(--sh-2);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease);
}
.reel:hover .reel-frame{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh-3)}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:1}

/* the placeholder sits under the iframe and stays visible until it mounts */
.reel-link{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-decoration:none}
.reel-frame.is-live .reel-link{inset:auto 0 0 auto;width:46px;height:46px;z-index:3}
.reel-frame.is-live .reel-play{display:none}
.reel-frame.is-live .reel-topic{display:none}

.reel-play{
  width:clamp(44px,4vw,54px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand);box-shadow:0 0 0 1px rgba(47,224,196,.4),0 14px 36px -10px rgba(47,224,196,.6);
  transition:transform .4s var(--ease);
}
.reel:hover .reel-play{transform:scale(1.1)}
.reel-play svg{width:38%;height:38%;fill:#fff;margin-inline-start:2px}

.reel-topic{
  position:absolute;top:13px;inset-inline-start:13px;
  font-family:var(--f-ui);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink);background:rgba(255,255,255,.92);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px;backdrop-filter:blur(10px);
}
.reel-meta h4{font-size:.97rem;font-weight:700;line-height:1.4;color:var(--ink)}
.reel-meta small{display:block;margin-top:5px;font-size:.78rem;color:var(--ink-3);line-height:1.5}

/* ---------- 12. LATEST POSTS ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--glass);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.post:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh-3)}
.post-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.home26 .post-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .post-img img{transform:scale(1.07)}
.post-cat{position:absolute;top:13px;inset-inline-start:13px;font-size:.72rem;font-weight:800;color:#fff;
  border-radius:999px;padding:4px 11px;box-shadow:0 4px 12px rgba(11,26,46,.2)}
.post-body{padding:20px;display:flex;flex-direction:column;flex:1}
.post-body h4{font-size:1.06rem;font-weight:800;line-height:1.4;color:var(--ink)}
.post-body p{margin-top:9px;font-size:.89rem;color:var(--ink-3);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-body .link-arw{margin-top:auto;padding-top:16px;font-size:.87rem}

/* ---------- 13. PROCESS ---------- */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.flow-line{position:absolute;top:38px;inset-inline:9%;height:3px;overflow:hidden;opacity:.85}
.flow-line svg{width:100%;height:3px;overflow:visible}
.flow-line path{stroke:url(#lkline);stroke-width:3;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;fill:none}
.in .flow-line path{animation:draw 2.2s var(--ease) forwards}
.stepc{position:relative;z-index:1;padding:24px 22px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--line);box-shadow:var(--sh-1);
  transition:transform .48s var(--ease),border-color .4s,box-shadow .48s var(--ease)}
.stepc:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--sh-2)}
.stepn{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  font-family:var(--f-mono);font-weight:600;font-size:1.08rem;color:#fff;background:var(--grad-brand);
  box-shadow:0 10px 22px -8px rgba(23,117,113,.6)}
.stepc:nth-child(3) .stepn{background:var(--grad-gold);box-shadow:0 10px 22px -8px rgba(168,124,24,.55)}
.stepc:nth-child(5) .stepn{background:var(--grad-gold);box-shadow:0 10px 22px -8px rgba(168,124,24,.55)}
.stepc h4{margin-top:16px;font-size:1.06rem;font-weight:800;color:var(--ink)}
.stepc p{margin-top:9px;font-size:.9rem;color:var(--ink-3);line-height:1.65}

/* ---------- 14. FOUNDER ---------- */
.founder{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,4vw,52px);align-items:center;
  padding:clamp(30px,4vw,52px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--teal-wash),#fff 42%,var(--gold-wash));
  border:1px solid var(--line);box-shadow:var(--sh-2)}
.founder-pic{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85);border:1px solid var(--line);
  background:#0C0E13}
.home26 .founder-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-size:.79rem;font-weight:700;color:var(--ink-2);background:var(--glass);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;box-shadow:var(--sh-1)}

/* ---------- 15. PROOF ---------- */
.proofs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.pf{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:var(--glass);box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.pf:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:var(--sh-2)}
/* Real WhatsApp screenshots are light by nature and read as pasted-in white
   blocks on this ground. A slight dim settles them into the page; hover
   restores them fully so nothing is hidden from the reader. */
.pf-win{position:relative;height:clamp(210px,18vw,264px);overflow:hidden;
  filter:brightness(.9) saturate(.95);transition:filter .4s var(--ease)}
.pf:hover .pf-win{filter:none}
/* fixed-height window: anchor the screenshot to its top so the first line of the
   conversation is always the part you see */
.home26 .pf-win img{width:100%;height:100%;object-fit:cover;object-position:top center}
.pf-win::after{content:'';position:absolute;inset:auto 0 0 0;height:56px;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff)}
.pf figcaption{padding:14px 16px;font-size:.86rem;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.5}

/* ---------- 16. CTA + FORM ---------- */
.cta-wrap{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(34px,4.6vw,60px);
  background:linear-gradient(150deg,var(--teal-pale),#fff 46%,var(--gold-pale));
  border:1px solid var(--line-2);box-shadow:var(--sh-teal)}
.cta-wrap::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%,rgba(46,164,160,.09),transparent 62%)}
.cta-grid{position:relative;display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,4vw,52px);align-items:center}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.f-field{margin-top:13px}
.f-field label{display:block;font-size:.83rem;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.home26 .f-field input{
  width:100%;padding:14px 17px;border-radius:14px;font-family:var(--f-body);font-size:1rem;
  background:#fff;border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--sh-1);
  transition:border-color .28s,box-shadow .28s;
}
.home26 .f-field input::placeholder{color:var(--ink-4)}
.home26 .f-field input:focus{outline:0;border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(46,164,160,.13)}
.f-submit{width:100%;margin-top:20px;padding:17px}
.f-alt{text-align:center;margin-top:15px;font-size:.88rem;color:var(--ink-3)}
.f-alt a{color:var(--teal);font-weight:700}
.f-note{text-align:center;margin-top:11px;font-size:.8rem;color:var(--ink-4);line-height:1.6}
.cta-list{margin-top:24px;display:grid;gap:13px}
.cta-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;color:var(--ink-2);line-height:1.6}
.cta-list svg{flex:none;width:21px;height:21px;margin-top:2px;stroke:var(--teal);fill:none;stroke-width:2.6}

/* ---------- 17. FOOTER ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(52px,6vw,76px) 0 34px;background:var(--paper-2)}
.foot h5{font-family:var(--f-ui);font-size:.86rem;font-weight:800;letter-spacing:.05em;color:var(--teal);margin-bottom:16px}
.foot ul{display:grid;gap:11px}
.foot ul a{font-size:.91rem;color:var(--ink-3);transition:color .26s,padding .26s var(--ease)}
.foot ul a:hover{color:var(--ink);padding-inline-start:5px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(26px,3.4vw,46px)}
.foot-brand p{margin-top:16px;font-size:.9rem;color:var(--ink-3);line-height:1.7;max-width:34ch}
.foot-social{display:flex;gap:10px;margin-top:20px}
.foot-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--glass);border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--sh-1);transition:all .3s var(--ease)}
.foot-social a:hover{background:var(--grad-brand);color:#fff;transform:translateY(-3px);border-color:transparent}
.foot-social svg{width:18px;height:18px;fill:currentColor}
.foot-legal{margin-top:clamp(36px,4vw,52px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;font-size:.83rem;color:var(--ink-4)}
.foot-legal a{color:var(--ink-3)}
.foot-legal a:hover{color:var(--teal)}
.foot-disc{margin-top:18px;font-size:.76rem;color:var(--ink-4);line-height:1.7;max-width:96ch}

/* ---------- 18. FLOATING WIDGETS ---------- */
.home26 .wa-fab{position:fixed;bottom:22px;inset-inline-start:22px;z-index:90;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(140deg,#25D366,#12A150);
  box-shadow:0 12px 30px -10px rgba(37,211,102,.6);transition:transform .34s var(--ease)}
.home26 .wa-fab:hover{transform:translateY(-4px) scale(1.06)}
.home26 .wa-fab svg{width:28px;height:28px}
.home26 #lk-bot{position:fixed;bottom:22px;inset-inline-end:22px;z-index:91}
.home26 .lk-bot-fab{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;padding:10px;
  background:var(--glass);border:1px solid var(--line-2);box-shadow:0 12px 30px -10px rgba(46,164,160,.5);
  transition:transform .34s var(--ease)}
.home26 .lk-bot-fab:hover{transform:translateY(-4px) scale(1.06)}
.home26 .lk-bot-fab img{width:100%;height:auto}
.home26 .lk-bot-panel{position:absolute;bottom:72px;inset-inline-end:0;width:min(374px,calc(100vw - 44px));
  height:min(520px,70vh);display:flex;flex-direction:column;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.97);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.home26 .lk-bot-panel.lk-bot-panel-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.home26 .lk-bot-header{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 17px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.home26 .lk-bot-header-info{display:flex;align-items:center;gap:11px}
.home26 .lk-bot-header-avatar{width:36px;height:36px;border-radius:11px;background:var(--glass-hi);padding:4px;border:1px solid var(--line)}
.home26 .lk-bot-header-title{font-family:var(--f-ui);font-weight:800;font-size:.94rem;color:var(--ink)}
.home26 .lk-bot-header-status{font-size:.76rem;color:var(--ink-3);margin-top:1px}
.home26 .lk-bot-close{font-size:1rem;color:var(--ink-3);width:30px;height:30px;border-radius:9px}
.home26 .lk-bot-close:hover{background:var(--paper-3);color:var(--ink)}
.home26 .lk-bot-messages{flex:1;overflow-y:auto;padding:17px;display:flex;flex-direction:column;gap:12px}
.home26 .lk-bot-message{display:flex}
.home26 .lk-bot-message-bot{align-self:flex-end}
.home26 .lk-bot-message-enter{animation:botIn .34s var(--ease) backwards}
@keyframes botIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.home26 .lk-bot-bubble{padding:12px 15px;border-radius:16px;font-size:.9rem;line-height:1.65;
  background:var(--paper-3);border:1px solid var(--line);max-width:88%;color:var(--ink-2)}
.home26 .lk-bot-message-user{align-self:flex-start}
.home26 .lk-bot-message-user .lk-bot-bubble{background:var(--grad-brand);color:#fff;border-color:transparent;font-weight:600}
.home26 .lk-bot-typing-wrap .lk-bot-bubble,.home26 #lk-bot-typing .lk-bot-bubble{color:var(--ink-3);font-style:italic}
.home26 .lk-bot-input-form{display:flex;gap:9px;padding:13px;border-top:1px solid var(--line)}
.home26 .lk-bot-input{flex:1;padding:11px 15px;border-radius:12px;font-family:var(--f-body);font-size:.92rem;
  background:#fff;border:1px solid var(--line-2);color:var(--ink)}
.home26 .lk-bot-input:focus{outline:0;border-color:var(--teal)}
.home26 .lk-bot-send{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--grad-brand);color:#fff}
.home26 .lk-bot-send svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2}
.home26 .lk-bot-footer{padding:9px;text-align:center;font-size:.72rem;color:var(--ink-4);border-top:1px solid var(--line)}

/* ---------- 19. REVEAL ---------- */
/* only hide for the reveal if JS is actually running — otherwise the page stays readable */
html.js .reveal{opacity:0;transform:translateY(30px)}
.reveal{transition:opacity .82s var(--ease),transform .82s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
.reveal.dl1{transition-delay:.09s}.reveal.dl2{transition-delay:.18s}
.reveal.dl3{transition-delay:.27s}.reveal.dl4{transition-delay:.36s}
.reveal.dl5{transition-delay:.45s}.reveal.dl6{transition-delay:.54s}

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1080px){
  .flow{grid-template-columns:repeat(3,1fr)}
  .flow .stepc:nth-last-child(2){grid-column:span 2}
  .flow-line{display:none}
  .bento{grid-template-columns:repeat(4,1fr)}
  .tile-xl,.tile-lg{grid-column:span 4}
  .reels{grid-template-columns:repeat(3,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  .proofs{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  .home26{--shell:min(1240px, 100% - 34px)}
  .nav-menu{
    position:fixed;top:0;inset-inline-end:0;width:min(360px,86vw);height:100dvh;
    flex-direction:column;align-items:stretch;gap:5px;padding:96px 20px 30px;overflow-y:auto;
    background:var(--paper-2);border-inline-start:1px solid var(--line);box-shadow:-16px 0 60px rgba(0,0,0,.7);
    transform:translateX(-100%);transition:transform .44s var(--ease);margin:0;
  }
  .nav26.open .nav-menu{transform:translateX(0)}
  .nav-link{padding:14px 16px;font-size:1.02rem}
  .mega{position:static;opacity:1;visibility:visible;transform:none;min-width:0;box-shadow:none;
    background:transparent;border:0;border-inline-start:2px solid var(--line-2);border-radius:0;
    padding:0 12px;margin:2px 12px 8px;display:none}
  .nav-item.open .mega{display:block}
  .burger{display:grid;margin-inline-start:auto}
  .nav-cta{margin-top:18px;width:100%;justify-content:center;padding:15px 22px;font-size:1rem}
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .vsl{transform:none;aspect-ratio:16/11}
  .vsl:hover{transform:translateY(-4px)}
  /* shorter card on mobile: lift the crop so the caption bar lands on his chest, not his face */
  .vsl-poster{object-position:26% 4%}
  .rail{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .flow .stepc:nth-last-child(2){grid-column:span 1}
  .flow .stepc:last-child{grid-column:span 2}
  .flow-line{display:none}
  .founder{grid-template-columns:1fr;text-align:center}
  .founder-pic{max-width:230px;margin-inline:auto}
  .chips{justify-content:center}
  .cta-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .home26{font-size:16px;--shell:min(1240px, 100% - 30px)}
  .bento{grid-template-columns:1fr;gap:13px}
  .tile,.tile-xl,.tile-lg,.tile-sm{grid-column:span 1;min-height:0}
  .reels{grid-template-columns:repeat(2,1fr);gap:12px}
  .posts{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .flow .stepc:last-child,.flow .stepc:nth-last-child(2){grid-column:span 1}
  .proofs{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .hero26{padding-top:112px}
  .rail div{padding:19px 13px}
  .home26 .wa-fab{width:50px;height:50px;bottom:16px;inset-inline-start:16px}
  .home26 .wa-fab svg{width:25px;height:25px}
  .home26 #lk-bot{bottom:16px;inset-inline-end:16px}
  .home26 .lk-bot-fab{width:52px;height:52px}
}

/* ---------- 21. MOTION SAFETY ---------- */
@media (prefers-reduced-motion:reduce){
  .home26 *,.home26 *::before,.home26 *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  html.js .reveal,html.js .reveal.in{opacity:1;transform:none}
  .aurora{animation:none}
  #constellation{display:none}
  .hero-h1 .line > span{animation:none}
  .vsl{transform:none}
}