/* Round-5 concept sketches: shared base. Each concept page sets the tokens on :root. */
:root{
  --bg:#0A0A0B; --bg2:#141416; --ink:#EEEAE2; --muted:#8C8F95; --line:rgba(238,234,226,.14);
  --accent:#C4122F; --paper:#F3EFE6; --paper-ink:#1A1A1A; --btn:#EEEAE2; --btn-ink:#0A0A0B;
  --font-h:"FUP Erez",system-ui,sans-serif; --font-b:"FUP Erez",system-ui,sans-serif; --font-hand:"FUP Zamir",cursive;
  /* one spacing system for every concept: side gutter, section rhythm, head-to-content gap */
  --gut:max(clamp(20px,5vw,64px),env(safe-area-inset-left,0px)); --sec:clamp(84px,11vw,140px); --sec-s:clamp(52px,6vw,84px); --gap:clamp(32px,4vw,52px); --wa:#25D366;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:300 18px/1.65 var(--font-b);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:inherit}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gut)}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{position:relative}

/* concept bar */
.cbar{position:fixed;inset-inline:0;bottom:0;z-index:90;display:flex;gap:8px;align-items:center;justify-content:center;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom,0px));pointer-events:none}
.cbar > *{pointer-events:auto}
.cbar a,.cbar button{font:500 13px/1 var(--font-b);color:#111;background:rgba(255,255,255,.88);border:0;border-radius:999px;padding:9px 13px;text-decoration:none;cursor:pointer;backdrop-filter:blur(6px)}
.cbar .tag{background:rgba(0,0,0,.6);color:#fff}

/* notes: what each section does in this concept */
.note{position:relative;z-index:80;max-width:560px;margin:18px auto 0;padding:10px 14px;border-radius:12px;background:rgba(255,213,79,.12);border:1px dashed rgba(255,213,79,.55);color:#FFE7A3;font:400 14px/1.55 var(--font-b);text-align:start}
.note b{color:#FFD54F;font-weight:700}
.note.abs{position:absolute;inset-inline:var(--gut);bottom:18px;margin:0 auto}
body.hide-notes .note{display:none}

/* header */
.top{position:absolute;inset-inline:0;top:0;z-index:60}
.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:68px}
.logo{font:800 22px/1 var(--font-h);text-decoration:none;letter-spacing:-.01em}
.logo small{font-weight:300;opacity:.7;font-size:14px;margin-inline-start:8px}
.top .btn{white-space:nowrap}
@media (max-width:480px){.logo small{display:none}}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font:700 17px/1 var(--font-b);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--btn);color:var(--btn-ink)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn svg{width:22px;height:22px;flex:none}
.btn .wa{fill:var(--wa)}
.wa-float{position:fixed;inset-inline-start:auto;inset-inline-end:max(16px,env(safe-area-inset-right,0px));bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 18px 0 14px;border-radius:999px;background:var(--wa);color:#0B2E17;font:700 15px/1 var(--font-b);text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.wa-float svg{width:24px;height:24px;fill:#0B2E17}
[dir=rtl] .wa-float{inset-inline-end:auto;left:max(16px,env(safe-area-inset-left,0px))}

/* section heads */
.kicker{font:400 15px/1.3 var(--font-b);letter-spacing:.08em;color:var(--muted)}
.h2{font:800 clamp(34px,5.4vw,68px)/1.04 var(--font-h);letter-spacing:-.015em}
.h2 .thin{font-weight:300}
.lead{font:300 clamp(18px,1.8vw,22px)/1.55 var(--font-b);color:var(--muted);max-width:640px;margin:14px auto 0}
.kicker + .h2{margin-top:10px}
.pad{padding-block:var(--sec)}
.pad.tight{padding-block:var(--sec-s)}
.gap{margin-top:var(--gap)}

/* pinned tracks */
[data-track=pin]{height:var(--track,160vh)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
@media (max-width:699px){[data-track=pin]{height:var(--track-s,125vh)}}

/* steps captions */
[data-at]{opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}
[data-at].on{opacity:1;transform:none}
html:not(.c5-js) [data-at]{opacity:1;transform:none}

/* orbit + tunnel */
.orb-stage{position:absolute;inset:0}
[data-orb]{position:absolute;left:50%;top:50%;will-change:transform}
.tun-stage{position:absolute;inset:0;perspective:1000px;transform-style:preserve-3d}
[data-tun]{position:absolute;left:50%;top:50%;will-change:transform,opacity;opacity:0}

/* real playing card made in code (used for photo cards) */
.pcard{position:relative;width:var(--w,220px);aspect-ratio:5/7;border-radius:calc(var(--w,220px)*.06);background:var(--paper);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.08) inset;padding:calc(var(--w,220px)*.1) calc(var(--w,220px)*.08);color:var(--paper-ink)}
.pcard .ix{position:absolute;font:800 calc(var(--w,220px)*.1)/1 var(--font-h);text-align:center}
.pcard .ix small{display:block;font-size:.8em;margin-top:2px}
.pcard .ix.tl{top:6%;right:7%}
.pcard .ix.br{bottom:6%;left:7%;transform:rotate(180deg)}
.pcard .ph{position:absolute;inset:16% 13% 22%;border-radius:4px;overflow:hidden;background:#222}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .lbl{position:absolute;inset-inline:8%;bottom:7%;text-align:center;font:700 calc(var(--w,220px)*.075)/1.15 var(--font-h)}
.red{color:var(--accent)}

/* crumpled papers */
[data-paper]{position:relative}
.sheet{position:relative;background:var(--paper);color:var(--paper-ink);padding:22px 22px 26px;border-radius:3%;box-shadow:0 30px 60px rgba(0,0,0,.45);transform-origin:50% 50%;will-change:transform,filter}
.sheet::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:var(--crease,0);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='9'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='5'%3E%3CfeDistantLight azimuth='225' elevation='42'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");background-size:cover}
.sheet .ph{aspect-ratio:4/3;overflow:hidden;border-radius:2px;background:#ccc}
.sheet .ph img{width:100%;height:100%;object-fit:cover}
.sheet .hand{font:500 clamp(26px,3vw,36px)/1.1 var(--font-hand);margin-top:14px;color:#1B1B1B}
.sheet .hand small{display:block;font-size:.58em;line-height:1.35;margin-top:8px;color:#444}

/* deck carousel */
.deck{position:relative;outline:none}
.deck-stack{position:relative;width:var(--dw,300px);aspect-ratio:var(--da,3/4);margin-inline:auto;touch-action:pan-y;user-select:none}
.deck-card{position:absolute;inset:0;transition:transform .42s cubic-bezier(.2,.7,.2,1);cursor:grab}
.deck-card .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.7,.2,1);transform:rotateY(180deg)}
.deck-card.is-top .flip{transform:none}
.deck-card .face,.deck-card .back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.deck-card .back{transform:rotateY(180deg);background:#7d0f1c}
.deck-card .back img{width:100%;height:100%;object-fit:cover}
.deck-card .face img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.deck-card .face .play{position:absolute;inset:auto 0 0;padding:44px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font:500 16px/1.35 var(--font-b);text-align:start}
.deck-card .face .play b{display:block;font:800 19px/1.25 var(--font-h)}
.deck-card .face .pbtn{position:absolute;top:14px;inset-inline-start:14px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#111;font-size:16px}
.deck-ui{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(36px,5vw,52px)}
.deck-ui button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:20px;cursor:pointer}
.deck-count{font:500 15px/1 var(--font-b);letter-spacing:.12em;min-width:72px;text-align:center;color:var(--muted);direction:ltr}

/* gallery strip + lightbox */
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gut) 18px;margin-top:var(--gap);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip button{flex:0 0 clamp(220px,28vw,340px);aspect-ratio:4/5;border:0;padding:0;border-radius:6px;overflow:hidden;scroll-snap-align:center;cursor:zoom-in;background:#222}
.strip button img{width:100%;height:100%;object-fit:cover}
.strip-ui{display:flex;justify-content:center;gap:12px;margin-top:10px}
.strip-ui button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:18px;cursor:pointer}
.lb{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;touch-action:pan-y}
.lb.open{display:flex}
.lb figure{margin:0;max-width:min(calc(100vw - 180px),1100px)}
.lb img{max-height:78vh;width:auto;margin-inline:auto;border-radius:4px}
@media (max-width:700px){.lb figure{max-width:94vw}.lb img{max-height:68vh}.lb-prev,.lb-next{top:auto!important;bottom:22px;transform:none!important}.lb-prev{right:calc(50% + 14px)!important}.lb-next{left:calc(50% + 14px)!important}.lb-n{bottom:auto;top:28px}}
.lb figcaption{color:#ddd;text-align:center;margin-top:10px;font:400 15px/1.4 var(--font-b)}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font-size:22px;cursor:pointer}
.lb-x{top:16px;left:16px}
.lb-prev{right:16px;top:50%;transform:translateY(-50%)}
.lb-next{left:16px;top:50%;transform:translateY(-50%)}
.lb-n{position:absolute;bottom:18px;color:#bbb;font:500 14px/1 var(--font-b);direction:ltr}

/* chat (how to book) */
.phone{width:min(360px,100%);margin:var(--gap) auto 0;border-radius:34px;padding:14px;background:#0f0f10;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.phone .scr{border-radius:24px;background:#0B141A;padding:16px 12px 22px;min-height:360px;display:flex;flex-direction:column;gap:10px}
.phone .who{display:flex;align-items:center;gap:10px;color:#E9EDEF;font:600 15px/1.2 var(--font-b);padding:4px 6px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:6px}
.phone .who img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.phone .who small{display:block;font-weight:400;color:#8696A0;font-size:12px}
.msg{max-width:84%;padding:9px 12px 18px;border-radius:12px;font:400 15.5px/1.45 var(--font-b);color:#E9EDEF;position:relative;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .4s,transform .4s}
.msg.on{opacity:1;transform:none}
html:not(.c5-js) .msg{opacity:1;transform:none}
.msg i{position:absolute;bottom:4px;inset-inline-end:10px;font:400 11px/1 var(--font-b);color:#8696A0;font-style:normal}
.msg.me{align-self:flex-start;background:#005C4B;border-start-start-radius:3px}
.msg.him{align-self:flex-end;background:#202C33;border-start-end-radius:3px}
.msg small{display:block;font-size:12px;color:#8696A0;margin-top:2px}

/* faq */
.faq{max-width:760px;margin:var(--gap) auto 0}
.faq details{border-bottom:1px solid var(--line);padding:18px 4px}
.faq summary{font:700 19px/1.4 var(--font-h);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";font-weight:300;font-size:26px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);margin-top:10px}

/* languages + numbers */
.langs{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,3vw,40px);max-width:1080px;margin:var(--gap) auto 0;text-align:center}
.lang .big{font:800 clamp(44px,6vw,80px)/1 var(--font-h);letter-spacing:-.02em}
.lang .lbl{font:400 16px/1.4 var(--font-b);color:var(--muted);margin-top:10px}
.lang .wink{font:400 14px/1.45 var(--font-b);color:var(--muted);margin-top:8px;opacity:.85}
.soon{display:inline-block;font:700 12px/1 var(--font-b);letter-spacing:.06em;padding:6px 9px;border-radius:999px;border:1px dashed currentColor;margin-top:10px}
.lang .big.ar{font-family:system-ui,"Noto Sans Arabic","Geeza Pro",sans-serif;font-weight:700}
@media (max-width:860px){.langs{grid-template-columns:repeat(3,1fr);row-gap:36px}}
@media (max-width:480px){.langs{grid-template-columns:repeat(2,1fr)}}

/* form */
.form{max-width:620px;margin:var(--gap) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:start}
.form label{display:grid;gap:6px;font:400 14px/1.3 var(--font-b);color:var(--muted)}
.form input,.form select{height:52px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);padding:0 14px;font:400 16px/1 var(--font-b)}
.form .full{grid-column:1/-1}
.form .btn{width:100%}
.form .ok{grid-column:1/-1;text-align:center;color:var(--ink);font:500 17px/1.5 var(--font-b);display:none}
.form.sent .ok{display:block}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* trick fans */
.fan{display:flex;justify-content:center;margin-top:var(--gap)}
.fan img{width:clamp(78px,11vw,130px);margin-inline:clamp(-26px,-2.4vw,-14px)}
.fan img:nth-child(1){transform:rotate(-15deg) translateY(14px)}
.fan img:nth-child(2){transform:rotate(-9deg) translateY(5px)}
.fan img:nth-child(3){transform:rotate(-3deg)}
.fan img:nth-child(4){transform:rotate(3deg)}
.fan img:nth-child(5){transform:rotate(9deg) translateY(5px)}
.fan img:nth-child(6){transform:rotate(15deg) translateY(14px)}

footer.foot{padding:var(--sec-s) var(--gut) 120px;text-align:center;color:var(--muted);font:400 14px/1.7 var(--font-b);border-top:1px solid var(--line)}

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