:root{
  --bg:#f8f5ef; --surface:#ffffff; --ink:#13202b; --muted:#5d6b76; --line:#e7e0d4;
  --teal:#0f7c86; --teal-d:#0a5a62; --gold:#c99a4c; --gold-l:#f1d9a6; --night:#05070d; --night2:#0c1424;
  --r:18px; --shadow:0 10px 30px -12px rgba(19,32,43,.25);
  --f-head:"Fraunces",Georgia,serif; --f-body:"Inter",system-ui,sans-serif;
}
html[lang="ar"]{ --f-head:"IBM Plex Sans Arabic",sans-serif; --f-body:"IBM Plex Sans Arabic",sans-serif; }
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.intro-on{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3{font-family:var(--f-head);line-height:1.15;margin:0 0 .4em}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:600}
h3{font-size:1.15rem}

/* ---------- buttons ---------- */
.btn{border:0;border-radius:999px;padding:.75em 1.4em;font-weight:600;transition:transform .15s,box-shadow .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(135deg,#e6c27a,var(--gold));color:#1d1407;box-shadow:0 6px 20px -6px rgba(201,154,76,.7)}
.btn-gold:hover{box-shadow:0 10px 28px -6px rgba(201,154,76,.9)}
.btn-line{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--teal);color:var(--teal)}
.lang-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.4em 1em;font-family:"IBM Plex Sans Arabic",var(--f-body);font-weight:500;backdrop-filter:blur(8px)}
html[lang="ar"] .lang-btn{font-family:"Inter",sans-serif}

/* ---------- Nour orb ---------- */
.nour-orb{--s:44px;position:relative;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fffbe9 0,#f6d68f 28%,#d39a3e 55%,#0f7c86 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset,0 0 24px rgba(240,190,100,.55)}
.nour-orb span{font:700 calc(var(--s)*.42)/1 "IBM Plex Sans Arabic",sans-serif;color:#3a2405;opacity:.75;transform:translateY(-6%)}
.nour-orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(241,217,166,.6);animation:pulse 2.6s ease-out infinite}
.nour-orb.sm{--s:34px}
.nour-orb.big{--s:96px}
@keyframes pulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}

