/* Maeen interactive booklet — deep-green "desk" with a single landscape leaf, controls docked. Single dark look by design. */
:root{
  --desk:#04261F; --desk2:#073A31; --panel:#06322A; --ink:#EAF5F0; --mute:#9DBFB3; --line:rgba(234,245,240,.12);
  --accent:#31C894; --accent2:#0E8A6A; --accent-ink:#04261F; --paper:#F7F8F5; --chip:rgba(234,245,240,.08);
  --gold:#C6F24E; --danger:#FF8A80;
  --font:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 90% at 50% 0%,var(--desk2) 0%,var(--desk) 70%);color:var(--ink);font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.app{height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:10px;padding-block:12px;flex:none}
.brand-logo{height:30px;width:auto}
.brand{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand b{font-size:15px;font-weight:700}
.brand span{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp{flex:1}
.tbtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:10px;background:var(--chip);border:1px solid var(--line);font-size:13px;font-weight:500;white-space:nowrap}
.tbtn:hover{background:rgba(234,245,240,.14)}
.tbtn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.tbtn svg{width:16px;height:16px;flex:none}
.cta-top{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13.5px;white-space:nowrap;box-shadow:0 6px 18px rgba(49,200,148,.25)}
.cta-top:hover{filter:brightness(1.06)}
.cta-top svg{width:17px;height:17px}
.share-wrap{position:relative}
.share-pop{position:absolute;top:44px;left:0;z-index:15;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;min-width:210px;box-shadow:0 18px 40px rgba(0,0,0,.4);display:flex;flex-direction:column}
.share-pop a,.share-pop button{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:13px;text-decoration:none;text-align:right}
.share-pop a:hover,.share-pop button:hover{background:var(--chip)}
.share-pop svg{width:17px;height:17px;flex:none}
.share-pop a svg{color:#25D366}

/* ---------- stage & leaves ---------- */
.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;perspective:2600px}
.book{position:relative;aspect-ratio:2000/1414;max-width:100%;max-height:100%;container-type:inline-size}
.leaf{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:var(--paper);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04);transform-origin:right center;backface-visibility:hidden}
.leaf .pic{position:absolute;inset:0;cursor:zoom-in}
.leaf .pic img{width:100%;height:100%;display:block;object-fit:cover;user-select:none;-webkit-user-drag:none}
.leaf .shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 100%)}
.leaf.turn-next{animation:turnNext .75s cubic-bezier(.45,.05,.3,1) forwards;z-index:3}
.leaf.turn-next .shade{animation:shadeIn .75s forwards}
.leaf.turn-prev{animation:turnPrev .75s cubic-bezier(.45,.05,.3,1) forwards;z-index:3}
@keyframes turnNext{0%{transform:rotateY(0)}100%{transform:rotateY(-105deg)}}
@keyframes turnPrev{0%{transform:rotateY(-105deg)}100%{transform:rotateY(0)}}
@keyframes shadeIn{to{opacity:1}}

/* in-page entrance: settle + light sheen */
.leaf.enter .pic img{animation:settle 1s cubic-bezier(.2,.7,.2,1) both}
.leaf.enter .pic::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(120%);animation:sheen 1.3s .25s ease-out forwards}
@keyframes settle{from{transform:scale(1.035);filter:blur(2px) brightness(.9)}to{transform:none;filter:none}}
@keyframes sheen{to{transform:translateX(-120%)}}

