:root{
  color-scheme:light;
  --bg:#F3F3F1; --card:#FFFFFF; --ink:#111111; --ink2:#3A3A3A; --mute:#6B6B6B; --line:#D8D8D4;
  --dark:#161616; --dline:#2E2E2E; --dmute:#A3A3A3;
  --blue:#2BB5FF; --blue-ink:#0B6FA8;
  --fd:"Heebo","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
}
html{background:var(--bg);direction:rtl}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fd);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
img{max-width:100%}
::selection{background:var(--ink);color:#fff}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--fd);text-wrap:balance}

#ribbon{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.page{position:relative;z-index:1;overflow-x:clip}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;inset-inline:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:rgba(243,243,241,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:32px;height:68px}
.hdr .logo img{height:28px;width:auto;display:block;filter:brightness(0)}
.menu{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-size:15px;font-weight:500}
.menu a{text-decoration:none;position:relative;padding-block:6px}
.menu a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.hdr .cta{margin-inline-start:auto}
.burger{display:none;margin-inline-start:auto;width:44px;height:44px;border:1px solid var(--ink);background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;inset-inline:11px;height:1.5px;background:var(--ink);transition:transform .3s,top .3s}
.burger span:first-child{top:16px}.burger span:last-child{top:26px}
.nav-open .burger span:first-child{top:21px;transform:rotate(45deg)}
.nav-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
@media (max-width:1060px){
  .menu{position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--ink);padding:8px clamp(20px,4vw,56px) 20px;font-size:22px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
  .menu li{border-bottom:1px solid var(--line)}
  .menu a{display:block;padding-block:14px}
  .nav-open .menu{opacity:1;transform:none;pointer-events:auto}
  .burger{display:block}
  .hdr .cta{display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:18px;font:500 16px/1 var(--fd);text-decoration:none;padding:17px 24px;border:1px solid var(--ink);cursor:pointer;transition:background .25s,color .25s}
.btn .ar{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(-5px)}
.btn.k{background:var(--ink);color:#fff}
.btn.k:hover{background:#fff;color:var(--ink)}
.btn.o{background:transparent;color:var(--ink)}
.btn.o:hover{background:var(--ink);color:#fff}
.btn.w{background:#fff;color:var(--ink);border-color:#fff}
.btn.w:hover{background:transparent;color:#fff}
.btn.sm{padding:12px 18px;font-size:15px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.more{display:inline-flex;align-items:center;gap:10px;font-weight:500;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.more .ar{transition:transform .35s var(--ease)}
.more:hover .ar{transform:translateX(-5px)}

/* ---------- type ---------- */
.h1{font-weight:800;font-size:clamp(44px,5.6vw,92px);line-height:.98;letter-spacing:-.035em}
.h2{font-weight:800;font-size:clamp(36px,4.6vw,72px);line-height:1;letter-spacing:-.035em}
.h3{font-weight:700;font-size:clamp(24px,2.2vw,32px);line-height:1.1;letter-spacing:-.02em}
.soft{font-weight:300}
.lede{font-size:clamp(18px,1.45vw,21px);line-height:1.55;color:var(--ink2);max-width:34em}
.kicker{font-size:15px;font-weight:500;color:var(--mute);margin-bottom:22px}
.sec{padding-block:clamp(80px,11vw,160px)}
.sec-head{max-width:700px;display:grid;gap:22px;margin-bottom:clamp(40px,5vw,64px)}

/* ---------- open blocks: no boxes; the ribbon keeps clear of them instead (ribbon.js) ---------- */
.faq details:last-child,.feats div:nth-last-child(-n+2){border-bottom:0}
@media (max-width:760px){.feats div:nth-last-child(2){border-bottom:1px solid var(--line)}}
#ribbon{transition:opacity .8s var(--ease)}
@media (max-width:760px){.past-hero #ribbon{opacity:.35}}

/* ---------- reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}
.rv-on [data-split] .w>span{transform:translateY(110%);transition:transform 1s var(--ease)}
.rv-on [data-split].in .w>span{transform:none}
.rv-on [data-rv]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-on [data-rv].in{opacity:1;transform:none}

/* ---------- home hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:120px;padding-bottom:80px}
.hero .copy{max-width:640px}
.hero .lede{margin-top:30px}
@media (max-width:760px){
  .hero{align-items:flex-end;min-height:auto;padding-top:46svh;padding-bottom:40px}
  .hero .copy{background:linear-gradient(to bottom,rgba(243,243,241,0) 0,rgba(243,243,241,.88) 70px);padding:40px 18px 22px;margin-inline:-6px}
}

/* ---------- the owner's face in pixels, behind the home hero ---------- */
.hero{position:relative}
.hero .copy{position:relative;z-index:1}
.face{position:absolute;top:70px;height:calc(100% - 70px);inset-inline-end:9%;width:min(37%,560px);pointer-events:none;visibility:hidden}
/* the portrait and the flakes that crumble off it are drawn on one layer the size of the window, behind the text,
   so nothing gets cut at the bottom of the hero and the flakes can drift down the page */
.face-layer{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
@media (max-width:760px){.face{top:62px;height:46svh;inset-inline:0;width:100%}}

/* ---------- page hero (inner pages) ---------- */
.phero{padding-top:clamp(150px,18vw,230px);padding-bottom:clamp(60px,8vw,110px)}
.phero .copy{max-width:760px}
.phero .lede{margin-top:28px}
.crumb{font-size:14.5px;color:var(--mute);margin-bottom:26px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:16px;min-height:340px;padding:30px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.35);border-color:var(--ink)}
.card .ill{height:92px;display:flex;align-items:flex-end;margin-bottom:10px}
.card .ill svg{height:100%;width:auto;overflow:visible}
.card p{color:var(--mute);font-size:16px}
.card .more{margin-top:auto;align-self:flex-start;font-size:15px}
.card.dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.card.dark p{color:var(--dmute)}
.card.dark:hover{border-color:var(--blue)}

/* ---------- 3D carousel (home) ---------- */
.carousel{position:relative;width:100vw;margin-inline:calc(50% - 50vw);height:clamp(520px,42vw,580px);perspective:1700px;perspective-origin:50% 30%;margin-top:10px;touch-action:pan-y;user-select:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 7%,#000 24%,#000 76%,rgba(0,0,0,.35) 93%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 7%,#000 24%,#000 76%,rgba(0,0,0,.35) 93%,transparent 100%)}
.ring{position:absolute;inset:0;transform-style:preserve-3d;cursor:grab}
.ring.dragging{cursor:grabbing}
.carousel .card{position:absolute;top:10px;will-change:transform,opacity,filter;left:50%;width:min(380px,72vw);margin-left:calc(min(380px,72vw) / -2);min-height:400px;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:box-shadow .5s var(--ease),border-color .3s}
.carousel .card:hover{transform:none}
.carousel .card.front{box-shadow:0 50px 90px -45px rgba(0,0,0,.5);border-color:var(--ink)}
.carousel .card.dark.front{border-color:var(--blue)}
.carousel .card img,.carousel .card svg{pointer-events:none}
.car-ctrl{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:300}
.car-btn{width:52px;height:52px;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;font:400 20px/1 var(--fd);transition:background .2s,color .2s}
.car-btn:hover{background:var(--ink);color:#fff}
@media (max-width:640px){.carousel{height:540px}.carousel .card{min-height:420px}}

/* ---------- audiences ---------- */
.aud{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.aud div{padding:28px 24px 8px 0;border-inline-start:1px solid var(--line);padding-inline-start:24px;display:grid;gap:10px;align-content:start}
.aud div:first-child{border-inline-start:0;padding-inline-start:0}
.aud h3{font-size:22px;font-weight:700;letter-spacing:-.015em}
.aud p{color:var(--mute);font-size:15.5px}
@media (max-width:900px){.aud{grid-template-columns:1fr 1fr}.aud div:nth-child(3){border-inline-start:0;padding-inline-start:0}}
@media (max-width:560px){.aud{grid-template-columns:1fr}.aud div{border-inline-start:0;padding-inline-start:0;border-bottom:1px solid var(--line);padding-bottom:22px}}

/* ---------- story + side row ---------- */
.story{display:grid;gap:20px;max-width:40em;font-size:clamp(18px,1.4vw,20px);line-height:1.7;color:var(--ink2)}
.story .more{justify-self:start;margin-top:6px;font-size:16px;color:var(--ink)}
.aside-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;background:var(--card);border:1px solid var(--line);padding:28px clamp(20px,3vw,40px)}
.aside-row p{color:var(--mute);margin-top:6px;max-width:44em}

/* ---------- the story as floors of type: no boxes, the lines are the slabs ---------- */
.floors-story{max-width:860px;display:grid}
.fl{display:grid;grid-template-columns:120px 1fr;gap:6px 28px;align-items:baseline;padding:22px 0 20px;position:relative}
.fl::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--ink);transform-origin:right}
.fl.base::after{height:7px}
.fl-k{font-size:14px;font-weight:500;color:var(--mute)}
.fl b{display:block;font-weight:800;font-size:clamp(46px,6.4vw,104px);line-height:.95;letter-spacing:-.04em}
.fl p{margin-top:10px;font-size:17px;color:var(--ink2);max-width:32em}
.fl:not(.base) b{font-weight:300}
.floors-note{margin-top:30px;max-width:44em;font-size:17px;color:var(--ink2)}
.floors-note .more{margin-inline-start:10px;color:var(--ink)}
@media (max-width:640px){.fl{grid-template-columns:1fr}}
/* built from the ground up: the foundation first, then each floor */
.rv-on .floors-story[data-rv]{opacity:1;transform:none}
.rv-on .floors-story .fl > *{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform 1s var(--ease)}
.rv-on .floors-story .fl::after{transform:scaleX(0);transition:transform 1.1s var(--ease)}
.rv-on .floors-story .fl.base > *,.rv-on .floors-story .fl.base::after{transition-delay:.05s}
.rv-on .floors-story .fl:nth-child(2) > *,.rv-on .floors-story .fl:nth-child(2)::after{transition-delay:.4s}
.rv-on .floors-story .fl:nth-child(1) > *,.rv-on .floors-story .fl:nth-child(1)::after{transition-delay:.75s}
.rv-on .floors-story.in .fl > *{opacity:1;transform:none}
.rv-on .floors-story.in .fl::after{transform:none}

/* ---------- who we build for: one line, the audience rotates ---------- */
.who{display:grid;gap:26px;max-width:900px}
.who-h{font-size:clamp(40px,5.4vw,84px)}
.rot{display:inline-grid;vertical-align:top}
.rot > span{grid-area:1/1;font-weight:300;opacity:0;transform:translateY(.35em);transition:opacity .6s var(--ease),transform .7s var(--ease);white-space:nowrap}
.rot > span.on{opacity:1;transform:none}
.rot > span.out{opacity:0;transform:translateY(-.35em)}
.who-links{display:flex;flex-wrap:wrap;gap:14px 34px}
@media (max-width:640px){.rot > span{white-space:normal}}

/* ---------- dark band ---------- */
.band{background:var(--dark);color:#fff;padding:clamp(40px,6vw,80px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
.band .lede{color:#C9C9C9}
@media (max-width:900px){.band{grid-template-columns:1fr}}
.nums{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--dline)}
.nums div{padding-top:22px;display:grid;gap:8px;padding-inline-start:18px;border-inline-start:1px solid var(--dline)}
.nums div:first-child{border-inline-start:0;padding-inline-start:0}
.nums b{font:800 clamp(30px,3.2vw,48px)/1 var(--fd);letter-spacing:-.03em;direction:ltr;text-align:right}
.nums span{font-size:14px;color:var(--dmute)}
@media (max-width:560px){.nums{grid-template-columns:1fr}.nums div{border-inline-start:0;padding-inline-start:0;border-bottom:1px solid var(--dline);padding-bottom:16px}}

/* ---------- works: real projects on real-looking screens ---------- */
.work{display:grid;grid-template-columns:1fr minmax(260px,360px);gap:clamp(30px,5vw,80px);align-items:center;margin-top:clamp(20px,4vw,40px)}
.work + .work{margin-top:clamp(80px,10vw,140px)}
.work.flip{grid-template-columns:minmax(260px,360px) 1fr}
.work.flip .devices{order:2}
.work-text{display:grid;gap:14px;align-content:start;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-top:2px solid var(--ink);padding:26px 28px}
.work-k{font-size:14px;font-weight:500;color:var(--mute)}
.work-text p{color:var(--ink2)}
.work-n{font-size:15px}
.work-n b{font-weight:800}
.work-text .more{justify-self:start}
@media (max-width:960px){.work,.work.flip{grid-template-columns:1fr}.work.flip .devices{order:0}}

.tv{position:relative;max-width:900px;width:100%;justify-self:center;padding-bottom:64px}
.tv-screen{position:relative;aspect-ratio:16/9;background:#000;border:12px solid #0E0E0E;border-radius:12px 12px 3px 3px;overflow:hidden;box-shadow:0 60px 90px -50px rgba(0,0,0,.6),inset 0 0 0 1px #222}
.tv-chin{height:16px;background:linear-gradient(#171717,#0B0B0B);border-radius:0 0 8px 8px;position:relative}
.tv-chin::after{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--blue);box-shadow:0 0 8px var(--blue)}
.tv-stand{position:absolute;left:50%;bottom:0;width:38%;height:64px;margin-left:-19%}
.tv-stand::before{content:"";position:absolute;left:50%;top:0;width:12%;height:44px;margin-left:-6%;background:linear-gradient(90deg,#1a1a1a,#3c3c3c 50%,#1a1a1a)}
.tv-stand::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:14px;border-radius:50% 50% 6px 6px / 100% 100% 6px 6px;background:linear-gradient(#3a3a3a,#141414);box-shadow:0 18px 30px -12px rgba(0,0,0,.5)}
.glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 45%)}

/* machria, rebuilt in its own identity at 1280x720 and scaled into the screen */
.mx{position:absolute;top:0;right:0;width:1280px;height:720px;transform-origin:top right;background:#fff;color:#1B2533;font-family:"IBM Plex Sans Hebrew","Heebo",sans-serif;overflow:hidden;direction:rtl}
.mx-scroll{will-change:transform}
.mx-nav{display:flex;align-items:center;gap:26px;height:64px;padding:0 44px;border-bottom:1px solid #E3E6EA;font-size:15px;color:#3A4655}
.mx-nav b{font:400 26px "Suez One",serif;color:#1B2533;margin-inline-end:20px}
.mx-nav i{font-style:normal;margin-inline-start:auto;background:#1D4F91;color:#fff;padding:8px 16px;border-radius:2px;font-weight:600}
.mx-hero{display:grid;grid-template-columns:1fr 560px;gap:56px;padding:56px 44px 40px;align-items:start}
.mx-k{font-size:15px;font-weight:600;color:#1D4F91}
.mx h3{font:400 58px/1.08 "Suez One",serif;margin:14px 0 18px;color:#1B2533}
.mx-p{font-size:18px;line-height:1.65;color:#3A4655}
.mx-cta{display:flex;gap:16px;align-items:center;margin-top:26px}
.mx-b{background:#1D4F91;color:#fff;padding:14px 22px;font-weight:600;border-radius:2px}
.mx-l{color:#1D4F91;font-weight:600}
.mx-s{font-size:14px;color:#6B7684;margin-top:12px}
.mx-demo{position:relative;border:1px solid #D5DAE0;border-top:3px double #1D4F91;background:#F5F6F2;padding:18px 20px 22px}
.mx-dh{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:#6B7684}
.mx-dh b{font:400 20px "Suez One",serif;color:#1B2533}
.mx-q{margin:14px 0;border:1px solid #C9CFD6;background:#fff;padding:12px 14px;font-weight:600;font-size:15px}
.mx-t{background:#fff;border:1px solid #E3E6EA}
.mx-r{display:grid;grid-template-columns:44px 1.3fr 1fr .8fr .9fr 52px;gap:10px;align-items:center;padding:11px 12px;border-top:1px solid #EEF0F3;font-size:14px}
.mx-th{border-top:0;font-size:12px;color:#6B7684;font-weight:600}
.mx-r b{font-size:18px;color:#1D4F91}
.mx-r i{display:block;height:10px;background:#1B2533;opacity:.82;border-radius:1px}
.mx-stamp{position:absolute;bottom:-14px;left:22px;transform:rotate(-8deg);border:2px solid #9E2B25;color:#9E2B25;font-weight:700;font-size:14px;padding:6px 10px;border-radius:3px;background:rgba(255,255,255,.85)}
.mx-band{display:grid;grid-template-columns:repeat(4,1fr);margin:24px 44px 0;border-top:3px double #1D4F91;padding:26px 0 60px}
.mx-band div{display:grid;gap:4px;padding-inline-start:20px;border-inline-start:1px solid #E3E6EA}
.mx-band div:first-child{border:0;padding:0}
.mx-band b{font:400 40px "Suez One",serif;direction:ltr;text-align:right}
.mx-band span{color:#6B7684;font-size:15px}

.devices{position:relative;padding:0 0 40px 70px}
.laptop{position:relative}
.lp-screen{position:relative;aspect-ratio:16/10;border:12px solid #111;border-bottom-width:16px;border-radius:14px 14px 0 0;overflow:hidden;background:#000;box-shadow:0 50px 80px -50px rgba(0,0,0,.55)}
.lp-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lp-base{height:16px;margin-inline:-7%;background:linear-gradient(#dcdcd9,#a9a9a5);border-radius:0 0 14px 14px;position:relative;box-shadow:0 20px 30px -14px rgba(0,0,0,.4)}
.lp-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;margin-left:-8%;background:#9a9a96;border-radius:0 0 8px 8px}
.phone{position:absolute;left:0;bottom:0;width:clamp(110px,22%,190px);aspect-ratio:9/19.5;border:7px solid #0E0E0E;border-radius:28px;overflow:hidden;background:#000;box-shadow:0 40px 60px -30px rgba(0,0,0,.6)}
.ph-screen{position:absolute;inset:0}
.ph-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.phone::before{content:"";position:absolute;top:6px;left:50%;width:34%;height:14px;margin-left:-17%;background:#0E0E0E;border-radius:10px;z-index:2}

/* ---------- showcase: one screen, pick the work ---------- */
.showcase{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:960px){.showcase{grid-template-columns:1fr}.showcase .tv{order:-1}}
.picker{display:grid;gap:10px;align-content:center}
.pick{position:relative;display:grid;gap:6px;text-align:start;font:inherit;color:var(--ink);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);padding:18px 20px 20px;cursor:pointer;overflow:hidden;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.pick small{font-size:13px;color:var(--mute);font-weight:500}
.pick b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.pick span{font-size:14.5px;color:var(--mute);line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.pick:hover{border-color:var(--ink)}
.pick.on{background:#fff;border-color:var(--ink);transform:translateX(-6px)}
.pick.on span{max-height:120px;opacity:1}
.pick .bar{position:absolute;bottom:0;inset-inline-start:0;height:3px;width:0;background:var(--ink)}
.pick.on .bar{background:var(--blue)}
.pick.on.timed .bar{animation:fillbar var(--dur,9s) linear forwards}
@keyframes fillbar{from{width:0}to{width:100%}}
.picker .more{justify-self:start;margin-top:10px}
.picker .more[hidden]{display:none!important}

.showcase .tv{max-width:none}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);overflow:hidden;background:#fff}
.slide.on{opacity:1}
.slide img.scroller{display:block;width:100%;height:auto;will-change:transform}

/* replicas on the TV share one frame: built at 1280px wide, scaled to the screen */
.scaled{position:absolute;top:0;right:0;width:1280px;height:720px;transform-origin:top right;overflow:hidden;direction:rtl}

/* Gilboa CRM, rebuilt from its real menus and colours — structure only: no customer names, no money */
.gx{background:#EEF3F8;color:#11243A;font-family:"Heebo",sans-serif;font-size:15px}
.gx-app{display:grid;grid-template-columns:220px 1fr;height:100%}
.gx-side{background:#0E3A6E;color:#BCD3EA;padding:20px 14px;display:flex;flex-direction:column;gap:4px}
.gx-logo{display:flex;align-items:center;gap:10px;color:#fff;font:400 24px "Secular One","Heebo",sans-serif;margin-bottom:18px}
.gx-logo span{width:36px;height:36px;border-radius:10px;background:#22A6B3;display:grid;place-items:center;font-size:20px}
.gx-sec{font-size:12px;color:#7FA3C8;margin:12px 8px 4px}
.gx-side a{padding:10px 12px;border-radius:10px;display:flex;justify-content:space-between;align-items:center}
.gx-side a.on{background:#fff;color:#0E3A6E;font-weight:700}
.gx-side a i{font-style:normal;background:#D0645B;color:#fff;font-size:12px;border-radius:99px;padding:1px 8px}
.gx-main{padding:22px 26px 40px;will-change:transform}
.gx-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.gx-top h4{margin:0;font:400 30px "Secular One","Heebo",sans-serif;color:#0E3A6E}
.gx-date{background:#DCEEF8;color:#1868A6;font-weight:600;padding:4px 12px;border-radius:99px;font-size:13px}
.gx-search{flex:1;background:#fff;border:1px solid #DCE5EF;border-radius:10px;padding:10px 14px;color:#5E6E82}
.gx-btn{background:#1868A6;color:#fff;font-weight:700;padding:10px 16px;border-radius:10px}
.gx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.gx-kpis div,.gx-card{background:#fff;border:1px solid #DCE5EF;border-radius:16px;box-shadow:0 1px 2px rgba(14,58,110,.05),0 10px 28px -12px rgba(14,58,110,.18)}
.gx-kpis div{padding:16px 18px;display:grid;gap:4px}
.gx-kpis small{color:#56687D;font-size:13px}
.gx-kpis b{font:400 34px/1 "Secular One","Heebo",sans-serif;color:#0E3A6E}
.gx-kpis em{font-style:normal;font-size:12.5px;color:#56687D}
.gx-kpis em.ok{color:#11704F}.gx-kpis em.warn{color:#8A4F06}
.gx-row{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;margin-bottom:16px}
.gx-card{padding:16px 18px}
.gx-card h5{margin:0 0 12px;font:400 19px "Secular One","Heebo",sans-serif;color:#0E3A6E;display:flex;align-items:center;gap:10px}
.gx-t{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid #E9F0F7}
.gx-t b{display:block;font-size:14px;margin-bottom:6px}
.gx-t em{font-style:normal;color:#56687D;font-size:13px}
.gx-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700}
.gx-av.c1{background:#1C75B8}.gx-av.c2{background:#22A6B3}.gx-av.c3{background:#E09B2D}
.gx-t .bar{display:block;height:7px;background:#E9F0F7;border-radius:99px;overflow:hidden}
.gx-t .bar u{display:block;height:100%;background:#22A6B3;border-radius:99px}
.gx-note{font-size:12.5px;color:#56687D;margin-top:8px}
.gx-map svg{display:block;width:100%;height:auto;border-radius:10px}
.gx-pill{font:600 12px "Heebo",sans-serif;background:#FBEFD9;color:#8A4F06;padding:3px 10px;border-radius:99px}
.gx-tr{display:grid;grid-template-columns:1.3fr 1fr 1.1fr 1fr 90px;gap:12px;align-items:center;padding:10px 4px;border-top:1px solid #E9F0F7;font-size:14px}
.gx-th{border-top:0;color:#56687D;font-size:12.5px;font-weight:600}
.gx-tr i{display:block;height:10px;border-radius:2px;background:#11243A;opacity:.75}
.st{justify-self:start;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.st.s1{background:#DFF3EA;color:#11704F}.st.s2{background:#DCEEF8;color:#1868A6}.st.s3{background:#FBE4E1;color:#A93226}

/* a site that lives on one screen: show its states one after another */
.frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s var(--ease)}
.frames img.on{opacity:1}

/* ---------- steps (a real sequence) ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(18px,3vw,44px);position:relative}
.steps::before{content:"";position:absolute;top:6px;inset-inline:0;height:1px;background:var(--ink)}
.steps li{position:relative;padding-top:40px}
.steps li::before{content:"";position:absolute;top:0;inset-inline-start:0;width:13px;height:13px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink);box-sizing:border-box}
.steps li:last-child::before{background:var(--ink)}
.steps h3{font-size:22px;font-weight:700;margin-bottom:10px;letter-spacing:-.015em}
.steps p{color:var(--mute);font-size:15.5px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:30px}.steps::before{display:none}.steps li{border-top:1px solid var(--ink)}.steps li::before{top:-7px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ---------- feature list ---------- */
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;border-top:1px solid var(--ink)}
.feats div{padding:26px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}
.feats h3{font-size:21px;font-weight:700;letter-spacing:-.015em}
.feats p{color:var(--mute);font-size:16px}
@media (max-width:760px){.feats{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr minmax(320px,480px);gap:clamp(36px,6vw,96px);align-items:center}
@media (max-width:1000px){.split{grid-template-columns:1fr}}
.panel{background:var(--card);border:1px solid var(--ink)}
.note{font-size:13.5px;color:var(--mute);margin-top:12px}

/* ---------- closing call ---------- */
.close{text-align:center;display:grid;justify-items:center;gap:26px;padding-block:clamp(110px,15vw,210px)}
.close .h2{max-width:14em}
.close .lede{text-align:center}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--ink);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font-size:19px;font-weight:700;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:26px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink2);padding-bottom:22px;max-width:46em}

/* ---------- whatsapp demo ---------- */
.demo{display:grid;width:100%}
.chat{padding:14px;background:#fff;border:1px solid var(--ink)}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.av{width:32px;height:32px;background:var(--ink);color:#fff;display:grid;place-items:center}
.av svg{width:15px;height:15px}
.chat-head b{display:block;font-size:15px;line-height:1.2}
.chat-head small{font-size:12.5px;color:var(--mute)}
.msgs{display:flex;flex-direction:column;gap:8px;padding-top:14px;min-height:236px}
.msg{max-width:86%;padding:9px 13px 8px;font-size:15px;line-height:1.45;transition:opacity .35s,transform .35s}
.msg.in{align-self:flex-start;background:#F0F0EE}
.msg.out{align-self:flex-end;background:var(--ink);color:#fff}
.msg time{display:block;font-size:11px;color:#8A8A8A;margin-top:3px;text-align:end}
.typing{align-self:flex-end;display:flex;gap:4px;background:var(--ink);opacity:0;height:0;overflow:hidden;padding:0 12px;transition:opacity .2s}
.typing.show{opacity:1;height:auto;padding-block:10px}
.typing i{width:6px;height:6px;border-radius:50%;background:#bbb;animation:dot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25}50%{opacity:1}}
.off{opacity:0;transform:translateY(6px)}
.link{display:block;width:100%;height:54px;overflow:visible}
.link .wire{stroke:var(--ink);stroke-width:1.5;fill:none}
.link .pulse{stroke:var(--blue);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:22 140;stroke-dashoffset:22}
.link.go .pulse{animation:flow .8s ease-in forwards}
@keyframes flow{from{stroke-dashoffset:22}to{stroke-dashoffset:-100}}
.crm{padding:14px 16px 8px;background:#fff;border:1px solid var(--ink)}
.crm-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:var(--mute)}
.pill{font-size:12px;font-weight:700;color:#fff;background:var(--ink);padding:4px 10px}
.crm dl{margin:0;display:grid}
.crm dl div{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px;transition:opacity .35s,transform .35s}
.crm dt{color:var(--mute)}
.crm dd{margin:0;font-weight:500}

/* ---------- inventory demo (project sites) ---------- */
.inv{padding:22px}
.inv-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.inv-top b{font-size:18px}
.legend{display:flex;gap:14px;font-size:13px;color:var(--mute)}
.legend i{display:inline-block;width:11px;height:11px;margin-inline-end:6px;vertical-align:-1px;border:1px solid var(--ink)}
.legend .s i{background:var(--ink)}
.floors{display:grid;gap:6px}
.floor{display:grid;grid-template-columns:44px repeat(4,1fr);gap:6px;align-items:center}
.floor span{font-size:12.5px;color:var(--mute)}
.unit{height:38px;border:1px solid var(--ink);background:#fff;cursor:pointer;font:500 13px var(--fd);color:var(--ink);transition:background .2s,color .2s,box-shadow .2s}
.unit.sold{background:var(--ink);color:#777;cursor:default}
.unit:not(.sold):hover,.unit.sel{box-shadow:inset 0 0 0 2px var(--blue)}
.ucard{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ucard div{display:grid;gap:2px}
.ucard small{font-size:12px;color:var(--mute)}
.ucard b{font-size:17px}

/* ---------- knowledge demo ---------- */
.kb{padding:20px}
.kb .q{border:1px solid var(--ink);padding:12px 14px;font-weight:500;display:flex;gap:10px;align-items:center}
.kb .q svg{width:16px;height:16px;flex:none}
.kb .a{margin-top:14px;font-size:15.5px;line-height:1.6}
.kb .src{margin-top:14px;display:grid;gap:8px}
.kb .src div{display:flex;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:10px 12px;font-size:14px}
.kb .src span{color:var(--mute)}
.kb mark{background:none;box-shadow:inset 0 -.45em 0 rgba(43,181,255,.35);color:inherit}

/* ---------- comparison table ---------- */
.tbl{overflow-x:auto;border-top:1px solid var(--ink)}
.tbl table{width:100%;border-collapse:collapse;min-width:620px;font-size:16px}
.tbl th,.tbl td{text-align:start;padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:700}
.tbl td:first-child{color:var(--mute);width:24%}

/* ---------- contact ---------- */
.form{display:grid;gap:14px;max-width:720px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:500}
.field input,.field textarea,.field select{font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #BDBDBA;border-radius:0;padding:13px 14px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.form .btn{justify-self:start}
.hint{font-size:13px;color:var(--mute)}
.direct{display:grid;gap:18px;align-content:start}
.direct div{border-top:1px solid var(--ink);padding-top:14px;display:grid;gap:4px}
.direct small{font-size:13px;color:var(--mute)}
.direct b{font-size:19px;direction:ltr;text-align:right;user-select:all}
.copybtn{font:500 13px var(--fd);background:transparent;border:1px solid var(--ink);padding:4px 10px;cursor:pointer;justify-self:start}
.copybtn:hover{background:var(--ink);color:#fff}

/* ---------- footer ---------- */
.ftr{background:var(--dark);color:#fff;position:relative;z-index:1}
.ftr .wrap{padding-block:56px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.ftr img{height:26px;width:auto;filter:brightness(0) invert(1)}
.ftr p{color:var(--dmute);font-size:15px;margin-top:16px;max-width:26em}
.ftr h4{font-size:14px;color:var(--dmute);font-weight:500;margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.ftr a{text-decoration:none}.ftr a:hover{text-decoration:underline}
.ftr .bottom{grid-column:1/-1;border-top:1px solid var(--dline);padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--dmute)}
@media (max-width:760px){.ftr .wrap{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- landing-page samples: the picker as an open list of names, no boxes ---------- */
.works.tight{padding-top:0}
.picker.open{gap:0}
.picker.open .pick{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-top:1px solid var(--line);padding:16px 0 18px;gap:4px}
.picker.open .pick:last-of-type{border-bottom:1px solid var(--line)}
.picker.open .pick b{font-size:clamp(26px,2.5vw,36px);font-weight:300;letter-spacing:-.02em;line-height:1.05;transition:font-weight .3s}
.picker.open .pick:hover b,.picker.open .pick.on b{font-weight:800}
.picker.open .pick.on{background:none;transform:none}
.picker.open .pick .bar{height:2px}
/* a sample landing page opened over the site */
.demo-view{position:fixed;inset:0;z-index:200;background:#0E0E0E;display:flex;flex-direction:column}
.demo-view iframe{flex:1;width:100%;border:0;background:#fff}
.dv-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:52px;padding-inline:clamp(16px,3vw,32px);color:#fff;font-size:15px}
.dv-close{font:inherit;font-weight:600;color:#fff;background:none;border:0;cursor:pointer;padding:8px 0}
.dv-close:hover,.dv-new:hover{color:var(--blue)}
.dv-new{color:rgba(255,255,255,.7);text-decoration:none}
.viewing,.viewing body{overflow:hidden}

/* cookie consent: one quiet line at the bottom, not a box over the page */
.consent{position:fixed;inset-inline:0;bottom:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding:14px clamp(16px,4vw,48px);background:rgba(255,255,255,.96);border-top:1px solid var(--ink);font-size:14.5px;line-height:1.5}
.consent[hidden]{display:none}
.consent p{margin:0;max-width:62ch}
.consent div{display:flex;gap:10px}