@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&display=swap');
:root{--bg:#0d0d0d;--cd:#141414;--ln:#252525;--tx:#f4f4f4;--mu:#858585;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 15px/1.7 Sora,system-ui,sans-serif}
a{color:inherit;text-decoration:none}p{color:var(--mu);margin:0 0 1em}:focus-visible{outline:2px solid #fff;outline-offset:3px}
h1,h2{font-weight:600;line-height:1.2;margin:0 0 .5em}h1{font-size:clamp(2rem,4.6vw,3.4rem)}h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}h3{font-size:1.1rem;font-weight:600;margin:0 0 .5em}h1 span,h2 span{color:#5e5e5e}
.w{max-width:1160px;margin:0 auto;padding:0 24px}.sec{padding:70px 24px}.c{text-align:center}.wide{max-width:760px;margin:0 auto}
header{position:sticky;top:0;z-index:9;background:rgba(13,13,13,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.nav{display:flex;align-items:center;height:72px}.brand{display:flex;align-items:center;gap:10px}.lg{width:26px;height:28px}.brand b{font-size:1.2rem}
nav{display:flex;gap:6px}nav a{padding:9px 16px;border-radius:99px;color:#ddd;font-size:.9rem;transition:background .2s}nav a:hover,nav a.on{background:#1c1c1c;color:#fff}
#mb{display:none;background:#1c1c1c;color:#fff;border:0;border-radius:99px;padding:9px 16px;font:inherit}
.b{display:inline-block;background:#fff;color:#000;border:0;border-radius:99px;padding:13px 26px;font:600 .9rem Sora;cursor:pointer}.b.g{background:#1a1a1a;color:#fff}.b:hover{opacity:.85}
.bt{display:flex;gap:12px;flex-wrap:wrap}.bt.c{justify-content:center}.lead{color:var(--tx);margin:34px 0 14px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:90px 24px 60px;background:radial-gradient(#1b1b1b 1px,transparent 1px) 0 0/22px 22px}.hero p{max-width:520px}
.artw{display:grid;place-items:center;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}.artw .art{width:min(340px,80%);filter:drop-shadow(0 20px 40px #0008)}
.hd{text-align:center;margin-bottom:46px}.hd p{max-width:640px;margin:0 auto}
.ic{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.07);border:5px solid rgba(255,255,255,.1);color:#d4d8de;display:grid;place-items:center;margin:0 auto 18px}.ic svg{width:22px;height:22px}
.feat{display:grid;grid-template-columns:repeat(3,1fr)}.feat>div{text-align:center;padding:34px 26px;border-inline-start:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);position:relative}
.feat p,.card p{color:#a3a3a3}.feat h3,.card h3{color:#f4f4f4}.feat>div:nth-child(3n+1){border-inline-start:0}.feat>div:nth-last-child(-n+3){border-bottom:0}
.more{display:inline-flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);border-radius:99px;padding:6px 6px 6px 22px;font-size:.85rem;margin-top:6px;transition:border-color .2s}.more:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.09)}.more i{font-style:normal;background:rgba(255,255,255,.08);width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:36px;text-align:center;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 22px rgba(255,255,255,.02)}
/* glass cards: ambient glow (::before) + frosted blur layer (::after), both behind content */
.card::before,.feat>div::before{content:"";position:absolute;width:70%;aspect-ratio:1;top:-30%;inset-inline-start:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.3),rgba(205,210,220,.1) 55%,transparent 72%);filter:blur(18px);z-index:-1;pointer-events:none}
.card:nth-child(even)::before,.feat>div:nth-child(even)::before{top:auto;bottom:-34%;inset-inline-start:auto;inset-inline-end:-20%}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:-1;pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.card{background:rgba(26,26,30,.92)}main .feat{background:rgba(22,22,26,.9)}}
.wk{text-align:start}.wk .more{margin-top:8px}.shot{height:190px;border-radius:14px;background:radial-gradient(circle at 50% 30%,#262626,#0f0f0f);display:grid;place-items:center;margin-bottom:20px}.shot .art{height:110px;opacity:.8}.mt{font-size:.8rem;color:var(--mu);margin-bottom:10px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.steps b{font-size:2rem;color:#555}.steps .card{text-align:start}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.faq.one{grid-template-columns:1fr}
details{background:var(--cd);border:1px solid var(--ln);border-radius:16px;padding:18px 22px}summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}summary::-webkit-details-marker{display:none}summary::after{content:"+";font-size:1.3rem}details[open] summary::after{content:"\2212"}summary em{font-style:normal;color:var(--mu);font-weight:400;font-size:.85rem;margin-inline-start:auto}details p,details ul{color:var(--mu);margin:14px 0 0}
.cta{border:1px solid var(--ln);border-radius:26px;padding:60px 24px 0;text-align:center;background:radial-gradient(#1b1b1b 1px,transparent 1px) 0 0/22px 22px,var(--cd);overflow:hidden}.cta p{max-width:520px;margin:0 auto 24px}
.wm{font-size:clamp(3rem,13vw,9rem);font-weight:700;line-height:1;margin-top:26px;background:linear-gradient(#fff,#222 80%);-webkit-background-clip:text;background-clip:text;color:transparent;height:.85em;overflow:hidden}
form{display:grid;gap:14px;max-width:560px;margin:0 auto}input,select,textarea{width:100%;background:var(--cd);border:1px solid var(--ln);border-radius:14px;padding:15px;color:#fff;font:inherit}textarea{min-height:140px}input:focus,select:focus,textarea:focus{border-color:#777;outline:0}.sub{grid-template-columns:1fr auto;margin-bottom:50px}
.sl{margin-top:30px}.so{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--ln);background:#161616;margin:0 4px;transition:.2s}.so svg{width:19px;height:19px}.so:hover{background:#fff;color:#000;transform:translateY(-2px)}
footer{border-top:1px solid var(--ln);padding:50px 0 24px;margin-top:40px}.ft{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-bottom:36px;border-bottom:1px solid var(--ln)}.fs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fs span{margin-inline-end:10px}
.fc{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:36px 0}.fc h4{margin:0 0 12px}.fc a{display:block;color:var(--mu);padding:4px 0;font-size:.9rem;word-break:break-all}.fc a:hover{color:#fff}.cp{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--mu);font-size:.8rem;border-top:1px solid var(--ln);padding-top:20px}
@media(max-width:860px){#mb{display:block}nav{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;background:var(--bg);padding:14px 24px;border-bottom:1px solid var(--ln)}nav.open{display:flex}.hero,.feat,.cards,.steps,.faq,.fc{grid-template-columns:1fr}.feat>div{border-inline-start:0!important;border-bottom:1px solid var(--ln)!important}.hero{padding-top:50px}.artw{order:-1}.sub{grid-template-columns:1fr}}
main{animation:pg .55s cubic-bezier(.2,.7,.2,1) both;transition:opacity .25s,transform .25s}@keyframes pg{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
body::before{content:"";position:fixed;top:0;left:0;height:2px;width:0;background:#fff;z-index:99;transition:width .26s}body.leaving::before{width:100%}body.leaving main{opacity:0;transform:translateY(-12px)}
nav a{position:relative}nav a::after{content:"";position:absolute;inset:auto 16px 5px;height:1px;background:#fff;transform:scaleX(0);transition:transform .3s}nav a:hover::after{transform:scaleX(1)}nav a.on::after{display:none}
.b{transition:transform .25s,box-shadow .25s,opacity .25s}.b:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(255,255,255,.2);opacity:1}
.card,details,.feat>div{transition:transform .35s,border-color .35s,box-shadow .35s,background .35s}.card:hover,details:hover{transform:translateY(-6px);border-color:#555;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.card:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}.feat>div:hover{background:rgba(255,255,255,.05)}
.ic{transition:transform .35s,border-color .35s}.card:hover .ic,.feat>div:hover .ic{transform:scale(1.12) rotate(-6deg);border-color:rgba(255,255,255,.3)}
.shot .art{transition:transform .5s}.wk:hover .shot .art{transform:scale(1.18) rotate(-4deg)}
.more i{transition:transform .3s,background .3s,color .3s}.more:hover i{transform:translateX(4px);background:#fff;color:#000}
.lgi{display:block;transition:transform .3s}.brand:hover .lgi{transform:scale(1.05)}.so svg{transition:transform .3s}.so:hover svg{transform:rotate(-8deg) scale(1.1)}
.lang{display:flex;gap:2px;background:#161616;border:1px solid var(--ln);border-radius:99px;padding:3px;margin-inline-start:auto;margin-inline-end:14px}.lang button{background:none;border:0;color:var(--mu);font:600 .75rem Sora,Cairo;padding:6px 11px;border-radius:99px;cursor:pointer;transition:.25s}.lang button:hover{color:#fff}.lang button.on{background:#fff;color:#000}
[lang=ar] body,[lang=ar] input,[lang=ar] select,[lang=ar] textarea,[lang=ar] button{font-family:Cairo,Sora,sans-serif}[dir=rtl] .more i{transform:scaleX(-1)}[dir=rtl] .more:hover i{transform:scaleX(-1) translateX(4px)}[dir=rtl] .more{padding:6px 22px 6px 6px}
@media(prefers-reduced-motion:reduce){main,body::before{animation:none!important}}
#bg{position:fixed;inset:0;z-index:-1;pointer-events:none}.hero,.cta{background-color:transparent}.artw{opacity:.0}
.rvj .rv{opacity:0;transform:perspective(900px) translateY(50px) translateZ(-160px) rotateX(26deg);transition:opacity .8s var(--d,0s),transform .8s var(--d,0s)}.rvj .rv.in{opacity:1;transform:none}
.b,.more{transition:transform .25s,box-shadow .25s,opacity .25s,border-color .25s,translate .3s cubic-bezier(.2,.7,.2,1)}
.demo{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}.dg{display:grid;gap:10px;background:rgba(20,20,20,.85);border:1px solid var(--ln);border-radius:22px;padding:30px;align-content:center}.dg i{aspect-ratio:1;border-radius:50%;background:#fff;opacity:.3;cursor:pointer}.dr{background:rgba(20,20,20,.85);border:1px solid var(--ln);border-radius:22px;display:grid;place-items:center;min-height:220px;overflow:hidden}.dc{width:84px;height:84px;border-radius:50%;background:#fff;cursor:grab;touch-action:none;box-shadow:0 0 40px rgba(255,255,255,.25)}.dc:active{cursor:grabbing}
@media(max-width:860px){.demo{grid-template-columns:1fr}}
@media(max-width:860px){
html{overflow-x:hidden}body{font-size:14px}.w{padding:0 14px}.nav{height:60px;gap:8px}nav{top:60px}.lgi{height:24px;width:auto}.lang{margin-inline-end:0}.lang button{padding:5px 8px;font-size:.7rem}#mb{padding:8px 12px;font-size:.78rem}
.sec{padding:32px 14px}.hd{margin-bottom:20px}.hd p{font-size:.8rem}h2{font-size:1.35rem}h1{font-size:1.8rem}
.hero{padding:34px 14px 26px;grid-template-columns:1fr}.hero p{font-size:.85rem}.artw{display:none}.lead{margin:22px 0 12px}.b{padding:11px 20px;font-size:.8rem}
.cards,.feat,.steps{grid-template-columns:repeat(3,1fr)!important;gap:8px}.feat{gap:0}.cards:has(>.card:nth-child(2):last-child){grid-template-columns:1fr 1fr!important}
.cards>.card:last-child:nth-child(3n+1),.steps>.card:last-child:nth-child(3n+1){grid-column:1/-1}
.card{padding:14px 9px;border-radius:14px}.card p,.feat p{font-size:.66rem;line-height:1.45}.card h3,.feat h3{font-size:.76rem;line-height:1.3}
.ic{width:38px;height:38px;border-width:3px;margin-bottom:8px}.ic svg{width:16px;height:16px}
.feat>div{padding:16px 8px;border-inline-start:1px solid var(--ln)!important;border-bottom:1px solid var(--ln)!important}.feat>div:nth-child(3n+1){border-inline-start:0!important}.feat>div:nth-last-child(-n+3){border-bottom:0!important}
.more{padding:3px 3px 3px 10px;font-size:.62rem;gap:6px;margin-top:2px}.more i{width:20px;height:20px}.wk .more{white-space:normal;text-align:start}
.shot{height:64px;margin-bottom:8px;border-radius:9px}.shot .art{height:40px}.mt{font-size:.6rem;margin-bottom:6px}
.steps b{font-size:1.2rem}.steps .card{text-align:center}
.faq{grid-template-columns:1fr!important;gap:8px}details{padding:12px 14px;border-radius:12px}summary{font-size:.8rem}
.demo{grid-template-columns:1fr;gap:10px}.dg{gap:5px;padding:14px;border-radius:14px}.dr{min-height:120px;border-radius:14px}.dc{width:54px;height:54px}
.cta{padding:34px 14px 0;border-radius:18px}.cta p{font-size:.8rem}
footer{padding:30px 0 16px}.fc{grid-template-columns:1fr 1fr!important;gap:16px;padding:22px 0}.fc a{font-size:.8rem}.so{width:36px;height:36px}.ft{gap:12px;padding-bottom:20px}
}
main .feat{background:rgba(255,255,255,.055);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.08);border-radius:16px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@media(max-width:860px){
.card,.feat>div{display:flex;flex-direction:column;align-items:center}.card>.more,.feat>div>.more{margin-top:auto}.wk{align-items:flex-start}.wk .shot{align-self:stretch}
.card p,.feat p,.hd p,.cards:has(>.card:nth-child(2):last-child) .card p{display:none}.cards:has(>.card:nth-child(2):last-child) .card p{display:block;font-size:.78rem;word-break:break-all}
.card h3,.feat h3{font-size:.92rem;line-height:1.3;margin-bottom:10px}.mt{font-size:.72rem;margin-bottom:12px}
.more{font-size:.74rem;white-space:nowrap;padding:3px 3px 3px 12px;gap:8px}.more i{width:26px;height:26px}
.wk .more{padding:3px;margin-top:auto}.wk .more span{display:none}.wk .more i{width:34px;height:34px}
.cards,.feat,.steps{grid-template-columns:repeat(3,minmax(0,1fr))!important}.cards:has(>.card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}.more{font-size:.68rem;padding:3px 3px 3px 9px;gap:5px}.more i{width:22px;height:22px}.wk .more i{width:34px;height:34px}.card h3,.feat h3{overflow-wrap:break-word;font-size:.8rem}
.shot{height:70px}.ic{width:44px;height:44px}.ic svg{width:18px;height:18px}.steps .card{padding:16px 8px}
.hero p{font-size:.92rem}h1{font-size:1.9rem}h2{font-size:1.45rem}summary{font-size:.88rem}
}
.hero{background:none}h1,h2{text-shadow:0 1px 0 #555,0 2px 0 #444,0 3px 0 #333,0 4px 0 #252525,0 9px 16px rgba(0,0,0,.7)}.card,.feat>div{transform-style:preserve-3d}.ic{transform:translateZ(34px)}.card h3,.feat h3{transform:translateZ(22px)}.card:hover .ic,.feat>div:hover .ic{transform:translateZ(46px) scale(1.12) rotate(-6deg)}
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}@media(max-width:860px){#bg3d{opacity:.55}}
header,footer{transition:opacity 1s}main{transition:opacity 1s,transform .25s}.intro header,.intro main,.intro footer{opacity:0!important;pointer-events:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* ===== READABILITY PASS (brand kept: dark + chrome) ===== */
:root{--mu:#c3c7ce;--chrome:linear-gradient(180deg,#ffffff 0%,#d7dbe2 45%,#9aa1ac 100%)}
/* accent words: brushed-chrome like the 3D logo, instead of dim grey */
h1 span,h2 span{background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.65)) drop-shadow(0 0 14px rgba(0,0,0,.85))}
h1,h2{text-shadow:0 1px 0 #555,0 2px 0 #444,0 3px 0 #333,0 4px 0 #252525,0 0 22px rgba(0,0,0,.95),0 9px 18px rgba(0,0,0,.8)}
p,summary,.mt,.fc a,.cp{text-shadow:0 1px 10px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7)}
.steps b{color:#aab0ba}
/* frosted ink plate behind any text that floats over the 3D scene */
.hero>div:first-child,.hd,.c.wide{position:relative;isolation:isolate}
.hd{margin-inline:auto}
/* section text under cards/faq/forms: make sure inputs & placeholders are visible */
::placeholder{color:#9ea3ad;opacity:1}
input,select,textarea{background:rgba(22,22,24,.92);border-color:#3a3a3e}
details{background:rgba(20,20,22,.9)}
.lang button{color:#b4b8c0}
.mt{color:#b4b8c0}
@media(max-width:860px){.card p,.feat p{text-shadow:none}.feat{background:rgba(13,13,14,.9)}}

/* ===== INTRO v2: bars fly in from far, wordmark rises, doors open ===== */
html.bi-lock,html.bi-lock body{overflow:hidden;height:100%}
#bi{position:fixed;inset:0;z-index:1000;overflow:hidden;color:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#bi .dr{position:absolute;top:0;bottom:0;width:50.5%;background:#0a0a0c;transition:transform 1.05s cubic-bezier(.77,0,.18,1)}
#bi .dr::after{content:"";position:absolute;inset:0;background:radial-gradient(#1d1d22 1px,transparent 1px) 0 0/20px 20px}
#bi .dr.l{left:0}#bi .dr.r{right:0}
#bi .dr.l::before,#bi .dr.r::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(transparent,#fff,transparent);opacity:.7;z-index:1}
#bi .dr.l::before{right:0}#bi .dr.r::before{left:0}
#bi.go .dr.l{transform:translateX(-101%)}#bi.go .dr.r{transform:translateX(101%)}
#bi canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s}
#bi .ct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,3.6vh,30px);perspective:700px;transition:transform 1s cubic-bezier(.6,0,.9,.4),opacity .7s .1s,filter .7s}
#bi.go .ct{transform:scale(2.4);opacity:0;filter:blur(6px)}
#bi.go canvas{opacity:0}
#bi .mk{position:relative;width:clamp(120px,36vw,190px);aspect-ratio:28/30;transform-style:preserve-3d}
#bi .mk svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transform:translate3d(var(--fx),var(--fy),-2600px) rotateY(var(--ry)) rotateX(var(--rx))}
#bi .mk svg path{fill:url(#biG);stroke:rgba(255,255,255,.9);stroke-width:.35;stroke-linejoin:round}
#bi .mk svg:nth-child(1){--fx:-140px;--fy:-90px;--ry:200deg;--rx:80deg;transform-origin:18% 53%}
#bi .mk svg:nth-child(2){--fx:60px;--fy:120px;--ry:-220deg;--rx:-70deg;transform-origin:59% 53%}
#bi .mk svg:nth-child(3){--fx:150px;--fy:-60px;--ry:180deg;--rx:60deg;transform-origin:91% 50%}
#bi.run .mk svg{animation:biFly 1.5s cubic-bezier(.16,.82,.25,1) forwards}
#bi.run .mk svg:nth-child(2){animation-delay:.2s}#bi.run .mk svg:nth-child(3){animation-delay:.4s}
@keyframes biFly{0%{opacity:0;filter:blur(14px)}35%{opacity:1;filter:blur(3px)}100%{opacity:1;filter:blur(0);transform:translate3d(0,0,0) rotateY(0) rotateX(0)}}
#bi .mk::after{content:"";position:absolute;left:50%;top:50%;width:200%;height:200%;margin:-100%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 55%);opacity:0;pointer-events:none}
#bi.run .mk::after{animation:biPulse .9s 1.65s ease-out forwards}
@keyframes biPulse{0%{opacity:0;transform:scale(.3)}30%{opacity:.9}100%{opacity:0;transform:scale(1)}}
#bi .wm2{overflow:hidden;padding:2px 6px;width:clamp(220px,68vw,420px)}
#bi .wm2 img{display:block;width:100%;height:auto;transform:translateY(125%);opacity:0}
#bi.run .wm2 img{animation:biRise 1s 1.9s cubic-bezier(.2,.9,.15,1) forwards}
@keyframes biRise{0%{transform:translateY(125%);opacity:1}100%{transform:none;opacity:1}}
#bi .wm2{position:relative}
#bi .wm2::after{content:"";position:absolute;top:0;bottom:0;width:28%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent)}
#bi.run .wm2::after{animation:biShine .9s 2.75s ease-in-out forwards}@keyframes biShine{to{left:120%}}
#bi .sk{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom,0px));text-align:center;font:600 11px/1 Sora,system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#6f747d;opacity:0;pointer-events:none}
#bi.run .sk{animation:biUp .8s .8s ease-out forwards}@keyframes biUp{to{opacity:1}}
#bi.go .sk{opacity:0!important;animation:none!important}
#bi.off{display:none}
@media(prefers-reduced-motion:reduce){#bi{display:none}}

/* ===== ARCHITECTURAL TEXT FRAMES (hero, section headings, CTA; 3D scene stays visible) ===== */
.hero>div:first-child,.hd,.c.wide,.cta{
  --fr:rgba(205,210,220,.28);--fb:#e9ecf1;--bl:46px;--bo:-8px;--r:28px 28px 14px 14px;--r2:36px 36px 22px 22px;
  position:relative;isolation:isolate;
  width:fit-content;max-width:100%;
  padding:clamp(28px,3.2vw,46px) clamp(30px,3.8vw,58px);
  border:0;border-radius:var(--r);box-shadow:none;overflow:visible;
  background:rgba(8,8,10,.26);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.hero>div:first-child{justify-self:start;background:rgba(8,8,10,.5)}
.hd,.c.wide{margin-inline:auto}
.cta{margin-inline:auto;width:100%;padding:clamp(34px,4.4vw,60px) clamp(22px,3vw,44px) 0}
.hd p:empty{display:none}
/* hairline frame */
.hero>div:first-child::after,.hd::after,.c.wide::after,.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid var(--fr);border-radius:var(--r);
}
/* corner brackets, set slightly outside the hairline */
.hero>div:first-child::before,.hd::before,.c.wide::before,.cta::before{
  content:"";position:absolute;inset:var(--bo);z-index:-1;pointer-events:none;
  border:1.5px solid var(--fb);border-radius:var(--r2);
  -webkit-mask:linear-gradient(#000 0 0) left top/var(--bl) var(--bl) no-repeat,linear-gradient(#000 0 0) right top/var(--bl) var(--bl) no-repeat,linear-gradient(#000 0 0) left bottom/var(--bl) var(--bl) no-repeat,linear-gradient(#000 0 0) right bottom/var(--bl) var(--bl) no-repeat;
  mask:linear-gradient(#000 0 0) left top/var(--bl) var(--bl) no-repeat,linear-gradient(#000 0 0) right top/var(--bl) var(--bl) no-repeat,linear-gradient(#000 0 0) left bottom/var(--bl) var(--bl) no-repeat,linear-gradient(#000 0 0) right bottom/var(--bl) var(--bl) no-repeat;
  transition:inset .9s cubic-bezier(.2,.8,.2,1),opacity .9s;
}
/* brackets "lock on" as a frame enters view (class added by main.js) */
.fr-pre::before{inset:6px;opacity:0}.fr-pre::after{opacity:0}
.hero>div:first-child::after,.hd::after,.c.wide::after,.cta::after{transition:opacity .9s .15s}
/* frames sit in the same perspective as the 3D scene (vars set by main.js) */
.fr3d:not(.rv){transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);will-change:transform}
/* clean typography: restrained shadow only */
h1,h2{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
h1 span,h2 span{filter:none;text-shadow:none}
p,summary,.mt{text-shadow:none}
.hero p,.hd p,.c.wide p,.cta p{color:#c9ccd2}
.hero p.lead{color:#fff}
.hd>p:last-child{margin-bottom:0}.hd h2:has(+p:empty){margin-bottom:0}
@media(max-width:860px){
  .hero>div:first-child,.hd,.c.wide,.cta{--bl:34px;--bo:-6px;--r:20px 20px 10px 10px;--r2:26px 26px 16px 16px;padding:22px 20px;background:rgba(8,8,10,.4)}
  .hero>div:first-child{background:rgba(8,8,10,.6)}
  .hero>div:first-child{width:100%}
  .cta{padding:26px 16px 0}
  .hd h2{margin-bottom:0}
  .hd{max-width:calc(100% - 12px)}
}
@media(prefers-reduced-motion:reduce){.hero>div:first-child::before,.hd::before,.c.wide::before,.cta::before,.hero>div:first-child::after,.hd::after,.c.wide::after,.cta::after{transition:none}}
/* corner highlight arcs removed; hairline frame only */
.hero>div:first-child::before,.hd::before,.c.wide::before,.cta::before{display:none!important}

/* Built to Respond: real 3D orbit is drawn by bg3d.js into this rect; the panel itself stays transparent */
.demo,.demo:has(.orb){display:block}
.orb{position:relative;height:clamp(300px,42vw,430px);background:none;border:0;touch-action:pan-y}
.orl{position:absolute;left:50%;bottom:6px;width:min(440px,72%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#c9ced6 25%,#c9ced6 75%,transparent);opacity:.7}
.orl::before,.orl::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:#c9ced6;opacity:.8}
.orl::before{left:25%}.orl::after{right:25%}
.orl i{position:absolute;left:50%;top:-10px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#e6e9ee;animation:orp 2.6s ease-in-out infinite}
@keyframes orp{0%,100%{opacity:.3}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.orl i{animation:none}}
@media (max-width:860px){.orb{height:clamp(240px,70vw,320px)}}
/* footer socials: icons always in one row */
.fs{flex-wrap:nowrap}
.fs .so{flex:0 0 auto}
@media (max-width:600px){.fs{flex-wrap:wrap;justify-content:center;row-gap:10px}.fs span{flex:0 0 100%;margin:0;text-align:center}.fs .so{margin:0 3px}}
#bg3d.orbfx{opacity:1!important}
/* logo stage is wide and short */
.orb{height:clamp(200px,24vw,290px)}
@media (max-width:860px){.orb{height:clamp(150px,44vw,220px)}}


/* ===== THEME: Joey dark mode (pure black, white type, neutral grays, charcoal pills). Skin only: delete this block (and the @import on line 1) to revert. ===== */
:root{--bg:#050505;--cd:#0b0b0b;--ln:#1a1a1a;--tx:#fff;--mu:#a3a3a3;--chrome:#fff;--pill:#161616;--pill2:#262626}
html{scrollbar-color:#2a2a2a #050505}
body{font-family:'Inter Tight',Inter,Sora,system-ui,sans-serif;background:var(--bg)}
::selection{background:#fff;color:#000}:focus-visible{outline-color:#fff}
h1,h2{font-weight:700;color:#fff;text-shadow:none;letter-spacing:-.04em;overflow-wrap:break-word}
h1{font-size:clamp(2.3rem,6.2vw,5.4rem);line-height:.98}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.035em}
h3{font-weight:600;letter-spacing:-.015em}
h1 span,h2 span{background:none;-webkit-text-fill-color:#fff;color:#fff;filter:none;text-shadow:none}
p,.feat p,.card p{color:var(--mu)}
.hero p,.hd p,.c.wide p,.cta p{color:#b0b0b0}.hero p.lead{color:#fff}
.mt{color:#8c8c8c}.steps b{color:#5a5a5a}
header{background:rgba(5,5,5,.72);border-bottom-color:#111}
@media(min-width:861px){nav{background:var(--pill);border-radius:99px;padding:4px;gap:2px}}
nav a{color:#a3a3a3}nav a:hover{background:#1c1c1c;color:#fff}nav a.on{background:var(--pill2);color:#fff}
#mb{background:var(--pill)}
.lang{background:var(--pill);border-color:transparent}.lang button{color:#8c8c8c}.lang button:hover{color:#fff}.lang button.on{background:#2a2a2a;color:#fff}
.b{background:var(--pill);color:#fff;font-family:'Inter Tight',Inter,sans-serif;font-weight:500;box-shadow:inset 0 0 0 1px var(--pill2)}
.b:hover{background:#242424;box-shadow:inset 0 0 0 1px #3a3a3a,0 10px 26px rgba(255,255,255,.08)}
.b.g{background:transparent;box-shadow:inset 0 0 0 1px var(--pill2)}.b.g:hover{background:#161616;box-shadow:inset 0 0 0 1px #444}
.hero>div:first-child,.hd,.c.wide,.cta{--fr:transparent}
.hero>div:first-child{background:rgba(6,6,6,.8)}.hd,.c.wide{background:rgba(6,6,6,.74)}.cta{background:rgba(6,6,6,.9)}
.card{background:var(--cd);border:1px solid var(--ln);border-radius:20px;box-shadow:none}
.card::before,.feat>div::before{display:none}.card::after{-webkit-backdrop-filter:none;backdrop-filter:none}
.card:hover{border-color:#2c2c2c;background:#101010}details:hover{border-color:#2c2c2c}
.card.wk{background:var(--cd);border-color:var(--ln)}.card.wk:hover{background:#101010;border-color:#2c2c2c}
main .feat{background:var(--cd);box-shadow:inset 0 0 0 1px var(--ln);border-radius:20px;-webkit-backdrop-filter:none;backdrop-filter:none}
.feat>div{border-color:var(--ln)}.feat>div:hover{background:#0c0c0c}
.ic{background:#0f0f0f;border-color:#1b1b1b;color:#fff}.card:hover .ic,.feat>div:hover .ic{border-color:#3a3a3a}
.more{border-color:var(--pill2);background:transparent}.more:hover{border-color:#555;background:#141414}.more i{background:#1a1a1a;color:#fff}.more:hover i{background:#fff;color:#000}
.wk .shot{background:#161616;border-radius:18px}
.cards>.wk:nth-child(4n+1) .shot{background:linear-gradient(135deg,#9b5cff,#6a2fe0)}
.cards>.wk:nth-child(4n+2) .shot{background:#c5f542}
.cards>.wk:nth-child(4n+3) .shot{background:linear-gradient(135deg,#3b82ff,#2456e8)}
.cards>.wk:nth-child(4n+4) .shot{background:linear-gradient(135deg,#ff8a3d,#f26a1b)}
.wk .shot .art{opacity:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}
details{background:#0a0a0a;border-color:var(--ln)}summary::after{color:#fff}
input,select,textarea{background:#0b0b0b;border-color:#1f1f1f}input:focus,select:focus,textarea:focus{border-color:#555}::placeholder{color:#6f6f6f}
.wm{background:linear-gradient(#fff,#222 85%);-webkit-background-clip:text;background-clip:text}
footer{border-top-color:#111}.ft{border-bottom-color:#111}.cp{border-top-color:#111;color:#6f6f6f}.fc a{color:#8c8c8c}.fc a:hover{color:#fff}
.so{background:#111;border-color:#1c1c1c}.so:hover{background:#fff;color:#000}

/* ===== ICONS: thin white outline set (24px grid, 1.5 stroke, round caps/joins). Icon styling only: delete this block to revert the arrow/toggle sizing. ===== */
.more i svg{width:14px;height:14px;display:block}
@media(max-width:860px){.more i svg{width:12px;height:12px}.wk .more i svg{width:14px;height:14px}.ic svg{stroke-width:1.9}}
summary::after{content:"";flex:none;align-self:center;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
details[open] summary::after{content:"";-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== STEP CARD IMAGES ("How We Work"): faint photo behind the text. Files: assets/steps/step-1..4 (.jpg/.png/.webp). No file = card looks as before. --ov = darkness over the image (higher = fainter). ===== */
.steps .card{--ov:.8;background-color:var(--cd);background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.steps .card:nth-child(n),.steps .card:nth-child(n):hover{background-image:linear-gradient(rgba(8,8,8,var(--ov)),rgba(8,8,8,var(--ov))),var(--s1),var(--s2),var(--s3);background-color:var(--cd);background-size:cover;background-position:center;background-repeat:no-repeat}
.steps .card:nth-child(1){--s1:url(../assets/steps/step-1.jpg);--s2:url(../assets/steps/step-1.png);--s3:url(../assets/steps/step-1.webp)}
.steps .card:nth-child(2){--s1:url(../assets/steps/step-2.jpg);--s2:url(../assets/steps/step-2.png);--s3:url(../assets/steps/step-2.webp)}
.steps .card:nth-child(3){--s1:url(../assets/steps/step-3.jpg);--s2:url(../assets/steps/step-3.png);--s3:url(../assets/steps/step-3.webp)}
.steps .card:nth-child(4){--s1:url(../assets/steps/step-4.jpg);--s2:url(../assets/steps/step-4.png);--s3:url(../assets/steps/step-4.webp)}
.steps .card:hover{--ov:.72}
/* keep text crisp above the photo */
.steps .card b{color:#9a9a9a}.steps .card b,.steps .card h3,.steps .card p{text-shadow:0 1px 8px rgba(0,0,0,.85)}.steps .card h3{color:#fff}.steps .card p{color:#cfcfcf}

/* ===== SERVICE CARD IMAGES ("Our Services", Home + Services pages): faint photo behind the text. Files: assets/services/service-1..4 (.jpg/.png/.webp). No file = card looks as before. --ov = darkness over the image (higher = fainter). ===== */
.card.svc{--ov:.8;overflow:hidden}
.card.svc:nth-child(n),.card.svc:nth-child(n):hover{background-image:linear-gradient(rgba(8,8,8,var(--ov)),rgba(8,8,8,var(--ov))),var(--s1),var(--s2),var(--s3);background-color:var(--cd);background-size:cover;background-position:center;background-repeat:no-repeat}
.card.svc:nth-child(1){--s1:url(../assets/services/service-1.jpg);--s2:url(../assets/services/service-1.png);--s3:url(../assets/services/service-1.webp)}
.card.svc:nth-child(2){--s1:url(../assets/services/service-2.jpg);--s2:url(../assets/services/service-2.png);--s3:url(../assets/services/service-2.webp)}
.card.svc:nth-child(3){--s1:url(../assets/services/service-3.jpg);--s2:url(../assets/services/service-3.png);--s3:url(../assets/services/service-3.webp)}
.card.svc:nth-child(4){--s1:url(../assets/services/service-4.jpg);--s2:url(../assets/services/service-4.png);--s3:url(../assets/services/service-4.webp)}
.card.svc:hover{--ov:.72}
.card.svc h3,.card.svc p{text-shadow:0 1px 8px rgba(0,0,0,.85)}.card.svc h3{color:#fff}.card.svc p{color:#cfcfcf}

/* ===== Hero headline line reveal (js/hero-lines.js) ===== */
.hero h1.hl-pre{visibility:hidden}
.hero h1>span{overflow-clip-margin:.18em}
/* Arabic: taller line box so stacked lines (dots, tails, marks) never collide */
[lang=ar] h1{line-height:1.4;letter-spacing:0}
[lang=ar] .hero h1>span{overflow-clip-margin:.3em}

/* ===== Value cards with photo backgrounds (About > Values) =====
   Drop images in assets/values/ as value-1.jpg, value-2.jpg, value-3.jpg (.png/.webp also work).
   --ov = darkness over the photo: 0.80 faint, 0.65 more visible, 0.90 barely there. */
.feat.pic{overflow:visible}
.feat.pic>div{--ov:.7;background-color:var(--cd);background-image:linear-gradient(rgba(8,8,8,var(--ov)),rgba(8,8,8,var(--ov))),var(--s1),var(--s2),var(--s3);background-size:cover;background-position:center;background-repeat:no-repeat;transition:transform .35s,border-color .35s,box-shadow .35s,background-color .35s}
.feat.pic>div::before{display:none}
.feat.pic>div:hover{--ov:.6;background-color:var(--cd)}
.feat.pic>div:first-child{border-start-start-radius:16px;border-end-start-radius:16px}
.feat.pic>div:last-child{border-start-end-radius:16px;border-end-end-radius:16px}
.feat.pic>div:nth-child(1){--s1:url(../assets/values/value-1.jpg);--s2:url(../assets/values/value-1.png);--s3:url(../assets/values/value-1.webp)}
.feat.pic>div:nth-child(2){--s1:url(../assets/values/value-2.jpg);--s2:url(../assets/values/value-2.png);--s3:url(../assets/values/value-2.webp)}
.feat.pic>div:nth-child(3){--s1:url(../assets/values/value-3.jpg);--s2:url(../assets/values/value-3.png);--s3:url(../assets/values/value-3.webp)}
.feat.pic h3,.feat.pic p{text-shadow:0 1px 8px rgba(0,0,0,.85)}.feat.pic h3{color:#fff}.feat.pic p{color:#d6d6d6}

/* ===== Footer: solid themed background so text is always readable over the 3D scene ===== */
footer{position:relative;background:linear-gradient(180deg,#121214 0%,#0b0b0c 100%);border-top:1px solid #26262a;box-shadow:0 -1px 0 rgba(255,255,255,.04) inset}

/* ===== Footer: compact on phones ===== */
@media (max-width:600px){
  footer{padding:20px 0 10px;margin-top:20px}
  .ft{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:10px;padding-bottom:14px}
  .ft .lgi{height:20px}
  .fs{flex-wrap:nowrap;justify-content:flex-end;gap:0}
  .fs span{display:none}
  .fs .so,.so{width:30px;height:30px;margin:0 0 0 6px}
  [dir=rtl] .fs .so{margin:0 6px 0 0}
  .so svg{width:15px;height:15px}
  .fc{gap:14px 12px;padding:16px 0 12px}
  .fc h4{font-size:.7rem;letter-spacing:.06em;margin:0 0 6px;color:#fff}
  .fc a{font-size:.72rem;padding:2px 0;line-height:1.5;word-break:normal;overflow-wrap:anywhere}
  .cp{font-size:.66rem;gap:2px 10px;padding-top:10px;line-height:1.5}
}

/* ===== Contact channel cards: fitted email text + photo backgrounds =====
   Drop images in assets/contact/ as contact-1.jpg (Email) and contact-2.jpg (WhatsApp); .png/.webp also work.
   --ov = darkness over the photo: 0.80 faint, 0.65 more visible, 0.90 barely there. */
.cards.ch .card p{word-break:normal!important;overflow-wrap:anywhere;font-size:clamp(.6rem,2.7vw,.95rem)!important;line-height:1.5}
.card.pic{--ov:.75;overflow:hidden}
.card.pic:nth-child(n),.card.pic:nth-child(n):hover{background-image:linear-gradient(rgba(8,8,8,var(--ov)),rgba(8,8,8,var(--ov))),var(--s1),var(--s2),var(--s3);background-color:var(--cd);background-size:cover;background-position:center;background-repeat:no-repeat}
.card.pic:nth-child(1){--s1:url(../assets/contact/contact-1.jpg);--s2:url(../assets/contact/contact-1.png);--s3:url(../assets/contact/contact-1.webp)}
.card.pic:nth-child(2){--s1:url(../assets/contact/contact-2.jpg);--s2:url(../assets/contact/contact-2.png);--s3:url(../assets/contact/contact-2.webp)}
.card.pic:hover{--ov:.62}
.card.pic h3,.card.pic p{text-shadow:0 1px 8px rgba(0,0,0,.85)}.card.pic h3{color:#fff}.card.pic p{color:#d6d6d6}