/* חשמל שבת · concept build by Lux Media Network */
:root{
  --night:#0D1220; --night2:#151C30; --dusk:#1E2742; --paper:#F2ECE1; --paper2:#E6DECF; --rule:rgba(242,236,225,.14);
  --fil:#FFA94D; --fil-l:#FFD39A; --grey:#8A90A2; --red:#D9412B; --ink:#1A1D26;
  --serif:'Frank Ruhl Libre',Georgia,serif; --sans:'Assistant',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --pad:clamp(20px,5vw,80px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--night);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html[lang=he] .en,html[lang=en] .he{display:none!important}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.12;letter-spacing:-.005em}
h2{font-size:clamp(30px,3.6vw,50px)}
.sub{color:var(--grey);margin-top:12px;max-width:34em}

/* mark: a tiny timer dial */
.mark{position:relative;display:inline-block;width:28px;height:28px;border-radius:50%;border:2px solid var(--paper);flex:none}
.mark i{position:absolute;left:50%;top:-4px;width:3px;height:12px;margin-left:-1.5px;background:var(--fil);border-radius:2px}
.mark::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px dashed rgba(242,236,225,.55)}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--pad);transition:background .4s,padding .4s}
.top.solid{background:rgba(13,18,32,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-top:11px;padding-bottom:11px;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:700;font-size:22px}
.menu{display:flex;gap:30px;font-size:15px}
.menu a{opacity:.75;transition:opacity .3s}
.menu a:hover{opacity:1}
.top-r{display:flex;align-items:center;gap:16px}
.lang{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px}
.lang b{font-weight:500;opacity:.45}
.lang i{width:26px;height:14px;border-radius:14px;border:1px solid currentColor;position:relative;opacity:.6}
.lang i::after{content:"";position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--fil);transition:transform .35s var(--ease)}
html[lang=en] .lang i::after{transform:translateX(-12px)}
html[dir=ltr] .lang i::after{right:auto;left:2px}
html[dir=ltr][lang=en] .lang i::after{transform:translateX(12px)}
html[lang=he] .lang b[data-l=he],html[lang=en] .lang b[data-l=en]{opacity:1}
.wa-top{display:flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid rgba(242,236,225,.3);border-radius:8px;font-size:14px;transition:background .3s,color .3s}
.wa-top svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.wa-top:hover{background:var(--paper);color:var(--night)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:8px;background:var(--fil);color:var(--night);font-weight:700;font-size:16px;transition:transform .3s var(--ease),background .3s}
.btn:hover{transform:translateY(-2px);background:var(--fil-l)}
.btn.line{background:transparent;color:var(--paper);border:1px solid rgba(242,236,225,.35)}
.btn.line:hover{background:rgba(242,236,225,.08)}

