@font-face{font-family:"PlexHe";src:url(../fonts/plex-hebrew-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PlexHe";src:url(../fonts/plex-hebrew-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"PlexHe";src:url(../fonts/plex-hebrew-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex";src:url(../fonts/plex-sans-var.woff2) format("woff2");font-weight:100 700;font-stretch:85% 100%;font-display:swap}

:root{
  --paper:#F6F6F3;--ink:#25272C;--cobalt:#2443F0;--cobalt-deep:#1A33C8;--metal:#E3E4E8;--mute:#555861;
  --night:#141518;--night-2:#1C1E23;--line:rgb(37 39 44 / .16);--line-strong:rgb(37 39 44 / .9);
  --he:"PlexHe","Plex",system-ui,sans-serif;--lat:"Plex","PlexHe",system-ui,sans-serif;
  --gut:clamp(20px,5.6vw,80px);--max:1440px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;accent-color:var(--cobalt);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#B9BBC2 var(--paper);scroll-padding-top:24px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--he);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--cobalt);color:#fff}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px;border-radius:4px}
ol,ul{list-style:none}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
.lat,[dir=ltr]{font-family:var(--lat)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:6px;z-index:10}
.skip:focus{top:12px}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;padding-block:28px}
.brand{direction:ltr;display:inline-flex;align-items:center;gap:12px;color:var(--ink)}
.mark{width:38px;height:38px;flex:none}
.word{font:600 24px/1 var(--lat);font-stretch:92%;letter-spacing:-.025em}
.nav{display:flex;gap:34px;font-weight:500;font-size:16px;color:var(--mute)}
.nav a{position:relative;padding-block:6px;transition:color .2s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav .nav-cta{color:var(--ink)}

/* hero */
.hero{padding-top:clamp(40px,7vh,88px);padding-bottom:clamp(56px,9vh,104px)}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end}
h1{font-size:clamp(2.85rem,7.2vw,6rem);line-height:.98;letter-spacing:-.02em}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:rgb(37 39 44 / .82);max-width:34em}
.lede .lat{font-weight:600;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:8px;font-weight:600;font-size:17px;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cobalt);color:#fff}
.btn-primary:hover{background:var(--cobalt-deep)}
.btn-line{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}

/* the rail: brand mark as an object you can play with */
.rail-stage{margin-top:clamp(48px,8vh,96px)}
.rail{--h:clamp(72px,9.4vw,136px);--in:calc(var(--h)*12/46);--sq:calc(var(--h)*22/46);--d:calc(var(--h)*28/46);
  position:relative;height:var(--h);border-radius:999px;background:var(--ink);
  box-shadow:0 1px 0 rgb(255 255 255 / .06) inset,0 30px 60px -36px rgb(20 21 24 / .55)}
.rail-path{position:absolute;left:calc(var(--in) + var(--sq)/2);right:calc(var(--in) + var(--d)/2);top:50%;height:2px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,rgb(246 246 243 / .26) 0 6px,transparent 6px 14px)}
.rail-trail{position:absolute;inset:0;background:var(--cobalt);transform-origin:0 50%;transform:scaleX(var(--p,1));transition:transform 1.1s var(--ease)}
.rail.dragging .rail-trail,.rail.intro .rail-trail{transition:none}
.rail-sq{position:absolute;left:var(--in);top:50%;width:var(--sq);height:var(--sq);margin-top:calc(var(--sq)/-2);border-radius:calc(var(--h)*3/46);background:var(--paper);transition:transform .5s var(--ease)}
.rail[data-state=counter] .rail-sq{animation:knock .6s var(--ease) .55s}
@keyframes knock{0%{transform:scale(1)}35%{transform:scale(.86)}100%{transform:scale(1)}}
.rail-dot{position:absolute;right:var(--in);top:50%;width:var(--d);height:var(--d);margin-top:calc(var(--d)/-2);border:0;border-radius:50%;background:var(--cobalt);cursor:grab;touch-action:none;
  transform:translateX(var(--x,0px));transition:transform 1.1s var(--ease),box-shadow .3s;
  box-shadow:0 0 0 0 rgb(36 67 240 / 0)}
