/* haisol.net v3 home (17/10/26) — the city after hours.
   Taste Skill v2 house rules: one family (Plex Sans Hebrew), five sizes, square corners, no rules/shadows/glass/gradients
   (the one exception: a neutral scrim between the 3D world and the text). Brand colours kept: signal #ff6a3d, live #3ddc97. */
:root{
  --ink:#07090c; --ink-2:#0e1218; --ink-3:#151b24; --paper:#e9edf2; --mute:#a3adbb; --line:rgba(233,237,242,.14);
  --sig:#ff6a3d; --live:#3ddc97; --web:#5cc8ff; --vis:#ffc24b; --auto:#ff7ab6;
  --t-s:15px; --t-b:18px; --t-st:24px; --t-d:clamp(34px,5vw,80px); --t-x:clamp(46px,9.2vw,148px);
  --m:clamp(16px,3vw,48px); --r:2px;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);
  --s1:8px; --s2:16px; --s3:20px; --s4:24px; --t-sm:15px; --t-md:18px; --t-xs:15px; --warm:var(--sig);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink);color-scheme:dark}
html,body{overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--paper);font:400 var(--t-b)/1.55 'IBM Plex Sans Hebrew',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.skip{position:absolute;inset-inline-start:var(--m);top:-60px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:var(--r)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
::selection{background:var(--sig);color:var(--ink)}

/* ---------- the world: fixed WebGL city behind everything ---------- */
.world{position:fixed;inset:0;z-index:0;background:var(--ink)}
.world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.world canvas:not(.still){opacity:0;transition:opacity 1.2s var(--ease-out)}
.world.on canvas:not(.still){opacity:1}
.world .still{opacity:.0}
.world.nogl{background:url(/v3/img/n-tlv-1600.webp) center/cover no-repeat}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to left,rgba(7,9,12,.9) 0%,rgba(7,9,12,.66) 34%,rgba(7,9,12,0) 62%)} /* taste-skill-ignore: neutral scrim between the 3D world and text */
main,.foot,.bar{position:relative;z-index:2}

