:root{--g:#31c765;--g2:#a8f3c0;--bg:#050a07;--bg2:#0b1710;--panel:#0d1811;--panel2:#101d15;--line:#213229;--text:#f5faf7;--muted:#91a097;--map:#d9dfda;--road:#fff;--shadow:#0006}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% 0,#15351f,var(--bg) 28%);color:var(--text);font-family:Cairo,sans-serif;transition:background .25s ease,color .25s ease}body[data-theme="light"]{--bg:#f4f8f5;--bg2:#fff;--panel:#fff;--panel2:#eef7f1;--line:#cfe0d5;--text:#0a150e;--muted:#64766b;--map:#dde5e0;--road:#fff;--shadow:#1a2d2020;background:radial-gradient(circle at 80% 0,#dff5e6,#f4f8f5 30%)}a{color:inherit;text-decoration:none}button,input{font:inherit}.demo-logo{width:145px}.demo-logo-dark{display:none}body[data-theme="light"] .demo-logo-light{display:none}body[data-theme="light"] .demo-logo-dark{display:block}body>header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 1380px)/2));border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);z-index:20}header>div{display:flex;gap:9px;align-items:center}header span,header button,header div>a{font-size:.72rem;color:var(--muted);border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:7px 11px}.hero,.app,.global,.cta,footer{width:min(1380px,calc(100% - 34px));margin:auto}.hero{padding:34px 0 30px;display:flex;align-items:end;justify-content:space-between;gap:30px;min-height:0}.hero small,.global>small,.cta small,aside>label,.rhead small{color:#54d87e;font-weight:800;letter-spacing:.12em}.hero h1{font-size:clamp(2.8rem,5vw,5.3rem);margin:8px 0 16px;line-height:.98}.hero em{color:var(--g);font-style:normal}.hero p,.global p{color:var(--muted);max-width:760px}.hero button{background:linear-gradient(135deg,var(--g),var(--g2));border:0;border-radius:18px;padding:18px 22px;font-weight:800;min-width:260px;color:#061008}.app{display:grid;grid-template-columns:270px 1fr;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:var(--bg2);box-shadow:0 40px 100px var(--shadow)}aside{padding:22px;border-right:1px solid var(--line);min-width:0}aside>div{display:grid;gap:7px;margin:10px 0 22px}aside button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:12px;padding:9px 11px;text-align:left;min-width:max-content}aside button.active{border-color:var(--g);background:color-mix(in srgb,var(--g) 12%,var(--panel));color:var(--text)}aside article{border:1px solid var(--line);border-radius:16px;padding:13px;margin:0 0 22px;background:var(--panel)}aside article p{font-size:.7rem;color:var(--muted);margin:6px 0}.screen{padding:22px;min-width:0}.status{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem;margin-bottom:13px;gap:15px}.status>span:first-child{color:#65dc89}.ai{display:flex;gap:13px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--g) 7%,var(--panel)),var(--panel));border-radius:20px;padding:16px}.assistant-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--g),var(--g2));display:grid;place-items:center;flex:none;overflow:hidden}.assistant-mark img{width:34px;height:34px;object-fit:contain}.ai>div:last-child{flex:1;min-width:0}.query{display:flex;gap:8px;margin:7px 0}.query input{flex:1;background:var(--bg2);border:1px solid var(--line);color:var(--text);border-radius:11px;padding:10px;min-width:0}.query button{border:0;border-radius:11px;background:var(--g);font-weight:800;padding:0 16px;color:#061008}.ai #suggest{display:flex;gap:6px;flex-wrap:wrap}.ai #suggest button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;font-size:.66rem;padding:4px 8px}#thinking{display:none;margin-top:10px;border:1px solid color-mix(in srgb,var(--g) 35%,var(--line));background:color-mix(in srgb,var(--g) 8%,var(--panel));border-radius:13px;padding:10px;color:color-mix(in srgb,var(--g) 65%,var(--text));font-size:.75rem}#thinking.on{display:block}.rhead{display:flex;justify-content:space-between;align-items:end;margin:20px 0 10px}.rhead h2{font-size:1.5rem;margin:2px 0}.rhead>span{font-size:.7rem;border:1px solid var(--line);border-radius:10px;padding:7px 9px}.grid{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(340px,1.1fr);gap:10px}.map{height:500px;position:relative;border-radius:20px;overflow:hidden;background:var(--map);border:1px solid var(--line);transition:background .25s ease}.roads{position:absolute;inset:-18%;opacity:1;transition:transform .35s ease,background .35s ease}.map[data-city="dubai"] .roads{background:linear-gradient(18deg,transparent 45%,var(--road) 46% 50%,transparent 51%),linear-gradient(104deg,transparent 45%,var(--road) 46% 49%,transparent 50%),linear-gradient(76deg,transparent 47%,var(--road) 48% 50%,transparent 51%);background-size:210px 170px,275px 220px,360px 290px;transform:rotate(-2deg)}.map[data-city="london"] .roads{background:repeating-radial-gradient(ellipse at 20% 30%,transparent 0 48px,var(--road) 50px 56px,transparent 58px 108px),linear-gradient(35deg,transparent 46%,var(--road) 47% 50%,transparent 51%),linear-gradient(126deg,transparent 45%,var(--road) 46% 49%,transparent 50%);background-size:330px 250px,210px 190px,260px 230px;transform:rotate(7deg) scale(1.05)}.map[data-city="ny"] .roads{background:repeating-linear-gradient(0deg,transparent 0 62px,var(--road) 63px 71px,transparent 72px 126px),repeating-linear-gradient(90deg,transparent 0 78px,var(--road) 79px 88px,transparent 89px 150px);transform:rotate(-8deg) scale(1.12)}.me{position:absolute;left:48%;top:45%;z-index:3;color:#07100a;font-size:1.4rem;text-align:center}.me small{display:block;font-size:.6rem}.pin{position:absolute;z-index:4;width:38px;height:38px;border:3px solid white;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--g);box-shadow:0 4px 12px #0005;transition:left .3s ease,top .3s ease,opacity .2s}.pin b{display:block;transform:rotate(45deg);font-size:.65rem}.badge{position:absolute;left:14px;bottom:14px;z-index:5;background:#07100ae8;border-radius:12px;padding:10px 12px;display:grid;color:white}.badge b{color:var(--g2)}.badge small{font-size:.6rem;color:#b6c0ba}#offers{height:500px;overflow:auto;display:grid;gap:8px}.offer{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:12px;display:grid;grid-template-columns:48px 1fr auto;gap:10px;cursor:pointer}.offer:hover{border-color:#39704a}.icon{width:48px;height:48px;border-radius:13px;background:var(--panel2);display:grid;place-items:center;font-size:1.3rem}.offer h3{font-size:.86rem;margin:0}.offer p{font-size:.66rem;color:var(--muted);margin:2px 0}.offer small{font-size:.6rem;color:#66d989}.off{text-align:right;color:#7ee99e;font-weight:800}.think{border:1px solid var(--line);border-radius:17px;padding:13px;margin-top:10px}.pipe{display:flex;align-items:center;gap:7px;margin-top:10px}.pipe span{flex:1;background:var(--panel2);border-radius:10px;padding:8px;text-align:center;display:grid}.pipe i{font-style:normal;color:var(--muted)}.pipe strong{color:var(--text)}.pipe small{font-size:.58rem;color:var(--muted)}.global{text-align:center;padding:80px 0}.global h2{font-size:clamp(2rem,4vw,3.8rem);margin:8px}.journey{display:flex;justify-content:center;gap:20px;align-items:center;margin:30px}.journey span{min-width:160px;border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--panel);font-size:1.4rem;display:grid}.journey b{font-size:.85rem}.journey small{font-size:.65rem;color:var(--muted)}.cta{background:linear-gradient(135deg,var(--g),var(--g2));color:#061008;border-radius:28px;padding:38px;display:grid;grid-template-columns:1.2fr .8fr;gap:25px}.cta h2{font-size:clamp(1.8rem,3vw,2.8rem);margin:7px 0}.cta>div:last-child{display:grid;gap:8px}.cta a{border:1px solid #174f29;border-radius:99px;padding:11px;text-align:center;font-weight:800}.cta a:first-child{background:#061008;color:#fff}footer{padding:40px 0;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.7rem}footer p{max-width:680px}.modal{position:fixed;inset:0;background:#020503df;display:none;place-items:center;z-index:50;padding:20px}.modal.open{display:grid}.modal>div{width:min(540px,100%);background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:24px;position:relative;color:var(--text)}.modal>div>button#close{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--text);font-size:1.5rem}.reason{border:1px solid var(--line);background:var(--panel2);border-radius:14px;padding:12px;margin:15px 0}.actions{display:flex;gap:7px}.actions button{flex:1;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px}.tourcard button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:99px;padding:8px 13px}.tourcard #next{background:var(--g);color:#061008;float:right}[dir=rtl] aside{border-right:0;border-left:1px solid var(--line)}[dir=rtl] aside button{text-align:right}[dir=rtl] .off{text-align:left}[dir=rtl] .pipe{direction:rtl}@media(max-width:1000px){.hero{padding-top:24px}.app{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line)}aside>div{display:flex;overflow-x:auto;overflow-y:hidden;gap:8px;scroll-snap-type:x proximity;padding-bottom:6px;overscroll-behavior-inline:contain}aside>div::-webkit-scrollbar{height:5px}aside>div::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}aside button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}aside article{display:none}.grid{grid-template-columns:1fr}.map{height:320px}#offers{height:auto;max-height:500px}.cta{grid-template-columns:1fr}}@media(max-width:680px){body>header{height:64px}.demo-logo{width:125px}header span{display:none}.hero{display:block;padding:24px 0 26px}.hero h1{font-size:clamp(2.35rem,13vw,4rem)}.hero button{width:100%;margin-top:15px}.app{border-radius:24px}.screen{padding:12px}.status{font-size:.72rem;align-items:flex-start}.ai{padding:14px}.query{display:grid}.query button{padding:10px}.pipe{display:grid;grid-template-columns:1fr}.pipe i{display:none}.journey{gap:6px;margin-inline:0}.journey span{min-width:0;flex:1;padding:9px}.cta{padding:24px}footer{display:grid;gap:12px}.offer{grid-template-columns:44px 1fr}.off{grid-column:2}aside{padding:16px}aside>label{display:block;margin-top:4px}#cities,#cats{display:flex!important;overflow-x:auto;width:100%;max-width:100%;padding-bottom:8px}#cities button,#cats button{width:auto;min-width:max-content;max-width:none;white-space:nowrap;padding:10px 14px}.map{height:360px}.global{padding:62px 0}}


/* WiOffers Interactive Demo v1.1.1 — theme / RTL / journey polish */
:root{
  --footer-bg:#030806;
  --footer-text:#91a097;
  --cta-label:#0d5b2a;
  --cta-arrow:#0a160e;
}
body[data-theme="light"]{
  --footer-bg:#030806;
  --footer-text:#a6b6ad;
  --cta-label:#0b5a29;
  --cta-arrow:#07100a;
}
/* Header follows the page theme; footer stays intentionally dark. */
footer{background:var(--footer-bg);color:var(--footer-text);padding:34px 26px;border-radius:22px 22px 0 0;margin-top:0}
footer .demo-logo-light{display:block!important}
footer .demo-logo-dark{display:none!important}
body[data-theme="light"] footer .demo-logo-light{display:block!important}
body[data-theme="light"] footer .demo-logo-dark{display:none!important}

/* Product vision label must stay readable on the green CTA in both themes. */
.cta .vision-label{color:var(--cta-label)!important;font-weight:900;opacity:1;letter-spacing:.12em;text-shadow:none}
[dir="rtl"] .cta .vision-label{letter-spacing:0}
.vision-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.16em .28em;line-height:1.12;margin:7px 0;font-size:clamp(1.8rem,3vw,2.8rem)}
.vision-flow .vision-part{display:inline-block}
.vision-flow .vision-arrow{font-weight:700;color:var(--cta-arrow);opacity:.82;line-height:1}
[dir="rtl"] .vision-flow{justify-content:flex-start;text-align:right}