.rail-dot:hover{box-shadow:0 0 0 calc(var(--h)*.06) rgb(36 67 240 / .28)}
.rail-dot:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.rail.dragging .rail-dot{transition:none;cursor:grabbing}
.rail.intro .rail-dot{transition:none}
.rail-ends{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px;padding-inline:calc(clamp(72px,9.4vw,136px)*12/46)}
.end{display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--mute)}
.end b{font:600 15px/1 var(--lat);color:var(--ink);letter-spacing:-.01em;transition:color .4s}
.end i{font-style:normal;font-family:var(--he)}
.end-play{flex-direction:row-reverse}
.end-hint{font-size:14px;color:var(--mute);font-family:var(--he)}
.rail-stage:has([data-state=play]) .end-play b,.rail-stage:has([data-state=counter]) .end-counter b{color:var(--cobalt)}

/* statement: one display line, the body stacked under it */
.statement{background:var(--metal);padding-block:clamp(80px,11vw,152px)}
.tagline{font:500 clamp(2.15rem,6.7vw,6rem)/.98 var(--lat);letter-spacing:-.035em;text-align:right;font-stretch:92%}
.statement-body{margin-top:clamp(40px,5.5vw,80px);max-width:44rem;border-top:2px solid var(--ink);padding-top:28px}
.statement-body .big{font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.38;font-weight:500;margin-bottom:18px}
.statement-body p{color:rgb(37 39 44 / .85)}

/* shared h2 scale */
.make h2,.how h2,.for h2{font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.04}

/* what we make: the mark stood upright, a vertical rail from counter to play */
.make{padding-block:clamp(80px,11vw,148px)}
.make-sub{margin-top:18px;font-size:18px;color:rgb(37 39 44 / .8);max-width:30em}
.vrail{--r:clamp(40px,6vw,88px);position:relative;margin-top:clamp(48px,6vw,80px);padding-inline-start:var(--r);padding-block:18px 26px}
.vrail::before{content:"";position:absolute;inset-inline-start:15px;top:20px;bottom:24px;width:2px;background:var(--ink)}
.vrail::after{content:"";position:absolute;inset-inline-start:2px;bottom:0;width:28px;height:28px;border-radius:50%;background:var(--cobalt)}
.vrail li{position:relative;display:grid;grid-template-columns:minmax(0,31rem) minmax(0,26rem);justify-content:start;gap:clamp(20px,4vw,64px);align-items:baseline;padding-block:clamp(26px,3.4vw,44px)}
.vrail li::before{content:"";position:absolute;inset-inline-start:calc(-1*var(--r) + 10px);top:calc(clamp(26px,3.4vw,44px) + .62em);width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink);font-size:clamp(1.6rem,3vw,2.7rem)}
.vrail li:first-child::after{content:"";position:absolute;inset-inline-start:calc(-1*var(--r) + 3px);top:-18px;width:26px;height:26px;border-radius:4px;background:var(--ink)}
.vrail h3{font-size:clamp(1.6rem,3vw,2.7rem);line-height:1.1;letter-spacing:-.015em}
.vrail p{font-size:18px;color:rgb(37 39 44 / .8);max-width:28em}

/* how: a pinned step-through on the dark rail; plain list without JS */
.how{background:var(--ink);color:var(--paper)}
.how-scroll{position:relative}
.how-marks{display:none}
.how-pin{padding-block:clamp(80px,11vw,148px)}
.how-inner{--h:clamp(58px,7.4vw,104px);--in:calc(var(--h)*12/46);--sq:calc(var(--h)*22/46);--d:calc(var(--h)*28/46);--a:calc(var(--in) + var(--sq) + var(--h)*10/46);
  display:grid;gap:clamp(28px,4.4vh,52px)}