/* ---------- INTRO ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--night);color:#fff;overflow:hidden;transition:opacity 1s ease,visibility 1s}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#globe{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.intro-photo{position:absolute;inset:-4%;background:center/cover no-repeat;opacity:0;transform:scale(1);transition:opacity 1.4s ease}
.intro-photo.on{opacity:1}
#introSat.zoom{animation:satZoom 4.2s cubic-bezier(.3,0,.2,1) forwards}
#introCity.zoom{animation:cityZoom 14s ease-out forwards}
@keyframes satZoom{from{transform:scale(1) rotate(-3deg)}to{transform:scale(2.4) rotate(0)}}
@keyframes cityZoom{from{transform:scale(1.18)}to{transform:scale(1)}}
.intro-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65))}
.intro-caption{position:absolute;left:0;right:0;bottom:16vh;text-align:center;font:600 clamp(1.4rem,3.4vw,2.4rem)/1.3 var(--f-head);letter-spacing:.01em;text-shadow:0 2px 20px rgba(0,0,0,.6);padding:0 16px;opacity:0;transition:opacity .8s}
.intro-caption.on{opacity:1}
.intro-coords{position:absolute;left:50%;top:22px;transform:translateX(-50%);font:500 12px/1 "Inter",monospace;letter-spacing:.2em;color:rgba(255,255,255,.55);white-space:nowrap}
.intro-top{position:absolute;top:14px;inset-inline-end:16px;display:flex;gap:8px}
.skip-btn{background:transparent;border:0;color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:3px}
.nour-welcome{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));text-align:center;
  padding:34px 26px 28px;border-radius:28px;background:rgba(8,12,22,.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:rise .9s cubic-bezier(.2,.8,.2,1)}
.nour-welcome[hidden]{display:none}
.nour-welcome .nour-orb{margin:0 auto 14px}
@keyframes rise{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
.nw-hello{font:700 1.6rem/1 var(--f-head);margin:0 0 10px;color:var(--gold-l)}
.nw-text{margin:0 0 18px;font-size:1.05rem;color:#e9eef3;min-height:3.2em}
.nw-iam{margin:0 0 10px;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.nw-roles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:20px}
.role{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:.5em 1.1em;transition:.2s}
.role:hover,.role.on{background:var(--gold-l);color:#24170a;border-color:var(--gold-l)}

/* ---------- TOPBAR ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:16px;padding:12px clamp(16px,3vw,32px);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.topbar.solid{background:rgba(248,245,239,.92);color:var(--ink);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.topbar.solid .lang-btn{color:var(--ink);border-color:var(--line);background:#fff}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;white-space:nowrap}
.brand-dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d8,#e7b45a 50%,#0f7c86)}
.brand-txt{font-family:"Inter",sans-serif;letter-spacing:-.01em}
.brand-txt b{color:var(--gold)}
.brand-city{font-size:.8rem;padding:.15em .6em;border-radius:999px;border:1px solid currentColor;opacity:.7}
.mainnav{display:flex;gap:4px;margin-inline-start:auto;flex-wrap:nowrap}
.mainnav a{text-decoration:none;font-size:.9rem;padding:.4em .7em;border-radius:999px;opacity:.85;white-space:nowrap}
.mainnav a:hover{opacity:1;background:rgba(127,127,127,.15)}
.top-actions{display:flex;gap:8px;align-items:center}
.menu-btn{display:none;background:transparent;border:0;width:40px;height:40px;padding:8px;flex-direction:column;justify-content:space-around}
.menu-btn span{display:block;height:2px;background:currentColor;border-radius:2px}
@media (max-width:1180px){
  .mainnav{position:fixed;inset:62px 12px auto 12px;flex-direction:column;background:#fff;color:var(--ink);padding:10px;border-radius:16px;box-shadow:var(--shadow);display:none}
  .mainnav.open{display:flex}
  .menu-btn{display:flex}
  .top-actions{margin-inline-start:auto}
}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;color:#fff;padding:110px clamp(16px,5vw,64px) 40px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:center/cover no-repeat var(--night2);transform:scale(1.05);animation:heroDrift 30s ease-in-out infinite alternate}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,13,.55),rgba(5,7,13,.25) 40%,rgba(5,7,13,.8))}
@keyframes heroDrift{to{transform:scale(1.14) translateX(-2%)}}
.hero-inner{position:relative;max-width:820px}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--gold-l);margin:0 0 12px}
html[lang="ar"] .kicker{letter-spacing:0;font-size:.95rem}
.hero h1{font-size:clamp(2.3rem,6vw,4.6rem);font-weight:600;margin-bottom:.35em}
.lead{font-size:clamp(1rem,1.6vw,1.2rem);color:#e5ebf0;max-width:640px}
.ask-bar{display:flex;align-items:center;gap:10px;margin:26px 0 14px;background:rgba(255,255,255,.95);border-radius:999px;padding:6px;padding-inline-start:10px;max-width:680px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.ask-bar input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--ink);padding:.6em .2em}
.role-chips{display:flex;flex-wrap:wrap;gap:8px}
.hero-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:48px;max-width:980px}
.hero-stats div{border-top:1px solid rgba(255,255,255,.3);padding-top:10px}
.hero-stats b{display:block;font:600 1.7rem/1.1 var(--f-head);color:var(--gold-l)}
.hero-stats span{font-size:.82rem;color:#d3dbe2}
@media (max-width:720px){.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ask-bar .btn{padding:.7em 1em}}

/* ---------- SECTIONS ---------- */
.sec{padding:clamp(56px,8vw,100px) clamp(16px,5vw,64px)}
.sec-head{max-width:760px;margin-bottom:28px}
.sec-head p{color:var(--muted);margin:0;font-size:1.05rem}
.sec-tint{background:#efe8dc}
.sec-dark{background:linear-gradient(180deg,var(--night2),#101b31);color:#fff}
.sec-dark .sec-head p{color:#b8c3cf}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.filters button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.45em 1.1em;color:var(--ink)}
.filters button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.cards{display:grid;gap:18px}
.places{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card{position:relative;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);text-align:start;border:0;padding:0;color:inherit;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -18px rgba(19,32,43,.4)}
.card .ph{aspect-ratio:4/3;background:#d9d2c6 center/cover no-repeat;position:relative}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45))}
.card .tag{position:absolute;top:12px;inset-inline-start:12px;z-index:1;background:rgba(255,255,255,.92);color:var(--ink);font-size:.72rem;font-weight:600;padding:.25em .7em;border-radius:999px;text-transform:uppercase;letter-spacing:.06em}
.card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0}
.card .meta{font-size:.82rem;color:var(--muted)}
.card p{margin:0;font-size:.92rem;color:#38454f}
.card .row{display:flex;gap:8px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.card .row a,.card .row button{font-size:.82rem;padding:.4em .9em}
.rail{grid-auto-flow:column;grid-auto-columns:minmax(260px,320px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.rail .card{scroll-snap-align:start}
.rail .card .ph{aspect-ratio:16/10}
.future{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.future .card{background:#152341;color:#fff}
.future .card p{color:#c9d3de}
.future .card .tag{background:var(--gold-l)}


.map-pop b{display:block;font-size:.95rem}
.map-pop button{margin-top:6px;border:0;background:var(--teal);color:#fff;border-radius:999px;padding:.3em .8em;font-size:.8rem}

/* events */
.events{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ev{display:flex;gap:16px;padding:18px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.ev-date{flex:none;width:64px;text-align:center;border-radius:14px;background:linear-gradient(160deg,var(--gold-l),var(--gold));color:#22160a;padding:8px 4px;height:fit-content}
.ev-date b{display:block;font:700 1.6rem/1 var(--f-head)}
.ev-date span{font-size:.72rem;text-transform:uppercase;font-weight:600}
.ev h3{font-size:1.05rem;margin:0 0 4px}
.ev .meta{font-size:.82rem;color:#b8c3cf}
.ev p{margin:6px 0 0;font-size:.9rem;color:#dde4ea}
.ev .status{display:inline-block;margin-top:8px;font-size:.72rem;font-weight:600;padding:.2em .7em;border-radius:999px;background:rgba(15,124,134,.35);color:#bff3f7}
.ev .status.live{background:#1f9d55;color:#fff}

/* city */
.city-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}
@media (max-width:900px){.city-grid{grid-template-columns:1fr}}
.timeline{position:relative;padding-inline-start:28px}
.timeline::before{content:"";position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold),var(--teal))}
.tl{position:relative;margin-bottom:20px}
.tl::before{content:"";position:absolute;inset-inline-start:-27px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:3px solid var(--gold)}
.tl b{font-family:var(--f-head);color:var(--teal-d);font-size:1.05rem}
.tl p{margin:2px 0 0;color:#38454f}
.city-fig{margin:0;position:sticky;top:90px}
.city-fig img{border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;width:100%}
.city-fig figcaption{font-size:.8rem;color:var(--muted);margin-top:8px}

/* living */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:26px}
.stat{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.stat b{display:block;font:600 2rem/1.1 var(--f-head);color:var(--teal)}
.stat span{font-size:.88rem;color:var(--muted)}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.info{background:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.info h3{display:flex;align-items:center;gap:10px}
.info h3 i{font-style:normal;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e6f2f3;color:var(--teal);font-size:1rem}
.info ul{margin:0;padding-inline-start:18px;color:#38454f;font-size:.93rem}
.info li{margin:.3em 0}

/* business */
.biz{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media (max-width:900px){.biz{grid-template-columns:1fr}}
.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.zone{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.zone b{display:block;color:var(--teal-d)}
.zone span{font-size:.88rem;color:var(--muted)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 20px}
.steps li{counter-increment:s;position:relative;padding:10px 0;padding-inline-start:46px;border-bottom:1px dashed var(--line)}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:8px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.9rem}
.notes{margin:0;padding:16px 20px;padding-inline-start:36px;background:#fff7e8;border-radius:14px;border:1px solid var(--gold-l);font-size:.92rem}
.notes li{margin:.35em 0}

/* community */
.pill{display:inline-block;vertical-align:middle;font:600 .72rem/1 var(--f-body);text-transform:uppercase;letter-spacing:.08em;background:var(--gold-l);color:#3a2405;padding:.45em .8em;border-radius:999px}
.preview-note{font-size:.88rem;color:var(--muted);margin:-12px 0 22px}
.community{display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
@media (max-width:900px){.community{grid-template-columns:1fr}}
.circles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.circle{background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
.circle .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.2rem}
.circle b{font-size:1rem}
.circle span{font-size:.85rem;color:var(--muted);flex:1}
.circle button{align-self:flex-start;font-size:.8rem;padding:.35em 1em}
.feed{display:flex;flex-direction:column;gap:12px}
.post{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);display:flex;gap:12px}
.post .av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700}
.post small{color:var(--muted);font-size:.78rem}
.post p{margin:2px 0 0;font-size:.92rem}

/* footer */
.footer{background:var(--night);color:#c6d0da;padding:40px clamp(16px,5vw,64px) 24px}
.foot-inner{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:800px){.foot-inner{grid-template-columns:1fr}}
.foot-note{font-size:.85rem;max-width:460px}
.credits summary{cursor:pointer;font-weight:600;color:#fff}
.credits div{font-size:.75rem;line-height:1.5;margin-top:8px;max-height:220px;overflow:auto}
.credits a{color:#9fd3d8}
.copy{font-size:.78rem;opacity:.6;margin:24px 0 0}

/* dialog */
.dlg{border:0;border-radius:24px;padding:0;width:min(720px,calc(100% - 24px));max-height:calc(100dvh - 40px);box-shadow:0 40px 100px -30px rgba(0,0,0,.6);color:var(--ink);background:#fff}
.dlg::backdrop{background:rgba(5,7,13,.6);backdrop-filter:blur(4px)}
.dlg[open]{animation:dlgIn .3s ease}
@keyframes dlgIn{from{opacity:0;transform:translateY(16px)}}
.dlg-x{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:1.4rem;line-height:1}
.dlg .ph{aspect-ratio:2/1;background:center/cover #ddd}
.dlg .bd{padding:22px 26px 26px}
.dlg dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0;font-size:.93rem}
.dlg dt{font-weight:600;color:var(--teal-d)}
.dlg dd{margin:0}
.dlg .tipbox{background:#fff7e8;border-radius:14px;padding:12px 16px;display:flex;gap:12px;align-items:flex-start;font-size:.93rem}
.dlg .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.dlg .row a{text-decoration:none}
.dlg .credit{font-size:.72rem;color:var(--muted);margin-top:14px}

/* chat */
.chat[hidden]{display:none}
.chat-h{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,var(--night2),#17305a);color:#fff}
.chat-h small{display:block;font-size:.75rem;opacity:.75}
.chat-x{margin-inline-start:auto;background:transparent;border:0;color:#fff;font-size:1.5rem}
.chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f7f4ee}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;font-size:.93rem;line-height:1.5;white-space:pre-wrap}
.msg.bot{background:#fff;border-end-start-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.msg.me{align-self:flex-end;background:var(--teal);color:#fff;border-end-end-radius:4px}
.msg.typing{color:var(--muted)}
.chat-quick{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--line)}
.chat-quick button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.35em .9em;font-size:.8rem}
.chat-f{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.chat-f input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:.6em 1em;font:inherit;outline-color:var(--teal)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);background:var(--ink);color:#fff;padding:.7em 1.3em;border-radius:999px;z-index:1000;transition:transform .3s;font-size:.9rem;max-width:calc(100% - 32px);text-align:center}
.toast.on{transform:translate(-50%,0)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* =================== v3: gate, landing map, Nour =================== */
#globe.on{opacity:1}
#intro{z-index:2000;transition:opacity 1.2s ease,visibility 1.2s,background 1.2s}
#intro.landing{background:transparent}
#intro.landing #globe,#intro.landing .intro-vignette,#intro.landing .intro-coords{opacity:0}
.intro-vignette{transition:opacity 1.2s}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:#fff}
.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px;
  background:radial-gradient(ellipse at center,rgba(5,7,13,.25),rgba(5,7,13,.85) 70%);transition:opacity .8s,visibility .8s}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-avatar{width:min(220px,42vw);aspect-ratio:240/300;margin-bottom:6px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.gate-brand{font:600 .95rem/1 "Inter",sans-serif;letter-spacing:.04em;color:#cfd8e2;margin:0 0 12px}
.gate-brand b{color:var(--gold)}
.gate-title{font-size:clamp(1.7rem,4.6vw,3.2rem);font-weight:600;max-width:760px;margin:0 0 10px}
.gate-sub{color:#cfd8e2;max-width:560px;margin:0 0 24px;font-size:1.05rem}
.gate-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.gate-actions .btn{padding:.9em 1.6em;font-size:1rem}
.skip-btn[hidden]{display:none}

/* topbar always solid on the map */
.topbar{background:rgba(8,12,22,.55);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
body.off-landing .topbar{background:rgba(248,245,239,.94);color:var(--ink);box-shadow:0 1px 0 var(--line)}
body.off-landing .topbar .lang-btn,body.off-landing .topbar .icon-btn{color:var(--ink);border-color:var(--line);background:#fff}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;padding:0}
.icon-btn.off{opacity:.7}

/* landing */
.landing{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#0b1424}
.landing .map{position:absolute;inset:0;background:#0b1424}
.leaflet-container{font:inherit}
.cat-bar{position:absolute;z-index:500;top:76px;left:0;right:0;display:flex;gap:8px;overflow-x:auto;padding:4px clamp(12px,2vw,24px) 10px;scrollbar-width:none}
.cat-bar::-webkit-scrollbar{display:none}
.cat-bar button{flex:none;display:flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.25);background:rgba(8,12,22,.62);color:#fff;border-radius:999px;padding:.45em .95em;font-size:.88rem;font-weight:500;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:.2s}
.cat-bar button i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--c);font-size:.75rem}
.cat-bar button small{opacity:.7;font-size:.75rem}
.cat-bar button[aria-selected="true"]{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}
.results{position:absolute;z-index:500;top:128px;bottom:20px;inset-inline-start:clamp(12px,2vw,24px);width:330px;display:flex;flex-direction:column;background:rgba(248,245,239,.94);backdrop-filter:blur(12px);border-radius:20px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);overflow:hidden;transition:transform .35s ease,opacity .35s}
.results-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:16px 18px 10px;border-bottom:1px solid var(--line)}
.results-h .kicker{color:var(--teal);margin:0 0 2px;font-size:.68rem}
.results-h h2{font-size:1.35rem;margin:0}
.res-toggle{border:0;background:transparent;font-size:1.2rem;color:var(--ink);padding:4px 6px}
.res-list{overflow-y:auto;padding:8px;flex:1}
.res-item{display:flex;align-items:center;gap:12px;width:100%;text-align:start;border:0;background:transparent;border-radius:14px;padding:8px;color:var(--ink)}
.res-item:hover,.res-item.on{background:#fff;box-shadow:0 4px 14px -8px rgba(0,0,0,.35)}
.res-ph{flex:none;width:58px;height:58px;border-radius:12px;background:center/cover;display:grid;place-items:center;color:#fff;font-size:1.3rem}
.res-tx b{display:block;font-size:.93rem;line-height:1.3}
.res-tx small{color:var(--muted);font-size:.8rem}
.res-note{font-size:.72rem;color:var(--muted);padding:6px 10px;margin:0}
.results.collapsed{transform:translateY(calc(100% - 64px))}
.layer-toggle{position:absolute;z-index:500;bottom:24px;left:50%;transform:translateX(-50%);display:flex;background:rgba(8,12,22,.7);border-radius:999px;padding:4px;backdrop-filter:blur(8px)}
.layer-toggle button{border:0;background:transparent;color:#fff;border-radius:999px;padding:.35em 1em;font-size:.82rem}
.layer-toggle button.on{background:#fff;color:var(--ink)}
.scroll-cue{position:absolute;z-index:500;bottom:72px;left:50%;transform:translateX(-50%);color:#fff;font-size:.8rem;text-decoration:none;opacity:.85;text-shadow:0 1px 6px rgba(0,0,0,.8);white-space:nowrap}
.leaflet-bottom.leaflet-right{margin-bottom:6px}
html[dir="ltr"] .landing .leaflet-right{right:clamp(12px,2vw,24px)}
@media (min-width:1001px){ html[dir="ltr"] body.landed:not(.off-landing) .landing .leaflet-right{right:400px} html[dir="rtl"] body.landed:not(.off-landing) .landing .leaflet-left{left:400px} }
.pin{width:34px;height:34px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);border:3px solid #fff;box-shadow:0 6px 14px rgba(0,0,0,.45);display:grid;place-items:center;transition:transform .2s}
.pin span{transform:rotate(45deg);color:#fff;font-size:.85rem;font-weight:700}
.pin.active{transform:rotate(-45deg) scale(1.25);box-shadow:0 0 0 6px rgba(255,255,255,.35),0 8px 20px rgba(0,0,0,.5)}
.cg-pop .leaflet-popup-content-wrapper{border-radius:18px;padding:0;overflow:hidden}
.cg-pop .leaflet-popup-content{margin:0;width:280px!important}
.pop-ph{height:130px;background:center/cover #ddd}
.pop-bd{padding:12px 14px 14px}
.pop-bd b{display:block;font-size:1rem}
.pop-bd small{color:var(--muted)}
.pop-bd p{margin:6px 0 10px;font-size:.86rem;color:#38454f}
.pop-row{display:flex;flex-wrap:wrap;gap:6px}
.pop-row .btn{font-size:.76rem;padding:.4em .8em;text-decoration:none}
@media (max-width:760px){
  .results{top:auto;bottom:12px;left:12px;right:12px;width:auto;max-height:46svh}
  .cat-bar{top:66px}
  .layer-toggle{top:120px;bottom:auto;left:auto;right:12px;transform:none}
  .scroll-cue{display:none}
}

/* ---------- Nour ---------- */
.nour{position:fixed;z-index:900;bottom:18px;inset-inline-end:18px}
.nour-mini{position:relative;border:0;background:transparent;padding:0;display:flex;align-items:flex-end;gap:10px;flex-direction:row-reverse}
.nour-mini-av{width:76px;height:95px;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
.nour-mini-bubble{max-width:240px;background:#fff;color:var(--ink);border-radius:16px 16px 4px 16px;padding:10px 12px;font-size:.82rem;line-height:1.4;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);text-align:start;opacity:0;transform:translateY(8px);transition:.3s;pointer-events:none;margin-bottom:40px}
html[dir="rtl"] .nour-mini-bubble{border-radius:16px 16px 16px 4px}
.nour-mini-bubble.on{opacity:1;transform:none}
.nour-panel{display:none}
.nour.open .nour-mini{display:none}
.nour.open .nour-panel{display:flex}
.nour-panel{flex-direction:column;width:min(380px,calc(100vw - 24px));height:min(640px,calc(100dvh - 110px));background:rgba(248,245,239,.97);backdrop-filter:blur(16px);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);overflow:hidden;border:1px solid rgba(255,255,255,.6)}
@media (min-width:1001px){
  .nour.open.docked{top:76px;bottom:20px;inset-inline-end:clamp(12px,2vw,24px)}
  .nour.open.docked .nour-panel{height:100%;width:360px}
}
.nour-h{position:relative;display:flex;align-items:flex-end;gap:10px;padding:10px 14px 12px;color:#fff;
  background:radial-gradient(ellipse at 20% 0,rgba(95,240,255,.25),transparent 60%),linear-gradient(160deg,#0c1631,#17305a 60%,#1d2f57)}
.nour-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,#c9963f 0 10px,#f2d58f 10px 12px,#c9963f 12px 22px,transparent 22px 24px);opacity:.85}
.nour-figure{width:104px;height:130px;flex:none;margin-bottom:-4px}
.nour-id{flex:1;padding-bottom:10px}
.nour-id b{display:block;font:600 1.3rem/1.1 var(--f-head)}
.nour-id .ar{font-family:"IBM Plex Sans Arabic",sans-serif;color:var(--gold-l);font-weight:500;margin-inline-start:4px}
.nour-id small{display:block;font-size:.78rem;color:#bcd0e6;margin-top:4px}
.nour[data-state="speaking"] .nour-id small,.nour[data-state="listening"] .nour-id small,.nour[data-state="hearing"] .nour-id small{color:#7ff3ff}
.nour-ctrls{display:flex;flex-direction:column;gap:6px;align-self:flex-start}
.nour-ctrls .icon-btn{width:32px;height:32px}
.nour .chat-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:transparent}
.nour .msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.nour .msg.bot{background:#fff;border-end-start-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.nour .msg.me{align-self:flex-end;background:var(--teal);color:#fff;border-end-end-radius:4px}
.nour .msg.typing{color:var(--muted);font-style:italic}
.msg.roles div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.role-chip{border:1px solid var(--line);background:#f8f5ef;border-radius:999px;padding:.35em .9em;font-size:.82rem;color:var(--ink)}
.role-chip:hover,.role-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.nour .chat-quick{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--line);scrollbar-width:none}
.nour .chat-quick button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.35em .9em;font-size:.78rem;color:var(--ink)}
.nour .chat-f{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);align-items:center}
.nour .chat-f input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:.65em 1em;font:inherit;outline-color:var(--teal);background:#fff}
.nour .send{padding:.65em 1.1em}
.mic{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:#0c1631;color:#7ff3ff;display:grid;place-items:center}
.mic.live{background:#e63946;color:#fff;animation:micPulse 1.2s ease-in-out infinite}
@keyframes micPulse{50%{box-shadow:0 0 0 8px rgba(230,57,70,.25)}}
@media (max-width:760px){
  .nour.open{left:8px;right:8px;bottom:8px}
  .nour.open .nour-panel{width:100%;height:min(72svh,600px)}
  .nour-mini-av{width:64px;height:80px}
  .nour-mini-bubble{max-width:200px}
}

/* avatar life */
.nour-svg{width:100%;height:100%;display:block;overflow:visible}
.nour-svg .nv-ring{transform-origin:120px 132px;animation:spin 40s linear infinite}
.nour-svg .nv-eyes{transform-origin:120px 134px;animation:blink 6s infinite}
.nour-svg .nv-core{animation:core 3s ease-in-out infinite}
.nour-svg .nv-halo{transition:opacity .3s;opacity:.7}
.talking .nour-svg .nv-halo{opacity:1}
.talking .nour-svg .nv-ring{animation-duration:8s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}
@keyframes core{50%{opacity:.55}}
.tip-av{display:block;width:46px;height:58px;flex:none}
.dlg .tipbox .tip-av + div{padding-top:4px}

.landing > .cat-bar,.landing > .results,.landing > .layer-toggle,.landing > .scroll-cue,.nour{transition:opacity .8s ease .2s}
body:not(.landed) .landing > .cat-bar,body:not(.landed) .landing > .results,body:not(.landed) .landing > .layer-toggle,body:not(.landed) .landing > .scroll-cue,body:not(.landed) .nour{opacity:0;pointer-events:none}
@media (min-width:1001px){ body.landed .cat-bar{padding-inline-end:400px} .nour-figure{width:120px;height:150px} }
@media (max-width:760px){ .nour:not(.open){bottom:76px} .results.collapsed .res-list{visibility:hidden} }