/* ---------- bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:32px;padding:14px var(--m);background:var(--ink)}
.wm{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none}
.wm .logo{height:28px;width:auto}
.links{display:flex;gap:28px;margin-inline-start:auto}
.links a{font-size:var(--t-s);text-decoration:none;color:var(--paper);padding:12px 0;transition:color 180ms ease}
.links a:hover{color:var(--sig)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r);border:0;
  background:var(--sig);color:var(--ink);font:500 var(--t-b)/1.2 inherit;font-family:inherit;text-decoration:none;cursor:pointer;
  transition:transform 140ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.btn:hover{background:#ff8a63}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--ink-3);color:var(--paper)}
.btn.ghost:hover{background:#1d2530}
.btn.sm{min-height:44px;padding:0 16px;font-size:var(--t-s)}
.btn .dot,.mbar .dot{width:9px;height:9px;border-radius:50%;background:var(--live);flex:none}
.btn.talk:not(.ghost) .dot{background:var(--ink)}
.btn.talk[data-state="live"]{background:var(--live);color:var(--ink)}
.btn.talk[data-state="live"] .dot{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(.55)}}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- type ---------- */
.display{margin:0;font-weight:600;font-size:var(--t-x);line-height:.98;letter-spacing:-.025em}
.display.md{font-size:var(--t-d);line-height:1.04;letter-spacing:-.02em}
.display .ln{display:block}
.sub{font-size:var(--t-st);line-height:1.42;max-width:30ch;margin:28px 0 0}
.body{max-width:44ch;margin:20px 0 0}
.panel.wide .body,.p-head .body{max-width:50ch}
.statement{font-size:var(--t-st);line-height:1.42;max-width:28ch;margin:24px 0 0}
.fine{font-size:var(--t-s);color:var(--mute);margin:16px 0 0;max-width:52ch}
.cap,.now{max-width:52ch}
.now{font-size:var(--t-s);color:var(--mute);margin:24px 0 0}
.now a{color:var(--paper);display:inline-block;padding:12px 0;margin:-12px 0}
.clock{display:inline-flex;direction:ltr;color:var(--paper);font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- shots over the world ---------- */
.shot{min-height:100svh;padding:120px var(--m) 72px;display:flex;flex-direction:column;justify-content:center}
.col{max-width:min(780px,52vw)}
.hero{min-height:100svh;justify-content:flex-end;padding-bottom:56px}
.hero .col{max-width:min(900px,58vw)}
.legend{position:absolute;inset-inline-end:var(--m);bottom:56px;margin:0;font-size:var(--t-s);color:var(--mute);display:flex;gap:10px;align-items:center}
.legend .k{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend .k.sig{background:var(--sig)} .legend .k.live{background:var(--live);margin-inline-start:12px}
.story{min-height:115svh;justify-content:center}
.story .display{font-size:var(--t-x)}
.story .body{font-size:var(--t-st);line-height:1.42;max-width:30ch}
.lock{margin-top:32px;display:grid;gap:8px;max-width:440px}
.lock .nt{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;background:var(--ink-2);padding:14px 16px;border-radius:var(--r);font-size:var(--t-s)}
.lock .nt b{font-weight:600;color:var(--sig)}
.lock .nt span{grid-column:1;color:var(--paper)}
.lock .nt time{grid-column:2;grid-row:1;color:var(--mute)}
.story .col.end{max-width:min(980px,64vw)}

/* panels: solid surface beside the world, never glass */
.panel-sec{min-height:100svh;align-items:flex-start}
.panel-sec.flip{align-items:flex-end}
.panel{width:min(620px,100%);background:var(--ink-2);padding:clamp(24px,3.2vw,48px);border-radius:var(--r)}
.panel.wide{width:min(1180px,100%);margin-inline:auto}

/* call demo (product fragment, data-ui) */
.call,.wa{margin-top:28px;background:var(--ink);border-radius:var(--r);padding:20px;font-size:var(--t-s)}
.call-top,.wa-top{display:flex;align-items:center;gap:12px}
.call-top b,.wa-top b{display:block;font-weight:500;font-size:var(--t-b)}
.st{color:var(--mute)}
.call-top .tm{margin-inline-start:auto;color:var(--mute)}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sig);color:var(--ink);font-weight:600;flex:none}
.wa .av{background:var(--live)}
.wave{display:block;width:100%;height:56px;margin:16px 0}
.call-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.call-play{min-height:48px}
.who{color:var(--mute)}
.tr{list-style:none;margin:12px 0 0;padding:0;max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.tr:empty{display:none}
.tr li{background:var(--ink-3);padding:10px 12px;border-radius:var(--r);line-height:1.5}
.tr li.a{background:#13241d}
.tr li b{display:block;font-weight:500;color:var(--mute);font-size:var(--t-s)}
.sum{margin-top:14px;background:#13241d;padding:14px;border-radius:var(--r)}
.sum b{color:var(--live);font-weight:500}
.sum p{margin:6px 0 0}
.wa-log{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.wa-log .m{margin:0;max-width:86%;padding:10px 12px 26px;border-radius:var(--r);position:relative;line-height:1.5}
.wa-log .m time{position:absolute;inset-inline-end:10px;bottom:4px;font-size:var(--t-s);color:var(--mute)}
.wa-log .c{align-self:flex-start;background:var(--ink-3)}
.wa-log .a{align-self:flex-end;background:#13241d}
.wa-log .sys{align-self:center;background:none;color:var(--live);padding:6px 0}

/* photos band: the world outside, opaque */
.photos{position:relative;background:var(--ink);padding:160px var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end}
.ph{margin:0;overflow:hidden;border-radius:var(--r);background:var(--ink-2)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.big{grid-column:1/8;grid-row:1/3;aspect-ratio:16/10}
.who-txt{grid-column:8/13;grid-row:1;align-self:start}
.ph.small.a{grid-column:8/11;grid-row:2;aspect-ratio:4/3}
.ph.small.b{grid-column:11/13;grid-row:2;aspect-ratio:3/4}
.ph.small.b img{object-position:30% 50%}
.cap{grid-column:1/8;margin:0;font-size:var(--t-s);color:var(--mute)}

/* price: the figure, very large */
.price .panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:start}
.fig{margin:0;display:flex;align-items:flex-start;gap:.06em;font-weight:600;font-size:clamp(120px,15vw,232px);line-height:1;letter-spacing:-.04em;direction:ltr;justify-content:flex-end}
.fig .cur{font-size:var(--t-d);margin-top:.12em;color:var(--sig)}
.fig .per{font-size:var(--t-b);letter-spacing:0;font-weight:400;align-self:flex-end;margin-bottom:.4em;direction:rtl;color:var(--mute)}
.slide{display:inline-flex;align-items:flex-start;overflow:hidden;height:1em;line-height:1}
.slide>span{flex:none;display:block;height:1em;line-height:1}
.slide .d{display:flex;flex-direction:column;flex:none;height:auto;transition:transform 1.1s var(--ease-io)}
.slide .d::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";white-space:pre;display:block;line-height:1;text-align:center}
.inc{list-style:none;margin:28px 0 0;padding:0;font-size:var(--t-b);display:grid;gap:10px}

/* fleet: services as a set list */
.svc{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.svc li a{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;text-decoration:none;border-radius:var(--r);transition:background-color 180ms ease}
.svc li:nth-child(4n+1) a,.svc li:nth-child(4n+2) a{background:var(--ink-3)}
.svc li a:hover{background:#1d2530}
.svc li a::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:var(--hue,var(--mute))}
.svc [data-c=voice]{--hue:var(--sig)} .svc [data-c=msg]{--hue:var(--live)} .svc [data-c=web]{--hue:var(--web)}
.svc [data-c=vis]{--hue:var(--vis)} .svc [data-c=auto]{--hue:var(--auto)}
.svc .n{font-size:var(--t-b);font-weight:500}
.svc .p{margin-inline-start:auto;color:var(--mute);font-size:var(--t-s);white-space:nowrap}
.svc .p .num{color:var(--paper)}

/* quiz */
.qz-q{margin-top:28px}
.qz-q>p{margin:0 0 12px;font-weight:500}
.qz-o{display:flex;flex-wrap:wrap;gap:8px}
.qz-o button{min-height:48px;padding:0 18px;border:0;border-radius:var(--r);background:var(--ink-3);color:var(--paper);font:inherit;font-size:var(--t-s);cursor:pointer;
  transition:transform 140ms var(--ease-out),background-color 180ms ease}
.qz-o button:hover{background:#1d2530}
.qz-o button:active{transform:scale(.97)}
.qz-o button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.qz-r{margin-top:28px;background:var(--ink);padding:24px;border-radius:var(--r)}
.qz-r .k{margin:0;color:var(--live);font-size:var(--t-s)}
.qz-r h3{margin:6px 0 0;font-size:var(--t-st);font-weight:600;line-height:1.25}
.qz-price{color:var(--paper);font-weight:500}
.qz-r.pop{animation:pop 420ms var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}}

/* how: itinerary slip */
.how{flex-direction:row;align-items:center;gap:clamp(24px,6vw,96px);flex-wrap:wrap;min-height:100svh}
.how-txt{flex:1 1 380px;max-width:560px}
.slip{flex:0 1 470px;background:var(--paper);color:var(--ink);padding:32px 28px 48px;font-size:var(--t-s);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),95% 100%,90% calc(100% - 12px),85% 100%,80% calc(100% - 12px),75% 100%,70% calc(100% - 12px),65% 100%,60% calc(100% - 12px),55% 100%,50% calc(100% - 12px),45% 100%,40% calc(100% - 12px),35% 100%,30% calc(100% - 12px),25% 100%,20% calc(100% - 12px),15% 100%,10% calc(100% - 12px),5% 100%,0 calc(100% - 12px))}
.slip .sh{margin:28px 0 8px;font-weight:600}
.slip .sh:first-child{margin-top:0}
.slip .row{display:flex;align-items:baseline;gap:8px;margin:6px 0}
.slip .row i{flex:1;min-width:16px;height:4px;background:radial-gradient(circle,#07090c 1.4px,transparent 1.6px) 0 0/8px 4px repeat-x;opacity:.5} /* taste-skill-ignore: dot leaders the itinerary blueprint asks for */
.slip .row span:last-child{white-space:nowrap}
.slip .row.end{margin:28px -28px 0;padding:12px 28px;background:var(--ink);color:var(--paper);justify-content:space-between;font-weight:500}

/* faq: answers as reading text */
.qa{margin-top:40px;columns:2;column-gap:56px}
.qa p{margin:0 0 22px;break-inside:avoid;line-height:1.6}
.qa b{font-weight:600}
.more{margin:12px 0 0;color:var(--mute)}
.more a{color:var(--paper);display:inline-block;padding:10px 0}

.close{min-height:100svh}
.close .col{max-width:min(1000px,66vw)}


/* footer */
.foot{background:var(--paper);color:var(--ink);padding:56px var(--m) 28px;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto auto auto}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;font-size:var(--t-s)}
.fcols>div{display:flex;flex-direction:column;align-items:flex-start}
.fcols a,.fcols p{color:#3a4350;text-decoration:none;margin:0;padding:6px 0;line-height:1.4}
.fcols a{min-height:44px;display:inline-flex;align-items:center;padding:0}
.fcols a:hover{color:var(--ink)}
.fcols .fh{color:var(--ink);font-weight:600}
.big-wm{grid-row:3;margin:0;font-weight:600;font-size:clamp(96px,27vw,420px);line-height:.8;letter-spacing:-.05em;white-space:nowrap}
.legal{margin:20px 0 0;font-size:var(--t-s);color:#3a4350;max-width:75ch}
.legal a{color:inherit}
.credits{margin:10px 0 0;font-size:var(--t-s);line-height:1.5;color:#3a4350;max-width:75ch}
.credits a{color:inherit}

/* ---------- chat widget + mobile action bar (chat.js) ---------- */
.hc{position:fixed;left:var(--s3);right:auto;bottom:var(--s3);max-width:calc(100vw - 2*var(--s3));z-index:60}
.hc-fab{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 var(--s4);border-radius:var(--r);border:0;background:var(--paper);color:var(--ink);font:inherit;font-size:var(--t-s);font-weight:500;cursor:pointer;
  transition:transform 140ms var(--ease-out)}
.hc-fab:active{transform:scale(.97)}
.hc-dot{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.hc.on .hc-fab{display:none}
.hc-panel{width:min(380px,calc(100vw - 2*var(--s3)));height:min(560px,calc(100svh - 2*var(--s3)));display:flex;flex-direction:column;background:var(--ink-2);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)} /* taste-skill-ignore: chat panel is a real floating dialog */
.hc-panel[hidden]{display:none}
.hc-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s2) var(--s3);background:var(--ink-3)}
.hc-head b{display:block;font-size:var(--t-md)}
.hc-sub{font-size:var(--t-sm);color:var(--mute)}
.hc-x{background:none;border:0;color:var(--mute);font-size:18px;cursor:pointer;min-width:44px;min-height:44px}
.hc-log{flex:1;overflow-y:auto;padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.hc-m{max-width:85%;padding:10px 14px;border-radius:var(--r);font-size:var(--t-sm);line-height:1.55;overflow-wrap:anywhere}
.hc-m a{color:var(--sig)}
.hc-ai{align-self:flex-start;background:var(--ink-3)}
.hc-me{align-self:flex-end;background:var(--paper);color:var(--ink)}
.hc-sys{align-self:center;color:var(--mute);text-align:center}
.hc-typing{display:flex;gap:5px}
.hc-typing i{width:6px;height:6px;border-radius:50%;background:var(--mute);animation:hcb 1s infinite ease-in-out}
.hc-typing i:nth-child(2){animation-delay:.15s} .hc-typing i:nth-child(3){animation-delay:.3s}
@keyframes hcb{50%{opacity:.25}}
.hc-form{display:flex;gap:var(--s1);padding:var(--s2) var(--s3);background:var(--ink-3)}
.hc-in{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:var(--r);border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:16px}
.hc-send{flex:none;min-height:44px;padding:0 var(--s2);border-radius:var(--r);border:0;background:var(--paper);color:var(--ink);font:inherit;font-weight:500;cursor:pointer}
.hc-fine{margin:0;padding:8px var(--s3) 12px;font-size:var(--t-s);color:var(--mute);background:var(--ink-3)}
.mbar{display:none}

/* ---------- motion helpers (GSAP owns the motion; these are the no-JS-safe parts) ---------- */
.word-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.word{display:inline-block;will-change:transform}

/* ---------- tablet / phone ---------- */
@media (max-width:999px){
  .col,.hero .col,.story .col.end,.close .col{max-width:100%}
  .scrim{background:linear-gradient(to top,rgba(7,9,12,.94) 0%,rgba(7,9,12,.78) 40%,rgba(7,9,12,.1) 66%,rgba(7,9,12,0) 100%)} /* taste-skill-ignore: neutral scrim between the 3D world and text */ /* taste-skill-ignore: neutral scrim between the 3D world and text */
  .shot{justify-content:flex-end}
  .price .panel{grid-template-columns:minmax(0,1fr)}
  .fig{justify-content:flex-start}
  .photos{grid-template-columns:minmax(0,1fr);padding:96px var(--m)}
  .ph.big,.who-txt,.ph.small.a,.ph.small.b,.cap{grid-column:1;grid-row:auto}
  .ph.small.b{aspect-ratio:4/3}
  .legend{position:static;margin-top:20px}
}
@media (max-width:760px){
  :root{--t-x:12.2vw;--t-d:9.4vw;--t-st:21px;--t-b:17px}
  body{padding-bottom:76px}
  .links{display:none}
  .bar{justify-content:space-between}
  .bar .talk{display:none}
  .shot{padding:96px var(--m) 40px}
  .story{min-height:130svh}
  .panel-sec,.panel-sec.flip{align-items:stretch;min-height:auto;padding-top:64px}
  .panel{padding:24px 18px}
  .acts .btn{flex:1 1 100%}
  .hero .sub{font-size:var(--t-b);margin-top:18px}
  .hero .acts{margin-top:22px}
  .hero .btn.dt{display:none}
  .hero .now{margin-top:14px}
  .hero{padding-bottom:28px}
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc li a{background:none}
  .svc li:nth-child(odd) a{background:var(--ink-3)}
  .svc li a{flex-wrap:wrap;row-gap:2px}
  .qa{columns:1}
  .how{flex-direction:column;align-items:stretch}
  .slip{flex-basis:auto;padding:24px 18px 44px}
  .slip .row.end{margin:24px -18px 0;padding:12px 18px}
  .fig{font-size:31vw}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .big-wm{font-size:30vw}
  .mbar{display:flex;gap:var(--s1);position:fixed;inset:auto 0 0 0;z-index:55;padding:var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));background:var(--ink)}
  .mbar>*{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:48px;border-radius:var(--r);font:inherit;font-size:var(--t-sm);font-weight:500;text-decoration:none;cursor:pointer;border:0;background:var(--ink-3);color:var(--paper);padding:0 var(--s1);white-space:nowrap;transition:transform 140ms var(--ease-out)}
  .mbar>*:active{transform:scale(.97)}
  .mbar .btn.talk{flex:1.5;margin:0;background:var(--sig);color:var(--ink);font-size:var(--t-sm)}
  .mbar .btn.talk .dot{background:var(--ink)}
  .mbar .btn.talk[data-state="live"]{background:var(--live)}
  .hc-fab{display:none}
  .hc{left:0;right:0;bottom:0;max-width:none}
  .hc-panel{width:100vw;height:100svh;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}