.how-head p{margin-top:16px;font-size:18px;color:rgb(246 246 243 / .74);max-width:32em}
.how-rail,.how-nums{display:none}
.how-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px clamp(24px,4vw,64px)}
.how-steps h3{font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.1;margin-bottom:10px}
.how-steps p{font-size:18px;color:rgb(246 246 243 / .78);max-width:30em}
.pin{height:310svh}
.pin .how-marks{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));position:absolute;inset:50svh 0;pointer-events:none}
.pin .how-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-block:0;overflow:hidden}
.pin .how-rail{display:block;position:relative;height:var(--h);border-radius:999px;background:rgb(246 246 243 / .08)}
.pin .how-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-inline:var(--a) var(--in);margin-top:calc(clamp(28px,4.4vh,52px)*-1 + 14px);font:500 14px/1 var(--lat);text-align:center;color:rgb(246 246 243 / .56)}
.hr-sq{position:absolute;left:var(--in);top:50%;width:var(--sq);height:var(--sq);margin-top:calc(var(--sq)/-2);border-radius:calc(var(--h)*3/46);background:var(--paper)}
.hr-stops{position:absolute;left:var(--a);right:var(--in);top:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));place-items:center}
.hr-stops i{width:8px;height:8px;border-radius:50%;background:rgb(246 246 243 / .24);transition:background-color .5s}
.hr-dot{--s:0;position:absolute;top:50%;width:var(--d);height:var(--d);margin-top:calc(var(--d)/-2);border-radius:50%;background:var(--cobalt);
  left:calc(var(--a) + (100% - var(--a) - var(--in)) * (var(--s) * 2 + 1) / 8 - var(--d)/2);transition:left .9s var(--ease)}
[data-step="1"] .hr-dot{--s:1}[data-step="2"] .hr-dot{--s:2}[data-step="3"] .hr-dot{--s:3}
[data-step="0"] .how-nums span:nth-child(1),[data-step="1"] .how-nums span:nth-child(2),[data-step="2"] .how-nums span:nth-child(3),[data-step="3"] .how-nums span:nth-child(4){color:var(--paper)}
[data-step="1"] .hr-stops i:nth-child(-n+1),[data-step="2"] .hr-stops i:nth-child(-n+2),[data-step="3"] .hr-stops i:nth-child(-n+3){background:var(--paper)}
.how-nums span{transition:color .4s}
.pin .how-steps{display:grid;grid-template-columns:minmax(0,1fr);min-height:9.5em}
.pin .how-steps li{grid-area:1/1;opacity:0;transform:translateY(16px);visibility:hidden;transition:opacity .45s,transform .7s var(--ease),visibility 0s .45s}
.pin .how-steps h3{font-size:clamp(2rem,4.6vw,4.2rem);line-height:1.04;margin-bottom:18px}
.pin .how-steps p{font-size:clamp(18px,1.5vw,21px)}
[data-step="0"] .how-steps li:nth-child(1),[data-step="1"] .how-steps li:nth-child(2),[data-step="2"] .how-steps li:nth-child(3),[data-step="3"] .how-steps li:nth-child(4){opacity:1;transform:none;visibility:visible;transition:opacity .5s .12s,transform .8s var(--ease) .12s,visibility 0s}

/* who it's for: one running line of sectors */
.for{padding-block:clamp(80px,11vw,148px)}
.sectors{margin-top:clamp(32px,4vw,56px);font-size:clamp(1.7rem,3.9vw,3.5rem);line-height:1.32;font-weight:400;letter-spacing:-.015em;color:rgb(37 39 44 / .9)}
.sectors li{display:inline;white-space:nowrap;transition:color .3s}
.sectors li:not(:last-child)::after{content:"";display:inline-block;width:.36em;height:.36em;margin-inline:.42em;vertical-align:.1em;background:var(--ink);border-radius:.06em;transition:transform .4s var(--ease)}
.sectors li:nth-child(even):not(:last-child)::after{background:var(--cobalt);border-radius:50%}
.sectors li:hover{color:var(--cobalt)}
.for-note{margin-top:clamp(36px,4.5vw,64px);margin-inline-start:auto;max-width:30em;font-size:18px;color:rgb(37 39 44 / .8);border-top:1px solid var(--line);padding-top:20px}