/* Journey is rendered explicitly per language to avoid browser bidi re-ordering. */
.journey{direction:ltr}
.journey .journey-arrow{font-size:1.15rem;font-weight:900;color:var(--text);opacity:.86;flex:0 0 auto}
.journey .journey-card{min-width:160px;border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--panel);font-size:1.4rem;display:grid}
.journey .journey-card b{font-size:.85rem}.journey .journey-card small{font-size:.65rem;color:var(--muted)}
body[data-theme="light"] .journey .journey-card{box-shadow:0 12px 30px #1736220b}

/* Light mode coherence: avoid dark-only remnants while keeping the branded footer dark. */
body[data-theme="light"] .app,body[data-theme="light"] .screen,body[data-theme="light"] aside{background:var(--bg2)}
body[data-theme="light"] .think,body[data-theme="light"] .ai,body[data-theme="light"] .offer,body[data-theme="light"] aside article{box-shadow:0 8px 28px #1736220a}
body[data-theme="light"] .me{color:#07100a}
body[data-theme="light"] .pin{color:#07100a}
body[data-theme="light"] .hero small,body[data-theme="light"] .global>small,body[data-theme="light"] aside>label,body[data-theme="light"] .rhead small{color:#1e9f4b}

/* RTL spacing/alignment polish without reversing logical product structures. */
[dir="rtl"] .status,[dir="rtl"] .rhead,[dir="rtl"] .ai{text-align:right}
[dir="rtl"] .query input{text-align:right}
[dir="rtl"] .assistant-mark{order:2}
[dir="rtl"] .ai>div:last-child{order:1}

@media(max-width:680px){
  .journey{gap:5px;align-items:stretch}
  .journey .journey-card{min-width:0;flex:1;padding:10px 6px}
  .journey .journey-arrow{font-size:.92rem}
  .vision-flow{font-size:clamp(1.55rem,8.6vw,2.35rem);justify-content:center;text-align:center;gap:.1em .2em}
  [dir="rtl"] .vision-flow{justify-content:center;text-align:center}
  footer{padding:30px 18px}
}

[dir=rtl] .ai{direction:rtl}[dir=rtl] .ai .assistant-mark{order:0}[dir=rtl] .ai>div:last-child{order:1;text-align:right}[dir=rtl] .query{direction:rtl}


/* WiOffers Interactive Demo v1.1.3 — navigation dedupe + journey copy centering */
.global > p{
  width:min(760px,100%);
  margin:24px auto 0;
  text-align:center;
  margin-inline:auto;
}
[dir="rtl"] .global > p,[dir="ltr"] .global > p{
  text-align:center;
}


/* v1.1.4 Arabic demo QA: RTL arrows and localized content */
#tour .tour-arrow{display:inline-block;line-height:1}
[dir="rtl"] #tour .tour-arrow{transform:scaleX(-1)}
[dir="rtl"] .pipe{direction:rtl}
[dir="rtl"] .pipe i{direction:ltr}


/* v1.1.5 — WiOffers mark beside thinking title (LTR + RTL) */
.think-title{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%}
.think-title img{width:22px;height:22px;object-fit:contain;display:block;flex:0 0 22px}
[dir="ltr"] .think-title{flex-direction:row}
[dir="rtl"] .think-title{direction:rtl;flex-direction:row;margin-inline-start:auto;margin-inline-end:0}

/* v1.1.6 — Arabic thinking title: icon fixed on the physical right of the text */
[dir="rtl"] .think-title{
  display:flex;
  direction:ltr;
  flex-direction:row-reverse;
  justify-content:flex-start;
  align-items:center;
  gap:8px;
  margin-left:auto;
  margin-right:0;
  width:max-content;
}
[dir="rtl"] .think-title span{
  direction:rtl;
  unicode-bidi:isolate;
  text-align:right;
}


/* v1.1.9 — refined product vision + centered mobile brand close */
.vision-flow{display:block;line-height:1.16}
.vision-flow .vision-line{display:block}
.vision-flow .vision-line-2{margin-top:.16em;font-size:.72em;font-weight:800}
[dir="rtl"] .vision-flow{text-align:right}
[dir="ltr"] .vision-flow{text-align:left}
@media(max-width:680px){
  .vision-flow,[dir="rtl"] .vision-flow,[dir="ltr"] .vision-flow{text-align:center;justify-content:center}
  .vision-flow .vision-line-2{margin-top:.28em}
  footer{justify-items:center;text-align:center}
  footer .footer-logo{margin-inline:auto}
  footer p{width:min(90%,560px);max-width:560px;margin:0 auto;text-align:center;line-height:1.75}
}