/* nPlay luxury layer 2026-11-13. Additive: remove the np-lux.css / np-lux.js tags to roll back. */
@font-face{font-family:"NpCairo";font-style:normal;font-display:swap;font-weight:200 1000;src:url(/assets/fonts/cairo-arabic-wght-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
:root{--lx-v:#9B4DFF;--lx-b:#3D7BFF;--lx-l:#b9a6ff;--lx-ink:#f3f2fb;--lx-mut:#a6a3c2;--lx-g:linear-gradient(135deg,#9B4DFF 0%,#3D7BFF 100%);--lx-gh:linear-gradient(90deg,#9B4DFF,#3D7BFF);--lx-r:21px;--lx-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- type ---------- */
html body{font-family:Inter,"NpCairo",system-ui,-apple-system,"Segoe UI",sans-serif}
html[dir="rtl"] body,html[lang="ar"] body{font-family:"NpCairo",Inter,Tahoma,system-ui,sans-serif}
html[dir="rtl"] body :is(h1,h2,h3,h4,h5,p,a,li,span,div,button,summary,td,th,label,input,textarea,select,figcaption,b,strong){font-family:"NpCairo",Inter,Tahoma,system-ui,sans-serif}
html[dir="rtl"] body :is(h1,h2,h3){letter-spacing:0!important;line-height:1.35}
::selection{background:rgba(155,77,255,.45);color:#fff}
html{scrollbar-color:#6C63FF #0b0a18;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0a18}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#9B4DFF,#3D7BFF);border-radius:10px;border:2px solid #0b0a18}
:focus-visible{outline:2px solid #7FA6FF;outline-offset:3px;border-radius:6px}

/* ---------- header: floating glass capsule ---------- */
html body .nv{top:12px;left:50%;right:auto;transform:translateX(-50%);width:min(1280px,calc(100% - 28px));box-sizing:border-box;padding:8px 10px 8px 20px;border-radius:var(--lx-r);border:0;
background:linear-gradient(180deg,rgba(26,20,58,.66),rgba(11,9,28,.7));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
box-shadow:0 18px 50px rgba(3,2,12,.5),inset 0 1px 0 rgba(255,255,255,.07);transition:top .35s var(--lx-ease),padding .35s var(--lx-ease),background .35s,box-shadow .35s}
html[dir="rtl"] body .nv{padding:8px 20px 8px 10px}
html body .nv::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
background:linear-gradient(115deg,rgba(155,77,255,.8),rgba(155,140,255,.12) 34%,rgba(61,123,255,.1) 62%,rgba(61,123,255,.75));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
html body .nv::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;border-radius:2px;background:var(--lx-gh);transform-origin:left center;transform:scaleX(var(--lx-p,0));opacity:.95;pointer-events:none}
html[dir="rtl"] body .nv::after{transform-origin:right center}
html body .nv.lx-s{top:8px;padding-top:5px;padding-bottom:5px;background:linear-gradient(180deg,rgba(18,14,42,.9),rgba(9,8,22,.92));box-shadow:0 14px 40px rgba(3,2,12,.7),inset 0 1px 0 rgba(255,255,255,.06)}
html body .nv .brand img{height:34px;transition:height .35s var(--lx-ease),filter .3s}
html body .nv.lx-s .brand img{height:29px}
html body .nv .brand:hover img{filter:drop-shadow(0 0 14px rgba(155,77,255,.7))}
html body .nv .links{gap:6px;font-size:13.5px;letter-spacing:.2px}
html body .nv .links>a:not(.cta):not(.lang),html body .nv .nvdrop>a{position:relative;padding:9px 9px;border-radius:12px;transition:color .25s,background .25s}
html body .nv .links>a:not(.cta):not(.lang):hover,html body .nv .nvdrop:hover>a{background:rgba(155,140,255,.09)}
/* the logo's little rod marks the hovered / current link */
html body .nv .links>a:not(.cta):not(.lang)::after,html body .nv .nvdrop>a::after{content:"";position:absolute;left:50%;bottom:1px;width:15px;height:3.5px;border-radius:4px;background:var(--lx-gh);transform:translateX(-50%) rotate(-22deg) scaleX(0);transition:transform .35s var(--lx-ease);pointer-events:none}
html body .nv .links>a:not(.cta):not(.lang):hover::after,html body .nv .nvdrop:hover>a::after,html body .nv .links a.lx-cur::after{transform:translateX(-50%) rotate(-22deg) scaleX(1)}
html body .nv .links a.lx-cur{color:#fff!important}
html body .nv .cta,html body .nv .lang{clip-path:none!important;border-radius:999px!important;padding:9px 18px!important;font-size:11.5px;letter-spacing:1.3px;white-space:nowrap;transition:transform .3s var(--lx-ease),box-shadow .3s,background .3s}
html body .nv .cta{position:relative;overflow:hidden;box-shadow:0 8px 22px rgba(108,99,255,.35),inset 0 1px 0 rgba(255,255,255,.25)!important}
html body .nv .cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(108,99,255,.55),inset 0 1px 0 rgba(255,255,255,.3)!important}
html body .nv .cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s var(--lx-ease)}
html body .nv .cta:hover::after{left:130%}
html body .nv a.cta[href*="contact"]{background:rgba(155,140,255,.08)!important;background-image:none!important;box-shadow:inset 0 0 0 1px rgba(155,140,255,.5)!important}
html body .nv a.cta[href*="contact"]:hover{background:rgba(155,140,255,.18)!important;background-image:none!important}
html body .nv .lang{border:1px solid rgba(127,166,255,.45)!important;color:#cfe0ff!important;background:transparent}
html body .nv .lang:hover{background:rgba(61,123,255,.16);border-color:#7FA6FF!important}
html body .nv .caret{display:inline-block;transition:transform .3s;opacity:.8;font-size:10px;margin-inline-start:3px}
/* dropdowns */
html body .nv .nvsub{background:linear-gradient(180deg,#19143a,#0c0a1e)!important;border:1px solid rgba(155,140,255,.22)!important;border-radius:var(--lx-r)!important;padding:10px!important;box-shadow:0 30px 80px rgba(2,2,10,.75),0 0 40px rgba(108,99,255,.12)!important}
html body .nv .links .nvsub a{color:#cfcbe8!important;border-radius:12px;padding:9px 14px!important;font-size:13.5px;transition:background .2s,color .2s,padding .25s var(--lx-ease)}
html body .nv .links .nvsub a:hover{background:rgba(155,77,255,.16)!important;color:#fff!important;padding-inline-start:20px!important}
html body .nv .links .nvsub a[style*="39edd1"]{color:#b9a6ff!important}
html body .nv .links .nvsub .nvall{border-top:1px solid rgba(155,140,255,.18)!important;border-radius:0 0 12px 12px;margin-top:6px;color:#7FA6FF!important}
@media (min-width:881px){
html body .nv .nvsub{top:calc(100% + 14px);min-width:480px;animation:lxDrop .28s var(--lx-ease)}
html body .nv .nvdrop:hover .nvsub,html body .nv .nvdrop.open .nvsub{display:grid!important;grid-template-columns:1fr 1fr;gap:2px 8px}
html body .nv .nvsub .nvall{grid-column:1/-1}
html body .nv .nvsub::before{top:-16px;height:18px}
html[dir="rtl"] body .nv .nvsub{left:auto;right:-14px}
}
@keyframes lxDrop{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:1180px) and (min-width:881px){html body .nv .links{gap:1px;font-size:12.5px}html body .nv .links>a:not(.cta):not(.lang),html body .nv .nvdrop>a{padding:9px 6px}html body .nv .cta,html body .nv .lang{padding:8px 12px!important;letter-spacing:.6px}}
/* mobile menu: was light text on a white panel */
@media (max-width:880px){
html body .nv{padding:8px 10px 8px 16px;top:8px;width:calc(100% - 16px)}
html[dir="rtl"] body .nv{padding:8px 16px 8px 10px}
html body .nvburger{border:1px solid rgba(155,140,255,.4)!important;color:#e9e6ff!important;border-radius:12px!important;width:42px;height:38px;padding:0!important;font-size:19px;background:rgba(155,140,255,.08)!important;transition:background .2s,transform .3s var(--lx-ease)}
html body .nv.open .nvburger{background:var(--lx-g)!important;transform:rotate(90deg)}
html body .nv .links{top:calc(100% + 8px)!important;border-radius:var(--lx-r);border:1px solid rgba(155,140,255,.22)!important;background:linear-gradient(180deg,rgba(24,19,54,.985),rgba(11,9,28,.985))!important;padding:12px 14px 18px!important;max-height:calc(100vh - 96px);overflow:auto;box-shadow:0 30px 80px rgba(2,2,10,.8);gap:0!important;align-items:stretch!important}
html body .nv .links>a:not(.cta):not(.lang),html body .nv .nvdrop>a{padding:12px 10px!important;font-size:15.5px;border-bottom:1px solid rgba(155,140,255,.08);border-radius:0}
html body .nv .links>a:not(.cta):not(.lang)::after,html body .nv .nvdrop>a::after{display:none}
html body .nv .nvdrop>a{width:100%;justify-content:space-between;box-sizing:border-box}
html body .nv .caret{font-size:14px;padding:4px 10px}
html body .nv .nvsub{background:rgba(155,140,255,.05)!important;border:0!important;box-shadow:none!important;border-radius:14px!important;margin:6px 0!important;padding:6px!important}
html body .nv .links .cta,html body .nv .links .lang{margin-top:10px;text-align:center;padding:12px 18px!important;font-size:12.5px}
}

/* ---------- page headers (inner pages) ---------- */
html body .lx-ph{position:relative;isolation:isolate;padding-top:clamp(64px,8vw,104px)}
html body .lx-ph.lx-short{padding-bottom:clamp(40px,5vw,72px);background-color:transparent!important}
.lx-hd{position:absolute;top:0;left:0;right:0;height:min(100%,680px);overflow:hidden;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.lx-short>.lx-hd{height:100%;-webkit-mask-image:none;mask-image:none}
.lx-hd::before{content:"";position:absolute;inset:-20% -10% 0;
background:radial-gradient(46% 60% at var(--lx-ax,78%) 30%,rgba(155,77,255,.22),transparent 70%),radial-gradient(40% 55% at var(--lx-bx,18%) 80%,rgba(61,123,255,.16),transparent 70%);animation:lxAur 16s ease-in-out infinite alternate}
html body .lx-ph.lx-short::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(155,140,255,.55),rgba(61,123,255,.55),transparent);pointer-events:none}
@keyframes lxAur{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
.lx-hd .lx-art{position:absolute;top:50%;inset-inline-end:max(-70px,calc(50% - 740px));width:min(42vw,480px);transform:translateY(-50%);opacity:.6;-webkit-mask-image:linear-gradient(to left,#000 45%,rgba(0,0,0,.25));mask-image:linear-gradient(to left,#000 45%,rgba(0,0,0,.25))}
html[dir="rtl"] .lx-hd .lx-art{-webkit-mask-image:linear-gradient(to right,#000 45%,rgba(0,0,0,.25));mask-image:linear-gradient(to right,#000 45%,rgba(0,0,0,.25))}
.lx-ph.lx-c .lx-art{inset-inline-end:auto;left:50%;width:min(70vw,620px);transform:translate(-50%,-50%);opacity:.26;-webkit-mask-image:none;mask-image:none}
.lx-ph.lx-c .lx-art text{display:none}
.lx-art svg{width:100%;height:auto;display:block;overflow:visible;animation:lxFloat 11s ease-in-out infinite}
.lx-art .lx-draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);animation:lxDraw 2.6s var(--lx-ease) .15s forwards}
.lx-art .lx-fade{opacity:0;animation:lxIn 1.6s ease 1s forwards}
.lx-art .lx-spin{transform-origin:122px 144px;animation:lxSpin 60s linear infinite}
@keyframes lxDraw{to{stroke-dashoffset:0}}
@keyframes lxIn{to{opacity:1}}
@keyframes lxSpin{to{transform:rotate(360deg)}}
@keyframes lxFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.2deg)}}
html body .lx-ph .kick::before,html body .lx-ph .skick::before{content:"";display:inline-block;width:20px;height:5px;border-radius:5px;background:var(--lx-gh);transform:rotate(-22deg);margin-inline-end:10px;vertical-align:middle}
html body .lx-ph h1{text-wrap:balance}
html body .lx-ph .lead,html body .lx-ph h1+p{text-wrap:pretty}
.lx-crumb{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12px;letter-spacing:.4px;color:#8f8bb5;margin:0 0 16px}
.lx-ph.lx-c .lx-crumb{justify-content:center}
.lx-crumb a{color:#b9a6ff;text-decoration:none}
.lx-crumb a:hover{color:#fff}
.lx-crumb i{width:4px;height:4px;border-radius:50%;background:#6C63FF;display:inline-block}
@media (max-width:880px){.lx-hd .lx-art{opacity:.3;width:78vw;inset-inline-end:-22vw}.lx-ph.lx-c .lx-art{opacity:.26}}

/* ---------- surfaces ---------- */
html body .card,html body .eco2card{transition:transform .45s var(--lx-ease),border-color .35s,box-shadow .45s var(--lx-ease)}
@media (hover:hover){
html body .card:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(4,3,16,.6),0 0 0 1px rgba(155,140,255,.28),0 0 44px rgba(108,99,255,.12);background-image:radial-gradient(280px circle at var(--sx,50%) var(--sy,0%),rgba(155,120,255,.17),transparent 68%)!important}
}
html body h2.t{position:relative}
html body .ft{position:relative;border-top:0!important}
html body .ft::before{content:"";position:absolute;top:0;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,rgba(155,77,255,.7),rgba(61,123,255,.7),transparent)}
html body .btn,html body a.btn{transition:transform .3s var(--lx-ease),box-shadow .3s,filter .3s}
@media (hover:hover){html body .btn:hover,html body a.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}}
html body .wabtn{box-shadow:0 10px 30px rgba(108,99,255,.5),0 0 0 6px rgba(108,99,255,.12)}

/* ---------- interactive field ---------- */
#lx-field{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;display:block}
.lx-on #traillens{display:none!important}
#lx-secrets{position:absolute;top:0;left:0;width:100%;height:0;z-index:5;pointer-events:none}
.lx-sec{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;text-decoration:none;display:block}
.lx-sec::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#b9a6ff;box-shadow:0 0 0 0 rgba(155,77,255,.55),0 0 14px 3px rgba(155,77,255,.55);animation:lxHint 2.6s ease-out infinite}
@keyframes lxHint{0%{box-shadow:0 0 0 0 rgba(155,77,255,.55),0 0 14px 3px rgba(155,77,255,.5);opacity:.95}70%{box-shadow:0 0 0 16px rgba(155,77,255,0),0 0 14px 3px rgba(155,77,255,.3);opacity:.55}100%{box-shadow:0 0 0 0 rgba(155,77,255,0),0 0 14px 3px rgba(155,77,255,.5);opacity:.95}}
.lx-sec svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .4s}
.lx-sec svg *{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.lx-sec b{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,6px);white-space:nowrap;font:600 12px/1 Inter,"NpCairo",sans-serif;letter-spacing:.3px;color:#f3f2fb;padding:7px 12px;border-radius:999px;background:rgba(18,14,42,.92);border:1px solid rgba(155,140,255,.4);box-shadow:0 10px 26px rgba(2,2,10,.6);opacity:0;transition:opacity .5s .5s,transform .5s .5s var(--lx-ease)}
.lx-sec.lx-edge-s b{left:0;transform:translate(0,6px)}
.lx-sec.lx-edge-e b{left:auto;right:0;transform:translate(0,6px)}
.lx-sec.lx-f{pointer-events:auto;cursor:pointer}
.lx-sec.lx-f::before{animation:none;opacity:0}
.lx-sec.lx-f svg{opacity:1}
.lx-sec.lx-f svg *{animation:lxDraw 1.5s var(--lx-ease) forwards}
.lx-sec.lx-f svg{animation:lxFloat 7s ease-in-out 1.5s infinite}
.lx-sec.lx-f b{opacity:1;transform:translate(-50%,0)}
.lx-sec.lx-f.lx-edge-s b,.lx-sec.lx-f.lx-edge-e b{transform:none}
.lx-sec.lx-f:hover b{background:var(--lx-g);border-color:transparent}
#lx-chip{position:fixed;right:16px;bottom:16px;z-index:9997;display:flex;align-items:center;gap:10px;max-width:min(360px,calc(100vw - 100px));padding:9px 15px 9px 10px;border-radius:999px;font:600 12.5px/1.35 Inter,"NpCairo",sans-serif;color:#e9e6ff;letter-spacing:.2px;background:rgba(16,13,38,.9);border:1px solid rgba(155,140,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 36px rgba(2,2,10,.6);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s var(--lx-ease),border-color .4s;pointer-events:none}
#lx-chip.lx-show{opacity:1;transform:none;pointer-events:auto}
#lx-chip svg{flex:0 0 30px;width:30px;height:30px}
#lx-chip .lx-ring{fill:none;stroke:url(#lxg);stroke-width:3;stroke-linecap:round;stroke-dasharray:75.4;stroke-dashoffset:calc(75.4 - 75.4*var(--lx-k,0));transform:rotate(-90deg);transform-origin:15px 15px;transition:stroke-dashoffset .7s var(--lx-ease)}
#lx-chip a{color:#b9a6ff;font-weight:800;text-decoration:none;white-space:nowrap}
#lx-chip.lx-done{border-color:#7FA6FF;box-shadow:0 0 34px rgba(108,99,255,.5),0 14px 36px rgba(2,2,10,.6);border-radius:22px}
#lx-chip button{all:unset;cursor:pointer;color:#8f8bb5;font-size:16px;padding:0 2px;line-height:1}
#hdcounter{color:#cfcbe8!important;border-color:rgba(155,140,255,.45)!important;bottom:74px!important}
/* homepage: the old hidden art sat behind the page background, so nothing showed. Bring it forward in brand colours. */
html body #artbg{z-index:4!important}
#artbg [stroke="#7a2ff0"]{stroke:#9B4DFF}#artbg [stroke="#0e93d8"]{stroke:#5d8dff}#artbg [stroke="#c43ce8"]{stroke:#b9a6ff}
.lx-on #artbg .artel:not(.arttx):not(.disc){opacity:1}
.lx-on #artbg .artel:not(.arttx):not(.disc)::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#b9a6ff;animation:lxHint 2.6s ease-out infinite}
html body #artbg .artel.disc:not(.eph):not(.arttx){animation:lxArtIn 2s ease forwards}
@keyframes lxArtIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:.72;transform:none}}
html body #artbg .arttx.disc{animation:lxTx 110s ease forwards;text-shadow:0 0 14px rgba(155,77,255,.5)}
@keyframes lxTx{0%{opacity:0}2%{opacity:.95}94%{opacity:.95}100%{opacity:0}}
.lx-on #hdcounter{display:none!important}
html body .hd{color:#b9a6ff!important;opacity:.3}
html body .hd.found{color:#fff!important;text-shadow:0 0 16px rgba(155,77,255,.8)}
@media (max-width:880px){#lx-chip{bottom:12px;right:10px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.lx-hd::before,.lx-art svg,.lx-art .lx-spin,.lx-sec::before,.lx-sec.lx-f svg{animation:none!important}.lx-art .lx-draw{stroke-dashoffset:0;animation:none}.lx-art .lx-fade{opacity:1;animation:none}}
@media print{#lx-field,#lx-secrets,#lx-chip{display:none!important}html body .nv{position:static;transform:none;width:auto}}
/* hero-band pages: the info card was a white panel under white text since the dark theme */
html body .hero-band .in{background:linear-gradient(180deg,rgba(24,19,54,.74),rgba(11,9,28,.8))!important;border:1px solid rgba(155,140,255,.24);border-radius:var(--lx-r)!important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 30px 80px rgba(2,2,10,.55),inset 0 1px 0 rgba(255,255,255,.06)}
html body .hero-band .in :is(p,li,span:not(.grad),div:not(.kick):not(.skick)){color:#d6d2ee!important}
html body .hero-band .in :is(b,strong){color:#fff!important}
html body .hero-band .in a:not(.btn):not([class*="btn"]){color:#b9a6ff!important}
html body .hero-band .in [style*="border-top"]{border-color:rgba(155,140,255,.2)!important}
.hero-band .lx-art{display:none}
.hero-band>.lx-hd::before{opacity:.55}