/* work */
.work{background:var(--night);color:var(--paper);padding-block:clamp(80px,11vw,148px)}
.work-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.work h2{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.02}
.work-copy p{margin-top:24px;font-size:clamp(17px,1.4vw,19px);color:rgb(246 246 243 / .78);max-width:30em}
.device{justify-self:center;width:min(250px,62vw);aspect-ratio:9/19.5;border-radius:44px;padding:11px;background:#0B0C0E;box-shadow:0 0 0 1px rgb(255 255 255 / .08),0 40px 80px -30px rgb(0 0 0 / .7)}
.device-screen{position:relative;height:100%;border-radius:34px;background:var(--night-2);display:grid;place-items:center;overflow:hidden}
.device-screen figcaption{position:absolute;bottom:34px;inset-inline:0;text-align:center;font:500 13px/1 var(--lat);letter-spacing:.02em;color:rgb(246 246 243 / .62)}
.loader{position:relative;width:112px;height:46px;border-radius:999px;background:rgb(246 246 243 / .1)}
.loader-sq{position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:3px;background:var(--paper)}
.loader-dot{position:absolute;left:40px;top:9px;width:28px;height:28px;border-radius:50%;background:var(--cobalt);animation:shuttle 3.2s var(--ease) infinite alternate}
@keyframes shuttle{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(32px)}}

/* contact */
.contact{background:var(--ink);color:var(--paper);padding-block:clamp(88px,12vw,160px) clamp(64px,8vw,104px)}
.contact h2{font-size:clamp(2.3rem,5.6vw,5rem);line-height:1.02;letter-spacing:-.02em}
.contact p{margin-top:24px;font-size:clamp(17px,1.4vw,19px);color:rgb(246 246 243 / .78);max-width:32em}
.mail{display:inline-flex;align-items:center;gap:14px;margin-top:40px;padding:0 28px;min-height:64px;border-radius:10px;background:var(--cobalt);color:#fff;font:500 clamp(18px,1.8vw,22px)/1 var(--lat);letter-spacing:-.01em;transition:background-color .2s;max-width:100%}
.mail span{overflow-wrap:anywhere}
.mail svg{width:22px;height:22px;flex:none;transition:transform .35s var(--ease)}
.mail:hover{background:var(--cobalt-deep)}
.mail:hover svg{transform:translateX(4px)}
.contact .mail:focus-visible{outline-color:var(--paper)}

.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,96px);align-items:end}
.back-mark{width:clamp(180px,20vw,280px);height:auto;overflow:visible;margin-bottom:6px}
.back-mark rect:first-child{fill:rgb(246 246 243 / .08)}
.back-mark .sq{fill:var(--paper)}
.back-mark .dot{fill:var(--cobalt)}
.js .back-mark .dot{transform:translateX(26px);transition:transform 1.4s var(--ease) .2s}
.js .back-mark.in .dot{transform:translateX(0)}

/* footer */
.foot{background:var(--ink);color:var(--paper)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:28px 36px;border-top:1px solid rgb(246 246 243 / .12)}
.brand-inv{color:var(--paper)}
.brand-inv .mark{width:30px;height:30px}
.brand-inv .word{font-size:19px}
.foot-meta{font-size:14px;color:rgb(246 246 243 / .6)}

/* responsive */
@media (max-width:1020px){
  .hero-copy,.work-grid{grid-template-columns:minmax(0,1fr)}
  .hero-copy{align-items:start;gap:26px}
  .vrail li{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:720px){
  .nav a:not(.nav-cta){display:none}
  .top{padding-block:20px}
  .mark{width:32px;height:32px}
  .word{font-size:21px}
  .how-steps{grid-template-columns:minmax(0,1fr)}
  .end-hint{display:none}
  .sectors{font-size:1.6rem;line-height:1.4}
  .actions .btn{flex:1 1 auto}
  .rail-ends{padding-inline:0}
  .foot-row{flex-direction:column;align-items:flex-start}
  .mail{padding:0 20px;min-height:58px;width:100%;justify-content:space-between}
  .work-grid{gap:56px}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .back-mark{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .loader-dot{transform:translateX(32px)}
}