/* 1 hero */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:clamp(20px,4vw,60px);padding:110px var(--pad) 60px;background:radial-gradient(ellipse 70% 60% at 30% 50%,#1C2440 0%,var(--night) 70%)}
html[dir=rtl] .hero{grid-template-columns:1fr 1.1fr}
html[dir=rtl] .dial-wrap{order:2}
.dial-wrap{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:center}
#dialGL{width:100%;height:100%;cursor:grab;touch-action:pan-y}
#dialGL.drag{cursor:grabbing}
.readout{position:absolute;top:4%;inset-inline-start:4%;display:flex;flex-direction:column;gap:2px;font-family:var(--mono);pointer-events:none}
.readout b{font-size:28px;font-weight:500;color:var(--paper);direction:ltr;text-align:start}
.readout span{font-size:13px;letter-spacing:.08em;color:var(--grey)}
.readout span.on{color:var(--fil)}
.dial-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:14px;color:var(--grey)}
.kicker{font-size:14px;letter-spacing:.06em;color:var(--fil-l);margin-bottom:18px}
.hero h1{font-size:clamp(40px,5vw,72px)}
.lede{margin-top:22px;font-size:clamp(17px,1.35vw,20px);color:rgba(242,236,225,.82);max-width:30em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* 2 day */
.day{height:560vh;position:relative;background:var(--night2)}
.day-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding:92px var(--pad) 26px;gap:16px}
.day-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.clock{display:flex;align-items:baseline;gap:12px;font-family:var(--mono)}
.clock b{font-size:clamp(28px,3vw,44px);font-weight:500;direction:ltr}
.clock .dname{font-family:var(--sans);font-size:16px;color:var(--fil-l)}
.day-body{flex:1;min-height:0;display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,4vw,56px);align-items:center}
.flat{width:100%;height:100%;max-height:62vh}
.sky{fill:#9CC3E6;transition:fill .3s}
.stars circle{fill:#fff}
.stars{opacity:0;transition:opacity .4s}
.shell{fill:#10141F;stroke:#2A3350;stroke-width:2}
.wall{fill:#1B2233;stroke:#2F3A57;stroke-width:1.5}
.light{opacity:0;transition:opacity .45s}
.room.on .light{opacity:1}
.room.on .light.soft{opacity:.55}
.win{fill:#9CC3E6;stroke:#3A4668;stroke-width:3;transition:fill .3s}
.furn{fill:#2B3448}
.furn2{fill:#39445D}
.bulb{fill:#3A4458;transition:fill .3s}
.room.on .bulb{fill:#FFD39A}
.lamp{fill:#39445D}
.cord{stroke:#39445D;stroke-width:2}
.door{fill:none;stroke:#39445D;stroke-width:3}
.cand{fill:#F2ECE1}
.flame{fill:#FFB347;opacity:0;transition:opacity .4s}
.candles.lit .flame{opacity:1}
.plata{fill:#39445D;transition:fill .4s}
.plata.hot{fill:#E0663A}
.urn{fill:#5A6479;transition:fill .4s}
.urn.hot{fill:#C9CFDB}
.unit{fill:#C9CFDB}
.air{fill:none;stroke:#9CC3E6;stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .4s}
.ac.on .air{opacity:1}
.night{fill:#39445D;transition:fill .4s}
.nglow{opacity:0;transition:opacity .4s}
.kidsnight .night{fill:#FFD39A}
.kidsnight .nglow{opacity:1}
.lbl text{fill:rgba(242,236,225,.55);font-family:var(--sans);font-size:14px;text-anchor:middle}
.captions{position:relative;min-height:230px}
.cap{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s var(--ease);pointer-events:none}
.cap.is-on{opacity:1;transform:none}
.cap .when{font-family:var(--mono);font-size:14px;color:var(--fil);margin-bottom:10px;direction:ltr;text-align:start}
html[dir=rtl] .cap .when{direction:rtl}
.cap h3{font-size:clamp(24px,2.2vw,32px)}
.cap p:not(.when){margin-top:12px;color:rgba(242,236,225,.78);max-width:28em}
.rail{padding-top:6px}
.rail-track{position:relative;height:4px;background:rgba(242,236,225,.12);border-radius:4px}
.rail-track i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--fil);border-radius:4px}
.rail-track b{position:absolute;top:50%;inset-inline-start:0;width:14px;height:14px;margin:-7px -7px 0;border-radius:50%;background:var(--fil-l)}
.rail-track .mk{position:absolute;top:-6px;width:2px;height:16px;background:var(--paper);opacity:.5}
.rail-days{display:flex;justify-content:space-between;margin-top:8px;font-size:13px;color:var(--grey)}
.rail-days span{flex:1}
.rail-days span:nth-child(3),.rail-days span:nth-child(4){text-align:end}

/* 3 times */
.times{display:grid;grid-template-columns:1fr 1.1fr;min-height:100vh;align-items:center;gap:clamp(24px,5vw,80px);padding:100px var(--pad);background:#07090F}
.candle-pair{display:flex;justify-content:center;gap:0;max-width:520px;width:100%;justify-self:center;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 55%,transparent 100%)}
.cv{width:50%;aspect-ratio:2/3;object-fit:cover}
.cv.flip{transform:scaleX(-1)}
.times h2{max-width:14em}
.week{margin-top:36px;border-top:1px solid var(--rule);padding-top:24px;max-width:480px}
.city{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:15px;color:var(--grey)}
.city select{font:inherit;font-size:17px;color:var(--paper);background:var(--night2);border:1px solid var(--rule);border-radius:8px;padding:9px 14px;min-width:170px}
.wk-title{margin:22px 0 6px;font-family:var(--serif);font-size:22px;color:var(--fil-l);min-height:1.4em}
.wk-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.wk-row b{font-family:var(--mono);font-weight:500;font-size:34px;direction:ltr}
.wk-row small{grid-column:1/-1;color:var(--grey);font-size:14px}
.credit{margin-top:14px;font-size:13px;color:var(--grey)}

/* 4 panel */
.panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center;padding:110px var(--pad);background:var(--paper);color:var(--ink)}
.panel .sub{color:#6A6F7C}
.label-strip{margin-top:30px;min-height:170px;border-inline-start:3px solid var(--fil);padding-inline-start:20px}
.label-strip h3{font-size:clamp(22px,2vw,28px)}
.label-strip p{margin-top:10px;color:#454B58;max-width:30em}
.box{background:#D9D6CF;border-radius:14px;padding:18px;box-shadow:inset 0 0 0 1px #BDB8AE,0 30px 60px -30px rgba(26,29,38,.35)}
.box-in{background:#ECE9E3;border-radius:8px;padding:22px 22px 18px;box-shadow:inset 0 2px 8px rgba(0,0,0,.08)}
.box-tag{font-family:var(--mono);font-size:12px;color:#7A7F8C;margin-bottom:16px}
.din{display:flex;align-items:stretch;gap:6px;padding:14px 12px;background:linear-gradient(#B9BDC6,#A7ABB5);border-radius:4px;direction:ltr}
.brk{position:relative;flex:1;min-width:0;height:128px;background:#FAFAF7;border-radius:3px;box-shadow:0 1px 0 #fff inset,0 2px 4px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.brk .lev{width:22px;height:44px;border-radius:4px;background:#2A2F3A;position:relative;transition:background .3s}
.brk .lev::after{content:"";position:absolute;left:3px;right:3px;height:18px;bottom:3px;border-radius:3px;background:#5D6475;transition:transform .35s var(--ease),background .3s}
.brk[aria-pressed=true] .lev::after{transform:translateY(-20px);background:var(--fil)}
.brk em{font-style:normal;font-family:var(--mono);font-size:12px;color:#6A6F7C}
.brk:focus-visible{outline:2px solid var(--fil);outline-offset:2px}
.timer{flex:1.3;min-width:0;background:#FAFAF7;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 4px rgba(0,0,0,.18)}
.timer i{width:48px;height:48px;border-radius:50%;border:3px dashed #2A2F3A;animation:spin 24s linear infinite}
.timer span{font-family:var(--mono);font-size:12px;color:#6A6F7C}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.timer i{animation-duration:120s}}
.legend{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:16px;font-size:14px;color:#565C69}
.legend li{display:flex;gap:8px;cursor:pointer}
.legend li b{font-family:var(--mono);font-weight:500;color:#9A9FAB}
.legend li.on{color:var(--ink)}
.legend li.on b{color:#C36B16}

/* 5 contact */
.contact{padding:130px var(--pad) 60px;text-align:center;background:radial-gradient(ellipse 60% 50% at 50% 0%,#1E2742,var(--night) 70%)}
.contact h2{max-width:18em;margin:0 auto;font-size:clamp(28px,3vw,44px)}
.c-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.c-list{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 60px;margin-top:56px}
.c-list dt{font-size:14px;color:var(--grey)}
.c-list dd{font-family:var(--mono);font-size:clamp(18px,1.8vw,24px);margin-top:4px}
.c-list a:hover{color:var(--fil-l)}
.foot{margin-top:80px;font-size:14px;color:var(--grey)}

/* planner */
.fab{position:fixed;z-index:45;bottom:22px;inset-inline-start:22px;display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:40px;background:var(--paper);color:var(--night);font-weight:700;font-size:15px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);transition:transform .3s var(--ease),opacity .3s}
.fab .mark{width:24px;height:24px;border-color:var(--night)}
.fab .mark::after{border-color:rgba(13,18,32,.4)}
.inday .fab:not(.hide){opacity:0;transform:translateY(20px);pointer-events:none}
.fab.hide{opacity:0;transform:translateY(20px);pointer-events:none}
.chat{position:fixed;z-index:50;bottom:22px;inset-inline-start:22px;width:min(390px,calc(100vw - 24px));height:min(600px,calc(100svh - 110px));display:flex;flex-direction:column;background:#F6F2EA;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);opacity:0;transform:translateY(24px) scale(.98);pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
.chat.open{opacity:1;transform:none;pointer-events:auto}
.chat-top{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--night);color:var(--paper)}
.chat-top>div{flex:1;line-height:1.25}
.chat-top small{display:block;font-size:12px;color:var(--grey)}
.x{font-size:26px;line-height:1;padding:0 6px;opacity:.7}
.log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.m{max-width:86%;padding:9px 13px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08);align-self:flex-start}
.m.me{align-self:flex-end;background:var(--night);color:var(--paper)}
.m.typing{color:#8A90A2;letter-spacing:.2em}
.m a{color:#B35A0E;font-weight:700;text-decoration:underline}
.m pre{white-space:pre-wrap;font-family:var(--sans);font-size:14px;background:#F1ECE2;border-radius:8px;padding:9px;margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.chips button{font-size:14px;padding:7px 12px;border-radius:8px;border:1px solid #C9C2B4;background:#fff;transition:background .2s}
.chips button:hover{background:#FFE9CF}
.say{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #E1DACD;background:#fff}
.say input{flex:1;font:inherit;font-size:15px;border:0;outline:0;background:transparent;color:var(--ink)}
.say button{width:38px;height:38px;border-radius:50%;background:var(--night);color:var(--paper)}
html[dir=rtl] .say button{transform:scaleX(-1)}

/* responsive */
@media (max-width:1000px){
  .menu{display:none}
}
@media (max-width:820px){
  body{font-size:16px}
  .top{padding:14px 18px}
  .brand{font-size:19px}
  .wa-top span{display:none}
  .wa-top{padding:8px}
  .hero,html[dir=rtl] .hero{grid-template-columns:1fr;padding-top:84px;gap:8px;align-content:start}
  html[dir=rtl] .dial-wrap{order:0}
  .dial-wrap{max-width:400px;width:92%}
  .readout b{font-size:22px}
  .hero-cta .btn{flex:1}
  .day{height:620vh}
  .day-pin{padding:74px 18px 16px;gap:10px}
  .day-head{flex-direction:column;align-items:flex-start;gap:6px}
  .day-head h2{font-size:24px}
  .day-body{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:14px}
  .flat{max-height:40vh}
  .captions{min-height:200px}
  .cap h3{font-size:22px}
  .cap p:not(.when){font-size:15px}
  .times,.panel{grid-template-columns:1fr;padding:80px 18px}
  .candle-pair{max-width:300px}
  .brk{height:104px}
  .legend{grid-template-columns:1fr}
  .contact{padding:90px 18px 100px}
  .fab{bottom:14px;inset-inline-start:14px}
  .chat{bottom:12px;inset-inline-start:12px}
}