/* hotspots */
.hot{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:auto;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;box-shadow:0 4px 14px rgba(6,58,50,.45),0 0 0 3px #fff;transform:scale(0);animation:pop .45s cubic-bezier(.3,1.6,.5,1) forwards}
.pin::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--accent);animation:ring 2.2s ease-out infinite;animation-delay:inherit}
.pin.open{background:#063A32;color:#fff}
@keyframes pop{to{transform:scale(1)}}
@keyframes ring{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(2.2);opacity:0}}
.tip{position:absolute;z-index:6;max-width:min(300px,60%);background:#063A32;color:#fff;font-size:13px;line-height:1.6;padding:10px 13px;border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.35);pointer-events:auto;animation:tipIn .25s ease-out}
.tip b{display:block;font-size:11px;color:var(--accent);font-weight:600;margin-bottom:2px}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.explore{position:absolute;top:2.2%;left:50%;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:7px;background:rgba(6,58,50,.92);color:#fff;font-size:12.5px;font-weight:500;padding:6px 14px;border-radius:20px;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:fadeOut 6s 1s forwards;white-space:nowrap}
.explore i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(49,200,148,.3)}
@keyframes fadeOut{0%,75%{opacity:1}100%{opacity:0}}
.zone{position:absolute;pointer-events:auto;border-radius:14px;outline:2px dashed transparent;outline-offset:3px;transition:outline-color .2s,background .2s;cursor:pointer}
.zone:hover,.zone:focus-visible{outline-color:var(--accent);background:rgba(49,200,148,.08)}
.zone span{position:absolute;bottom:8px;left:50%;transform:translateX(-50%) translateY(6px);opacity:0;transition:.2s;background:#063A32;color:#fff;font-size:12px;padding:4px 10px;border-radius:12px;white-space:nowrap}
.zone:hover span,.zone:focus-visible span{opacity:1;transform:translateX(-50%)}
.zones-hint .zone{animation:zonePulse 1.6s .6s 2}
@keyframes zonePulse{50%{outline-color:var(--accent);background:rgba(49,200,148,.1)}}

/* final page: form */
.leaf.final{background:radial-gradient(120% 130% at 100% 0%,#0E5A4B 0%,#063A32 55%,#04261F 100%);color:#fff;display:flex}
.final .fin{flex:1;display:grid;grid-template-columns:1fr 1.15fr;gap:4cqw;padding:4.5cqw 5cqw}
.final .fin-copy{display:flex;flex-direction:column;justify-content:center;gap:1.4cqw}
.final .fin-copy img{width:11cqw;height:auto}
.final .fin-copy h2{margin:0;font-size:3.6cqw;line-height:1.3}
.final .fin-copy h2 em{font-style:normal;color:var(--accent)}
.final .fin-copy p{margin:0;font-size:1.55cqw;color:#C6E4DA;line-height:1.8}
.final .fin-list{display:flex;flex-direction:column;gap:.8cqw;font-size:1.45cqw;color:#E4F5EE}
.final .fin-list div{display:flex;align-items:center;gap:.9cqw}
.final .fin-list i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:rgba(49,200,148,.2);display:flex;align-items:center;justify-content:center;flex:none}
.final .fin-list svg{width:1.2cqw;height:1.2cqw;color:var(--accent)}
.final .fin-card{background:#fff;color:#0B1F1B;border-radius:1.6cqw;padding:2.4cqw 2.6cqw;align-self:center;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.final .fin-card .lead-form{font-size:1.4cqw}
.final .fin-cta{display:none;align-self:center;justify-self:center;flex-direction:column;align-items:center;gap:2cqw}
.final .fin-cta button{background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:3.6cqw;padding:2.6cqw 5cqw;border-radius:3cqw;box-shadow:0 10px 30px rgba(49,200,148,.35)}
.final .fin-cta small{font-size:2.6cqw;color:#C6E4DA}
@container (max-width: 760px){
  .final .fin{grid-template-columns:1fr;gap:3cqw;padding:5cqw 6cqw;align-content:center}
  .final .fin-card{display:none}
  .final .fin-cta{display:flex}
  .final .fin-copy{align-items:center;text-align:center}
  .final .fin-copy img{width:16cqw}
  .final .fin-copy h2{font-size:5.4cqw}
  .final .fin-copy p{font-size:2.9cqw}
  .final .fin-list{display:none}
}

/* nav arrows */
.nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(4,38,31,.72);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;z-index:5;backdrop-filter:blur(6px)}
.nav:hover{background:var(--accent);color:var(--accent-ink)}
.nav svg{width:20px;height:20px}
.nav.prev{right:-8px}.nav.next{left:-8px}
.nav[disabled]{opacity:.25;pointer-events:none}
.rot{display:none;position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:12px;color:var(--mute);background:var(--chip);border:1px solid var(--line);border-radius:14px;padding:5px 12px;align-items:center;gap:6px;white-space:nowrap}
.rot svg{width:15px;height:15px}

/* bottom bar */
.bar{flex:none;display:flex;align-items:center;gap:14px;padding-block:12px calc(12px + env(safe-area-inset-bottom,0px))}
.count{font-size:13px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:62px;text-align:center}
.count b{color:var(--ink);font-weight:700}
.title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;max-width:30%}
.scrub{flex:1;min-width:80px;position:relative;height:40px;display:flex;align-items:center}
.scrub input{position:relative;z-index:1;width:100%;appearance:none;-webkit-appearance:none;background:transparent;height:40px;margin:0;direction:rtl;cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.scrub input:focus{outline:none}
.scrub input::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:linear-gradient(to left,var(--accent) var(--p,0%),rgba(234,245,240,.18) var(--p,0%))}
.scrub input::-moz-range-track{height:5px;border-radius:5px;background:rgba(234,245,240,.18)}
.scrub input::-moz-range-progress{height:5px;border-radius:5px;background:var(--accent)}
.scrub input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-8.5px;border:0;box-shadow:0 0 0 5px rgba(49,200,148,.32),0 3px 10px rgba(0,0,0,.35);transition:transform .15s ease,box-shadow .15s ease}
.scrub input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(49,200,148,.32),0 3px 10px rgba(0,0,0,.35);transition:transform .15s ease}
.scrub input:active::-webkit-slider-thumb,.scrub input:focus-visible::-webkit-slider-thumb{transform:scale(1.18);box-shadow:0 0 0 8px rgba(49,200,148,.28),0 3px 12px rgba(0,0,0,.4)}
.scrub input:active::-moz-range-thumb{transform:scale(1.18)}
.ticks{position:absolute;inset:0;pointer-events:none;z-index:0}
.ticks i{position:absolute;top:50%;width:2px;height:11px;margin:-5.5px -1px 0;background:rgba(234,245,240,.32);border-radius:1px}
/* slider preview bubble */
.sbub{position:absolute;bottom:calc(100% + 10px);z-index:20;transform:translateX(-50%) translateY(6px) scale(.96);opacity:0;pointer-events:none;
  background:#0B2E27;border:1px solid rgba(49,200,148,.35);border-radius:14px;padding:7px;width:168px;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:opacity .16s ease,transform .16s ease}
.sbub.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.sbub img{display:block;width:100%;aspect-ratio:2000/1414;object-fit:cover;border-radius:8px;background:#f4f4f1}
.sbub div{display:flex;flex-direction:column;gap:2px;padding:6px 3px 2px}
.sbub b{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.sbub span{font-size:12px;color:#EAF5F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbub::after{content:"";position:absolute;top:100%;left:calc(50% + var(--ax,0px));margin-left:-7px;border:7px solid transparent;border-top-color:#0B2E27}
/* page 6: lighter count-up figures */
.cnt.slim,.cnt.slim b{font-weight:600;font-optical-sizing:auto;letter-spacing:-.005em}
.cnt.slim small{font-weight:500}
.cnt.slim{gap:.06em}
.cnt.slim.done b{font-variant-numeric:normal}
.cnt.slim small:first-child{margin-bottom:.36em}

/* floating CTA */
.fab{position:fixed;left:max(18px,env(safe-area-inset-left,0px));bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:12;display:flex;align-items:center;gap:10px;background:#fff;color:#063A32;border-radius:40px;padding:7px 7px 7px 18px;box-shadow:0 14px 34px rgba(0,0,0,.4);animation:fabIn .6s 1.2s both cubic-bezier(.3,1.4,.5,1)}
.fab-ic{width:42px;height:42px;border-radius:50%;background:var(--accent2);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;flex:none}
.fab-ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);animation:ring 2.4s ease-out infinite}
.fab-ic svg{width:21px;height:21px}
.fab-t{display:flex;flex-direction:column;text-align:right;line-height:1.3}
.fab-t b{font-size:13.5px}.fab-t small{font-size:11px;color:#55625E}
.fab-s{display:none}
.fab:hover{transform:translateY(-2px)}
@keyframes fabIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:20;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;right:0;width:min(370px,88vw);background:var(--panel);border-left:1px solid var(--line);z-index:21;transform:translateX(105%);transition:transform .3s cubic-bezier(.3,.7,.2,1);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 18px}
.drawer.open{transform:none}
.drawer h2{margin:0 0 4px;font-size:17px}
.drawer p.sub{margin:0 0 14px;font-size:12.5px;color:var(--mute)}
.sec{display:flex;flex-direction:column;gap:2px;overflow:auto;padding-left:4px}
.sec .grp{font-size:11.5px;color:var(--mute);margin:12px 4px 4px;font-weight:600}
.item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:13.5px;text-align:right;width:100%}
.item:hover{background:var(--chip)}
.item.cur{background:rgba(49,200,148,.14);color:#fff}
.item .n{margin-right:auto;font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.item .k{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 7px;flex:none}
.k.portal{background:#fff;color:#0E8A6A}.k.cp{background:#0E8A6A;color:#fff}.k.form{background:var(--gold);color:#203600}
.item .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;opacity:.35}
.xbtn{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:14px;width:34px;height:34px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center}
.xbtn svg{width:16px;height:16px}

/* grid */
.overlay{position:fixed;inset:0;z-index:30;background:rgba(3,30,24,.97);display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.ohead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ohead b{font-size:16px}
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;align-content:start;padding:2px}
.th{display:flex;flex-direction:column;gap:6px;text-align:right}
.th img,.th .tform{width:100%;aspect-ratio:2000/1414;object-fit:cover;border-radius:5px;display:block;box-shadow:0 8px 18px rgba(0,0,0,.35);outline:2px solid transparent;outline-offset:2px}
.th .tform{background:radial-gradient(120% 130% at 100% 0%,#0E5A4B,#04261F);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--accent)}
.th.cur img,.th.cur .tform{outline-color:var(--accent)}
.th span{font-size:11.5px;color:var(--mute);display:flex;gap:6px}
.th span b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* zoom */
.zoom{position:fixed;inset:0;z-index:40;background:#020F0C;overflow:auto;cursor:zoom-out}
.zoom img{display:block;width:max(100vw,2000px);max-width:none;height:auto}
.zoom .zx{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));z-index:41;width:42px;height:42px;border-radius:50%;background:rgba(4,38,31,.85);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.zoom .zx svg{width:18px;height:18px}
.zoom .zt{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom,0px));right:50%;transform:translateX(50%);background:rgba(4,38,31,.85);border:1px solid var(--line);font-size:12px;padding:6px 12px;border-radius:14px;color:var(--mute);white-space:nowrap}

/* modal + form */
.modal{position:fixed;inset:0;z-index:50;background:rgba(2,18,14,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mcard{position:relative;width:min(520px,100%);max-height:calc(100% - 8px);overflow:auto;background:#fff;color:#0B1F1B;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.5);animation:rise .3s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.mcard .xbtn{background:rgba(255,255,255,.14);color:#fff;top:14px}
.mhead{background:radial-gradient(120% 160% at 100% 0%,#0E5A4B,#063A32 65%);color:#fff;padding:22px 22px 20px;display:flex;gap:14px;align-items:center}
.mhead img{height:34px}
.mhead h3{margin:0 0 4px;font-size:17px}
.mhead p{margin:0;font-size:12.5px;color:#C6E4DA;line-height:1.6}
#modalForm{padding:18px 22px 22px}
.lead-form{display:flex;flex-direction:column;gap:.9em;font-size:14px}
.lf-seg{display:grid;grid-template-columns:1fr 1fr;background:#EEF1EF;border-radius:10px;padding:3px;gap:3px}
.lf-seg label{position:relative}
.lf-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.lf-seg span{display:block;text-align:center;padding:.5em;border-radius:8px;font-size:.93em;font-weight:600;color:#55625E}
.lf-seg input:checked+span{background:#fff;color:#063A32;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.lf-seg input:focus-visible+span{outline:2px solid var(--accent2)}
.lf-row{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.lf-f{display:flex;flex-direction:column;gap:.3em;min-width:0}
.lf-f label{font-size:.86em;font-weight:600;color:#34413D}
.lf-f label em{font-style:normal;color:#C0392B}
.lf-f label small{font-weight:400;color:#8A9692}
.lf-f input,.lf-f select,.lf-f textarea{font:inherit;font-size:.95em;color:#0B1F1B;background:#fff;border:1px solid #D7DFDB;border-radius:9px;padding:.62em .75em;width:100%;min-width:0}
.lf-f textarea{resize:vertical;min-height:4.2em}
.lf-f input:focus,.lf-f select:focus,.lf-f textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(49,200,148,.2)}
.lf-phone{display:flex;gap:.5em;direction:ltr}
.lf-phone select{width:auto;flex:none}
.lf-phone input{flex:1;text-align:left}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-err{color:#C0392B;font-size:.86em;background:#FDECEA;border-radius:8px;padding:.5em .7em}
.lf-go{background:#0E8A6A;color:#fff;font-weight:700;border-radius:10px;padding:.8em;font-size:1em;display:flex;align-items:center;justify-content:center;gap:.5em}
.lf-go:hover{background:#0B775B}
.lf-go[disabled]{opacity:.6;cursor:default}
.lf-note{font-size:.78em;color:#8A9692;text-align:center;margin:0}
.lf-done{text-align:center;padding:1.2em .4em;display:flex;flex-direction:column;align-items:center;gap:.6em}
.lf-done .ok{width:3.6em;height:3.6em;border-radius:50%;background:#DDF4EB;color:#0E8A6A;display:flex;align-items:center;justify-content:center;animation:pop .45s cubic-bezier(.3,1.6,.5,1) forwards;transform:scale(0)}
.lf-done .ok svg{width:1.8em;height:1.8em}
.lf-done h4{margin:0;font-size:1.15em}
.lf-done p{margin:0;color:#55625E;font-size:.92em;line-height:1.7}
.lf-done button{margin-top:.4em;border:1px solid #D7DFDB;border-radius:9px;padding:.55em 1.2em;font-weight:600;font-size:.92em}

.toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:60;background:#fff;color:#063A32;font-weight:600;font-size:13px;padding:9px 16px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.35);animation:rise .25s ease}

/* intro */
.intro{position:fixed;inset:0;z-index:70;background:radial-gradient(110% 90% at 70% 10%,#0E5A4B 0%,#063A32 45%,#04261F 100%);display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .6s ease,visibility .6s}
.intro.gone{opacity:0;visibility:hidden}
.intro::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 15% 85%,rgba(49,200,148,.07) 0 1px,transparent 1px 34px);pointer-events:none}
.intro-in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.intro-logo{width:150px;height:auto;animation:logoIn 1.1s cubic-bezier(.2,.8,.2,1) both}
.intro h1{margin:0;font-size:clamp(30px,6vw,52px);animation:up .8s .35s both}
.intro p{margin:0;color:#C6E4DA;font-size:clamp(13px,2.4vw,16px);animation:up .8s .5s both}
.intro-sys{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.intro-sys span{border:1px solid rgba(49,200,148,.35);color:#DDF4EB;border-radius:20px;padding:4px 12px;font-size:12.5px;animation:up .6s both}
.intro-sys span:nth-child(1){animation-delay:.65s}.intro-sys span:nth-child(2){animation-delay:.75s}.intro-sys span:nth-child(3){animation-delay:.85s}.intro-sys span:nth-child(4){animation-delay:.95s}.intro-sys span:nth-child(5){animation-delay:1.05s}
.intro-go{margin-top:14px;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;padding:13px 26px;border-radius:14px;box-shadow:0 12px 30px rgba(49,200,148,.3);animation:up .8s 1.15s both}
.intro-go svg{width:18px;height:18px}
.intro-go[disabled]{background:rgba(234,245,240,.12);color:var(--mute);box-shadow:none}
@keyframes logoIn{from{opacity:0;transform:scale(.7) rotate(-6deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .tbtn .lbl{display:none}.tbtn{padding:0 10px}
  .cta-top{display:none}
  .title{display:none}
  .brand span{display:none}
}
@media (max-width:720px){
  .brand{display:none}
  .nav{width:38px;height:38px}.nav.prev{right:-4px}.nav.next{left:-4px}
  .fab{padding:6px;bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .fab-t{display:none}
  .lf-row{grid-template-columns:1fr}
  .pin{width:26px;height:26px;margin:-13px 0 0 -13px;font-size:11.5px}
}
@media (max-width:720px) and (orientation:portrait){.rot{display:inline-flex}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* ---------- multi-select (systems) ---------- */
.ms{position:relative}
.ms-btn{width:100%;display:flex;align-items:center;gap:.5em;border:1px solid #D7DFDB;border-radius:9px;padding:.62em .75em;background:#fff;color:#0B1F1B;font-size:.95em;text-align:right;min-height:2.6em}
.ms.open .ms-btn,.ms-btn:focus-visible{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(49,200,148,.2);outline:none}
.ms-val{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-val.ph{color:#8A9692}
.ms-chev{flex:none;color:#0E8A6A;transition:transform .2s}
.ms.open .ms-chev{transform:rotate(180deg)}
.ms-pop{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:20;background:#fff;border:1px solid #D7DFDB;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);padding:.4em;display:flex;flex-direction:column;animation:tipIn .18s ease-out}
.ms-opt{display:flex;align-items:center;gap:.6em;padding:.55em .6em;border-radius:8px;cursor:pointer;font-size:.93em}
.ms-opt:hover{background:#F2F6F4}
.ms-opt input{position:absolute;opacity:0;pointer-events:none}
.ms-box{width:1.25em;height:1.25em;border-radius:.35em;border:1.5px solid #B9C6C0;display:flex;align-items:center;justify-content:center;flex:none;color:#fff;background:#fff}
.ms-box svg{width:.85em;height:.85em;opacity:0}
.ms-opt input:checked+.ms-box{background:#0E8A6A;border-color:#0E8A6A}
.ms-opt input:checked+.ms-box svg{opacity:1}
.ms-opt input:focus-visible+.ms-box{outline:2px solid var(--accent2);outline-offset:2px}
.ms-all{font-weight:700;border-bottom:1px solid #EEF1EF;border-radius:8px 8px 0 0;margin-bottom:.2em}
.ms-done{margin-top:.3em;align-self:flex-start;background:#063A32;color:#fff;font-weight:600;font-size:.85em;padding:.4em 1.2em;border-radius:8px}
.final .fin-card .ms-pop{max-height:none}

/* ---------- phone held sideways: full-screen page ---------- */
.mctl{display:none}
@media (orientation:landscape) and (max-height:560px){
  .top,.bar,.rot{display:none!important}
  .app{padding:0}
  .stage{perspective:2000px}
  .leaf{border-radius:0}
  .mctl{display:block}
  .mc{position:fixed;z-index:12;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;min-width:40px;padding:0 11px;border-radius:12px;background:rgba(4,38,31,.82);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
  .mc svg{width:18px;height:18px}
  .mc-toc{top:calc(10px + env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px))}
  .mc-tl{position:fixed;z-index:12;top:calc(10px + env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:8px}
  .mc-tl .mc{position:static}
  .mc-count{position:fixed;z-index:12;bottom:calc(12px + env(safe-area-inset-bottom,0px));right:max(12px,env(safe-area-inset-right,0px));font-size:12.5px;color:var(--mute);background:rgba(4,38,31,.82);border:1px solid var(--line);border-radius:10px;padding:5px 10px;font-variant-numeric:tabular-nums}
  .mc-count b{color:var(--ink)}
  .nav{width:40px;height:40px;position:fixed}
  .nav.prev{right:max(10px,env(safe-area-inset-right,0px))}
  .nav.next{left:max(10px,env(safe-area-inset-left,0px))}
  .fab{left:max(10px,env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:5px 5px 5px 12px;gap:8px}
  .fab-t{display:none!important}.fab-s{display:block;font-size:12px;font-weight:700;white-space:nowrap}
  .fab-ic{width:36px;height:36px}.fab-ic svg{width:18px;height:18px}
  .explore{font-size:11px;padding:4px 11px}
}

/* ---------- portrait phone: rotate prompt ---------- */
.rotate{position:fixed;inset:0;z-index:65;background:rgba(2,18,14,.86);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .25s ease}
.rot-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 22px;text-align:center;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:10px}
.rot-ph{width:74px;height:74px;border-radius:50%;background:rgba(49,200,148,.14);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.rot-ph svg{width:40px;height:40px;animation:turnPhone 2.2s ease-in-out infinite}
@keyframes turnPhone{0%,20%{transform:rotate(0)}45%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.rot-card h3{margin:0;font-size:17px}
.rot-card p{margin:0;font-size:13px;color:var(--mute);line-height:1.7}
.rot-card button{margin-top:6px;border:1px solid var(--line);border-radius:10px;padding:8px 18px;font-weight:600;font-size:13px;color:var(--ink)}

/* animated icons */
.icos{position:absolute;inset:0;pointer-events:none}
.ico{position:absolute;border-radius:3px}
.ico i{position:absolute;inset:0;display:block;background-repeat:no-repeat}
.ico.pop i{animation:icoPop .75s cubic-bezier(.34,1.56,.64,1) both}
.ico.draw i{animation:icoDraw 1.6s cubic-bezier(.45,.05,.25,1) both, icoFloat 4.5s ease-in-out 2.4s infinite}
.ico.pop:nth-child(3n+1) i{animation-name:icoPop}
.ico.pop:nth-child(3n+2) i{animation-name:icoRise}
.ico.pop:nth-child(3n) i{animation-name:icoSpin}
@keyframes icoPop{0%{transform:scale(0);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes icoRise{0%{transform:translateY(70%) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes icoSpin{0%{transform:rotate(-120deg) scale(.2);opacity:0}100%{transform:none;opacity:1}}
@keyframes icoDraw{0%{clip-path:inset(100% 0 0 0);opacity:.2;filter:blur(1px)}70%{opacity:1;filter:none}100%{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes icoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3%)}}
.leaf.turn-next .ico i,.leaf.turn-prev .ico i{animation-play-state:paused}
/* note under screens */
.note{position:absolute;left:6.7%;bottom:9.2%;z-index:4;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #CFE6DE;color:#0A4A3F;font-size:11.5px;font-weight:600;padding:4px 12px 4px 10px;border-radius:20px;box-shadow:0 4px 14px rgba(6,58,50,.12);pointer-events:none}
.note.tall{bottom:6.1%}
.note i{width:16px;height:16px;border-radius:50%;background:#0E8A6A;color:#fff;font-style:normal;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-family:Georgia,serif}
@media (max-width:720px),(orientation:landscape) and (max-height:560px){.note{font-size:9.5px;padding:2px 9px 2px 7px;gap:4px}.note i{width:12px;height:12px;font-size:8.5px}}
.leaf.enter .icos{animation:settle 1s cubic-bezier(.2,.7,.2,1) both}
.ico{animation:patchOut 1.1s ease both}.ico.draw{animation-duration:1.9s}.ico.nobg{animation:none}
@keyframes patchOut{0%,40%{box-shadow:0 0 8px 5px var(--bg)}100%{box-shadow:0 0 0 0 transparent}}

/* intro background animation */
.intro::before{animation:ringDrift 28s ease-in-out infinite alternate}
@keyframes ringDrift{from{transform:scale(1) rotate(0)}to{transform:scale(1.12) rotate(4deg)}}
.intro-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.intro-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;will-change:transform}
.intro-bg .b1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,#1F8F6E 0%,transparent 65%);animation:blob1 22s ease-in-out infinite alternate}
.intro-bg .b2{width:40vmax;height:40vmax;right:-14vmax;bottom:-12vmax;background:radial-gradient(circle,#31C894 0%,transparent 62%);opacity:.22;animation:blob2 26s ease-in-out infinite alternate}
.intro-bg .b3{width:30vmax;height:30vmax;left:40%;top:55%;background:radial-gradient(circle,#0E8A6A 0%,transparent 65%);opacity:.3;animation:blob3 30s ease-in-out infinite alternate}
@keyframes blob1{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes blob2{to{transform:translate(-16vw,-18vh) scale(1.2)}}
@keyframes blob3{to{transform:translate(-22vw,-30vh) scale(.85)}}
#introFx{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
@media (prefers-reduced-motion:reduce){.intro::before,.intro-bg i{animation:none}#introFx{display:none}}

/* rotate hint: auto-dismiss after 3s */
.rot-card{position:relative}
.rot-x{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--mute);background:rgba(255,255,255,.06)}
.rot-x svg{width:16px;height:16px}
.rot-bar{display:block;width:120px;height:3px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:6px}
.rot-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:right;transform:scaleX(1)}
.rotate.run .rot-bar i{animation:rotBar 4s linear forwards}
@keyframes rotBar{to{transform:scaleX(0)}}
/* traced icons: outline draws itself, then the real icon fills in */
.ico svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ico svg path{fill:none;stroke-width:.55;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:icoTrace var(--dd,1.3s) cubic-bezier(.55,.1,.35,1) both, icoTraceOut .5s ease calc(var(--dd,1.3s) * .95) both}
.ico.trace{animation:patchOut calc(var(--dd,1.3s) + .6s) ease both}
.ico.trace i{opacity:0;animation:icoFill .55s ease both}
@keyframes icoTrace{to{stroke-dashoffset:0}}
@keyframes icoTraceOut{to{opacity:0}}
@keyframes icoFill{from{opacity:0}to{opacity:1}}
.leaf.turn-next .ico *,.leaf.turn-prev .ico *{animation-play-state:paused}
/* softer sheen on dark pages */
.leaf.dark.enter .pic::after{background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);animation-duration:1.8s}
.rotate{z-index:80}
.rot-card .rot-x{padding:0;margin:0;border:0;width:30px;height:30px}.rot-card .rot-x svg{width:15px;height:15px;flex:none}

/* count-up numbers (pages 6 and 7) */
.cnt{position:absolute;display:flex;align-items:center;justify-content:flex-end;direction:ltr;font-family:Inter,sans-serif;font-weight:900;line-height:1;letter-spacing:-.01em;pointer-events:none;font-variant-numeric:tabular-nums}
.cnt.mid{justify-content:center;border-radius:50%}
.cnt b{font-weight:900}
.cnt small{font-size:var(--sub);color:var(--acc);font-weight:900;align-self:flex-end;margin-bottom:.12em}
.cnt small:empty{display:none}
.cnt.done{animation:cntOut .6s ease .4s forwards}
@keyframes cntOut{to{opacity:0}}
/* last page: booking CTA + clickable contacts */
.p43{position:absolute;right:6.8%;top:58%;display:flex;flex-direction:column;align-items:flex-end;gap:.8cqw;z-index:3;animation:up .7s .6s both}
.p43-cta{display:inline-flex;align-items:center;gap:.8cqw;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:max(13px,1.7cqw);padding:1.1cqw 2.2cqw;border-radius:1.2cqw;box-shadow:0 10px 30px rgba(49,200,148,.35);cursor:pointer;animation:ctaPulse 2.6s ease-in-out 1.6s infinite}
.p43-cta svg{width:max(15px,1.9cqw);height:max(15px,1.9cqw)}
.p43 small{color:#A9D4C4;font-size:max(10px,1.15cqw)}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 30px rgba(49,200,148,.35)}50%{box-shadow:0 10px 30px rgba(49,200,148,.35),0 0 0 .8cqw rgba(49,200,148,.12)}}
.p43-link{position:absolute;left:6.3%;width:24%;height:5.2%;border-radius:2cqw;z-index:3}
.p43-link:hover{background:rgba(49,200,148,.1)}
.cnt.mid small{align-self:center;margin:0}

/* ---------- language switch ---------- */
.tbtn.lang .lang-t{font-weight:600}
.tbtn.lang svg{width:16px;height:16px}
.intro-lang{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));z-index:2;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:18px;background:rgba(234,245,240,.08);border:1px solid rgba(234,245,240,.18);color:#EAF5F0;font-size:13px;font-weight:600;animation:up .8s .2s both}
.intro-lang:hover{background:rgba(234,245,240,.16)}
.intro-lang svg{width:16px;height:16px}
.mc.mc-lang{font-size:12px;font-weight:700}
[dir=ltr] .intro-lang{left:auto;right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- English (left-to-right) layout ---------- */
[dir=ltr] body{font-family:Inter,"IBM Plex Sans Arabic","Segoe UI",sans-serif}
[dir=ltr] .leaf{transform-origin:left center}
[dir=ltr] .leaf.turn-next{animation-name:turnNextL}
[dir=ltr] .leaf.turn-prev{animation-name:turnPrevL}
@keyframes turnNextL{0%{transform:rotateY(0)}100%{transform:rotateY(105deg)}}
@keyframes turnPrevL{0%{transform:rotateY(105deg)}100%{transform:rotateY(0)}}
[dir=ltr] .leaf .shade{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 100%)}
[dir=ltr] .nav.prev{right:auto;left:-8px}
[dir=ltr] .nav.next{left:auto;right:-8px}
[dir=ltr] .nav svg,[dir=ltr] .intro-go svg{transform:scaleX(-1)}
[dir=ltr] .scrub input{direction:ltr}
[dir=ltr] .scrub input::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) var(--p,0%),rgba(234,245,240,.18) var(--p,0%))}
[dir=ltr] .share-pop{left:auto;right:0}
[dir=ltr] .share-pop a,[dir=ltr] .share-pop button{text-align:left}
[dir=ltr] .fab{left:auto;right:max(18px,env(safe-area-inset-right,0px));padding:7px 18px 7px 7px}
[dir=ltr] .fab-t{text-align:left}
[dir=ltr] .drawer{right:auto;left:0;border-left:0;border-right:1px solid var(--line);transform:translateX(-105%);padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:18px}
[dir=ltr] .drawer.open{transform:none}
[dir=ltr] .xbtn{left:auto;right:14px}
[dir=ltr] .sec{padding-left:0;padding-right:4px}
[dir=ltr] .item{text-align:left}
[dir=ltr] .item .n{margin-right:0;margin-left:auto}
[dir=ltr] .th{text-align:left}
[dir=ltr] .ms-btn{text-align:left}
[dir=ltr] .ms-done{align-self:flex-end}
[dir=ltr] .zoom .zx{left:auto;right:max(12px,env(safe-area-inset-right,0px))}
[dir=ltr] .rot-x{left:auto;right:10px}
[dir=ltr] .rot-bar i{transform-origin:left}
[dir=ltr] .lf-f input,[dir=ltr] .lf-f textarea{text-align:left}
@media (max-width:720px){[dir=ltr] .nav.prev{right:auto;left:-4px}[dir=ltr] .nav.next{left:auto;right:-4px}}
@media (orientation:landscape) and (max-height:560px){
  [dir=ltr] .nav.prev{right:auto;left:max(10px,env(safe-area-inset-left,0px))}
  [dir=ltr] .nav.next{left:auto;right:max(10px,env(safe-area-inset-right,0px))}
  [dir=ltr] .mc-toc{right:auto;left:max(10px,env(safe-area-inset-left,0px))}
  [dir=ltr] .mc-tl{left:auto;right:max(10px,env(safe-area-inset-right,0px))}
  [dir=ltr] .mc-count{right:auto;left:max(12px,env(safe-area-inset-left,0px))}
  [dir=ltr] .fab{left:auto;right:max(10px,env(safe-area-inset-right,0px));padding:5px 12px 5px 5px}
}