:root{--ink:#050505;--carbon:#0B0D0F;--graphite:#15181B;--metal:#A7ACB1;--accent:#FF2D7B;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{direction:rtl}
body{direction:rtl;text-align:right;background:var(--ink);color:#fff;font-family:Questv1,"IBM Plex Sans Arabic",Inter,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
@media(max-width:800px){.wrap{padding:0 20px}header .logo{width:96px !important}}
.logo{height:auto;object-fit:contain}
.mark{width:42px;height:auto;object-fit:contain}
.brand-bar{height:3px;width:100%;background:linear-gradient(90deg,#FF2D7B 0 16%,#2EC4C6 16% 32%,#F5D000 32% 48%,#FF8A2B 48% 64%,#C44DFF 64% 80%,#2EC4C6 80% 100%);opacity:.9}
.pre-mark{width:56px;margin-bottom:18px}
header{position:fixed;top:0;inset-inline:0;z-index:50;transition:background .5s var(--ease),border-color .5s var(--ease),backdrop-filter .5s}
header.on{background:rgba(0,0,0,.55);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.1)}
.navrow{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.links{display:flex;gap:32px}
.links a{font-size:13px;color:rgba(255,255,255,.72);position:relative}
.links a:after{content:"";position:absolute;right:0;bottom:-6px;width:0;height:1px;background:#fff;transition:width .5s var(--ease)}
.links a:hover{color:#fff}
.links a:hover:after{width:100%}
.nav-actions{display:flex;align-items:center;gap:12px}
.cta-out{border:1px solid rgba(255,255,255,.3);padding:8px 16px;font-size:13px;display:inline-flex;gap:8px;align-items:center}
.cta-out:hover{border-color:#fff}
.burger{display:none;width:40px;height:40px;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}
.burger i{display:block;height:1px;background:#fff}
.burger i:first-child{width:24px}.burger i:last-child{width:16px}
.mnav{display:none;background:rgba(5,5,5,.96);border-top:1px solid rgba(255,255,255,.1);padding:28px 24px}
.mnav a,.mnav button{display:block;font-size:22px;margin:14px 0}
@media(max-width:980px){.links{display:none}.burger{display:flex}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-size:14px;font-weight:500;transition:transform .5s var(--ease),background .4s,border-color .4s}
.solid{background:#fff;color:#050505}
.ghost{border:1px solid rgba(255,255,255,.28)}
.ghost:hover{border-color:#fff;background:rgba(255,255,255,.04)}
.btn.full{width:100%;justify-content:center;margin-top:12px}
.mt{margin-top:28px}
#pre{position:fixed;inset:0;z-index:90;background:#050505;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1.1s var(--ease)}
#pre.go{transform:translateY(-110%)}
#pre .tag{margin-top:24px;font-size:12px;letter-spacing:.18em;color:rgba(255,255,255,.55)}
.load{position:absolute;bottom:40px;width:min(420px,70vw)}
.load .row{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.4);margin-bottom:12px;direction:ltr}
.bar{height:1px;background:rgba(255,255,255,.1)}
.bar>i{display:block;height:100%;background:#fff;width:0;margin-right:auto}
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;transform:scale(1.04)}
.veil{position:absolute;inset:0;background:linear-gradient(to left,rgba(0,0,0,.58),rgba(0,0,0,.18) 58%,rgba(0,0,0,.08)),linear-gradient(to top,rgba(0,0,0,.82) 0%,transparent 42%,rgba(0,0,0,.28) 100%)}
.hero-c{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:80px}
.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--accent);margin-bottom:14px}
.micro{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:22px}
h1{font-weight:500;line-height:1.12}
h1 .s{display:block;font-size:clamp(28px,4.6vw,56px);color:rgba(255,255,255,.8)}
h1 .b{display:block;font-size:clamp(40px,7.6vw,108px)}
.clip{overflow:hidden}
.lead{margin-top:28px;max-width:560px;font-size:16px;line-height:2;color:rgba(255,255,255,.7)}
.actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.tech{position:absolute;inset:0;pointer-events:none;z-index:2}
.tech span{position:absolute;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:12px}
.tech span:before{content:"";width:48px;height:1px;background:rgba(255,255,255,.3)}
.t1{top:28%;left:10%}.t2{top:46%;left:7%}.t3{bottom:28%;left:20%}.t4{top:34%;right:38%;left:auto}
.scroll-ind{position:absolute;bottom:24px;right:40px;z-index:3;font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:12px}
.vline{width:1px;height:40px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.vline i{position:absolute;inset-inline:0;height:50%;background:#fff;animation:drop 1.8s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
.statement{padding:28vh 20px;text-align:center;background:var(--ink)}
.statement h2{font-size:clamp(42px,9vw,128px);line-height:1.05;font-weight:500}
.statement p.sub{margin-top:40px;font-size:clamp(22px,4vw,48px);color:rgba(255,255,255,.7);font-weight:300}
.wm{letter-spacing:.4em;color:rgba(255,255,255,.28);font-size:11px;margin-bottom:40px}
.split{display:grid;grid-template-columns:1fr 1fr;min-height:90vh;background:var(--carbon)}
.split .pic,.pic.tall{position:relative;min-height:52vh;overflow:hidden}
.split .pic img,.pic.tall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .copy{padding:96px 56px;display:flex;flex-direction:column;justify-content:center}
.label{font-size:11px;letter-spacing:.22em;color:var(--accent);margin-bottom:20px}
h2.ed{font-size:clamp(28px,4vw,52px);line-height:1.2;font-weight:500;max-width:16ch}
.copy p.body,.body{margin-top:24px;color:rgba(255,255,255,.65);line-height:2;max-width:440px}
.body.muted{opacity:.7}
.feats{margin-top:40px;list-style:none}
.feats li{display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.08);padding:12px 0;font-size:15px}
.feats li:before{content:"";width:24px;height:1px;background:var(--accent)}
.services{padding:120px 0;background:var(--ink)}
.services h2{font-size:clamp(32px,5vw,72px);line-height:1.15;font-weight:500;max-width:14ch;margin-bottom:64px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{position:relative;height:58vh;min-height:380px;overflow:hidden}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card:hover img{transform:scale(1.04)}
.card .sh{position:absolute;inset:0;background:linear-gradient(to top,#000,rgba(0,0,0,.45) 45%,rgba(0,0,0,.12))}
.card .in{position:relative;z-index:2;height:100%;padding:40px;display:flex;flex-direction:column;justify-content:space-between}
.num{color:rgba(255,255,255,.4);letter-spacing:.2em;font-size:14px;direction:ltr}
.card h3{font-size:34px;font-weight:500}
.card p{margin-top:12px;max-width:360px;color:rgba(255,255,255,.7);line-height:1.8}
.arr{margin-top:20px;opacity:0;transform:translateX(8px);transition:.5s var(--ease);font-size:14px}
.card:hover .arr{opacity:1;transform:none}
.parts{padding:120px 0 0;background:var(--carbon);overflow:hidden}
.parts-g{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.track{margin-top:64px;display:flex;width:max-content;gap:12px;animation:slide 42s linear infinite}
.track img{height:220px;width:360px;object-fit:cover;opacity:.82}
@keyframes slide{to{transform:translateX(50%)}}
.scale{position:relative;min-height:100svh;overflow:hidden}
.scale>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scale .dim,.final .dim,.trust .dim{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.scale .in{position:relative;z-index:2;min-height:100svh;padding:120px 0;display:flex;flex-direction:column;justify-content:space-between}
.scale h2{font-size:clamp(40px,8vw,120px);font-weight:500;line-height:1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:80px}
.stats .n{font-size:clamp(36px,5vw,60px);font-weight:500;letter-spacing:-.04em}
.stats .n.sm{font-size:28px}
.stats p{margin-top:12px;color:rgba(255,255,255,.6)}
.process{padding:120px 0;background:var(--ink)}
.process h2{font-size:clamp(30px,4.5vw,64px);font-weight:500;margin-bottom:64px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
.steps:before{content:"";position:absolute;top:8px;right:0;left:0;height:1px;background:rgba(255,255,255,.1)}
.step{opacity:.4}
.step.on{opacity:1}
.dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2);margin-bottom:24px}
.step.on .dot{background:#fff}
.step .n{color:rgba(255,255,255,.35);letter-spacing:.18em;font-size:13px;direction:ltr}
.step .t{margin-top:8px;font-size:18px}
.trust{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.trust>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.trust h2{position:relative;z-index:2;width:100%;text-align:center;font-size:clamp(32px,6vw,92px);line-height:1.15;font-weight:500;max-width:16ch;margin:0 auto;padding:0 20px}
.why{padding:140px 0;background:var(--ink)}
.why h2{font-size:clamp(36px,6vw,88px);font-weight:500;margin-bottom:80px}
.why-g{display:grid;grid-template-columns:1fr 1fr;gap:64px 80px}
.why article{border-top:1px solid rgba(255,255,255,.1);padding-top:32px}
.why article .n{color:rgba(255,255,255,.3);font-size:14px;margin-bottom:16px;direction:ltr}
.why h3{font-size:30px;margin-bottom:16px;font-weight:500}
.why p{color:rgba(255,255,255,.6);line-height:2;max-width:420px}
.final{position:relative;min-height:92svh;overflow:hidden}
.final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% center}
.final .dim{background:linear-gradient(to left,rgba(0,0,0,.8),rgba(0,0,0,.4),rgba(0,0,0,.18))}
.final .in{position:relative;z-index:2;min-height:92svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:80px}
.final h2{font-size:clamp(36px,6.5vw,96px);line-height:1.1;font-weight:500;max-width:12ch}
.loc{display:grid;grid-template-columns:1fr 1fr;min-height:70vh;background:var(--carbon)}
.loc .pic{position:relative;min-height:42vh}
.loc .pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2);position:absolute;inset:0}
.loc .pic .d{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.pin{position:absolute;top:50%;right:50%;width:12px;height:12px;background:#fff;border-radius:50%;box-shadow:0 0 0 14px rgba(255,255,255,.15);transform:translate(50%,-50%)}
.loc .copy{padding:64px 56px;display:flex;flex-direction:column;justify-content:center}
footer{background:var(--ink);padding:80px 0 0;position:relative;overflow:hidden}
.fg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:48px}
footer nav a{display:block;color:rgba(255,255,255,.6);margin:8px 0}
footer nav a:hover{color:#fff}
.fcontact{color:rgba(255,255,255,.6);line-height:2}
.wordmark{letter-spacing:.28em;font-size:13px;color:rgba(255,255,255,.5)}
.motto{margin-top:12px}
.copyr{margin-top:64px;color:rgba(255,255,255,.3);font-size:14px}
.giant{pointer-events:none;user-select:none;margin-top:32px;font-size:22vw;line-height:.8;font-weight:500;color:rgba(255,255,255,.06);text-align:center}
#modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:16px}
#modal.show{display:flex}
#modal .back{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px)}
.sheet{position:relative;width:min(520px,100%);background:#0B0D0F;border:1px solid rgba(255,255,255,.1);padding:40px}
.sheet h3{font-size:28px;font-weight:500;margin:8px 0 24px}
.sheet input,.sheet select,.sheet textarea{width:100%;margin:8px 0;background:transparent;border:1px solid rgba(255,255,255,.14);color:#fff;padding:14px 16px;font-family:inherit;outline:none}
.sheet input:focus,.sheet select:focus,.sheet textarea:focus{border-color:rgba(201,184,150,.7)}
.sheet select{background:#0B0D0F}
.close{position:absolute;top:20px;left:20px;color:rgba(255,255,255,.5);font-size:14px}
.hero-logo{position:absolute;top:96px;right:40px;z-index:3;width:118px;opacity:.92}
.hero-loc{margin-top:28px;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.38)}
.scan{position:relative;height:140vh;background:#050505;overflow:hidden}
.scan-car{position:sticky;top:0;height:100vh;width:100%;object-fit:cover;object-position:center}
.scan-fade{position:absolute;inset:0;background:rgba(0,0,0,.15);pointer-events:none}
.scan-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.scan-lines .sl{stroke:rgba(255,255,255,.55);stroke-width:1;fill:none;stroke-dasharray:400;stroke-dashoffset:400}
.scan.on .sl{animation:draw 1.1s var(--ease) forwards}
.scan-labs span{position:absolute;font-size:12px;letter-spacing:.12em;color:rgba(255,255,255,.7);opacity:0}
.scan.on .scan-labs span{animation:fadein .7s var(--ease) forwards}
.scan.on .scan-labs span:nth-child(2){animation-delay:.12s}
.scan.on .scan-labs span:nth-child(3){animation-delay:.24s}
.scan.on .scan-labs span:nth-child(4){animation-delay:.36s}
.scan.on .scan-labs span:nth-child(5){animation-delay:.48s}
.scan-end{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,5vw,64px);font-weight:500;opacity:0;pointer-events:none}
.scan.end .scan-labs,.scan.end .scan-lines{opacity:0;transition:opacity .6s}
.scan.end .scan-end{opacity:1;transition:opacity .8s .2s}
.micro-ref{position:absolute;bottom:24px;left:40px;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.28)}
.light{background:#fff;color:#050505;display:grid;grid-template-columns:1.1fr .9fr;min-height:80vh}
.light .wrap{padding:80px 56px;display:flex;flex-direction:column;justify-content:center}
.mark-dark{width:52px;margin-bottom:28px}
.light-k{font-size:12px;letter-spacing:.2em;color:rgba(5,5,5,.4);margin-bottom:20px}
.light h2{font-size:clamp(32px,5vw,68px);line-height:1.1;font-weight:500}
.light p{margin-top:20px;color:rgba(5,5,5,.62);max-width:420px;line-height:2;font-weight:300}
.light-pic{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.reveal{opacity:0;transform:translateY(40px)}
.frame{position:absolute;inset:18px;pointer-events:none;z-index:4}
.frame .c{position:absolute;width:22px;height:22px;border-color:rgba(255,255,255,.45);border-style:solid}
.frame .tl{top:0;left:0;border-width:1px 0 0 1px}
.frame .tr{top:0;right:0;border-width:1px 1px 0 0}
.frame .bl{bottom:0;left:0;border-width:0 0 1px 1px}
.frame .br{bottom:0;right:0;border-width:0 1px 1px 0}
.hud{position:absolute;top:96px;left:40px;z-index:4;display:flex;flex-direction:column;gap:6px;font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.38);text-transform:uppercase}
#progress{position:fixed;top:0;right:0;width:2px;height:0;background:#fff;z-index:70;opacity:.55}
#cursor{position:fixed;width:40px;height:40px;border:1px solid rgba(255,255,255,.75);border-radius:50%;pointer-events:none;z-index:95;transform:translate(-50%,-50%);mix-blend-mode:difference;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.08em;transition:width .35s var(--ease),height .35s var(--ease),background .35s}
#cursor b{width:4px;height:4px;background:#fff;border-radius:50%}
#cursor.on-media{width:72px;height:72px}
#cursor.on-media:after{content:"عرض"}
body.has-cursor,#cursor.ready{ }
.era{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.era-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.era-dim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.2) 55%,rgba(0,0,0,.35))}
.era-in{position:relative;z-index:2;padding-bottom:10vh;padding-top:20vh}
.era-kicker{font-size:clamp(18px,2vw,28px);color:rgba(255,255,255,.7);margin:12px 0 8px}
.era-title{font-size:clamp(48px,10vw,140px);line-height:.92;font-weight:500;letter-spacing:-.03em}
@media(max-width:900px){
  .split,.parts-g,.cards,.why-g,.loc,.fg,.light{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr;gap:28px}
  .steps:before{display:none}
  .tech,.scroll-ind,.hud,.frame,#cursor,#progress{display:none}
  .split .copy,.loc .copy{padding:48px 20px}
  .card{height:70vw;min-height:320px}
  .track img{height:160px;width:260px}
}
@media(prefers-reduced-motion:reduce){
  .track{animation:none}
  .reveal{opacity:1;transform:none}
  .vline i{animation:none}
}