:root{--ink:#1D1D1F;--ink-2:#6E6E73;--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,Arial,sans-serif;--ar:"Tajawal","SF Arabic","Segoe UI",sans-serif;--accent:#0071E3}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{overflow-x:hidden}
body{font-family:var(--font);background:#0B0B0D;color:#fff;-webkit-font-smoothing:antialiased;letter-spacing:-0.02em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(18px,4vw,40px)}
.bar .mk{display:inline-flex;align-items:center;gap:10px;color:#fff;opacity:.9}
.bar .mk svg{height:26px;width:auto;aspect-ratio:1567/1102;fill:currentColor}
.doors{position:relative;display:flex;min-height:100vh;min-height:100svh}
.door{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,5vw,64px);overflow:hidden;isolation:isolate;transition:flex-grow .8s cubic-bezier(.2,.8,.2,1)}
.doors:hover .door{flex-grow:.8}.doors .door:hover{flex-grow:1.35}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55));pointer-events:none}
.door .bg{position:absolute;inset:0;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.8,.2,1),filter .8s}
.door:hover .bg{transform:scale(1.05)}
.g .bg{background:linear-gradient(160deg,#0A6FF4,#076BFB 45%,#0B5FE0)}
.g .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;image-rendering:pixelated;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.s .bg{background:radial-gradient(60% 50% at 70% 30%,rgba(0,113,227,.35),transparent 70%),radial-gradient(50% 45% at 25% 75%,rgba(122,90,248,.25),transparent 70%),linear-gradient(165deg,#0B1220,#141E36)}
.s .grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent);mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent)}
.s .nodes{position:absolute;inset:0;z-index:-1}
.s .nodes i{position:absolute;width:10px;height:10px;border-radius:50%;background:#64D2FF;box-shadow:0 0 0 6px rgba(100,210,255,.12);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.5);opacity:.6}}
.door small{font-size:13px;font-weight:600;letter-spacing:.18em!important;text-transform:uppercase;opacity:.8}
.door h2{font-size:clamp(48px,7.4vw,104px);font-weight:700;letter-spacing:-0.045em;line-height:1;margin:8px 0 14px}
.door p{font-size:clamp(16px,1.5vw,19px);max-width:34ch;opacity:.86;line-height:1.45}
.door .go{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:13px 22px;border-radius:999px;background:#fff;color:#0B0B0D;font-weight:600;font-size:16px;width:fit-content;transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .4s}
.door .go::after{content:"→";transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.door:hover .go{transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(0,0,0,.6)}.door:hover .go::after{transform:translateX(4px)}
.g .go{color:#0B5FE0}
.center{isolation:isolate;position:absolute;left:50%;top:clamp(84px,14vh,150px);transform:translateX(-50%);z-index:5;text-align:center;pointer-events:none;width:min(92vw,560px)}
.lstack{position:relative;display:grid;place-items:center;height:clamp(96px,14vw,150px);animation:float 6s ease-in-out infinite}
.lstack svg{grid-area:1/1;height:100%;width:auto;fill:#fff;filter:drop-shadow(0 12px 30px rgba(0,0,0,.35));transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.3,1.4,.5,1),filter .55s}
.lstack .lg-g{aspect-ratio:2555/1360}
.lstack .lg-s{aspect-ratio:2221/903;height:78%;opacity:0;transform:scale(.82) rotate(-4deg);filter:blur(8px) drop-shadow(0 12px 30px rgba(0,0,0,.35))}
body.on-s .lstack .lg-g{opacity:0;transform:scale(.82) rotate(4deg);filter:blur(8px)}
body.on-s .lstack .lg-s{opacity:1;transform:none;filter:drop-shadow(0 12px 30px rgba(0,0,0,.35))}
body.on-g .door.s,body.on-s .door.g{filter:saturate(.7) brightness(.72)}
.door{transition:flex-grow .8s cubic-bezier(.2,.8,.2,1),filter .6s}
@keyframes float{50%{transform:translateY(-6px)}}
.center::before{content:"";position:absolute;left:50%;top:44%;width:150%;height:180%;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(6,10,24,.72),rgba(6,10,24,.35) 55%,transparent);pointer-events:none}
.center p{margin-top:16px;font-size:clamp(15px,1.4vw,18px);opacity:.85}
.foot{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:14px;font-size:13px;color:rgba(255,255,255,.7)}
.foot a:hover{color:#fff}
.in{animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both}.in.d1{animation-delay:.12s}.in.d2{animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
/* language dropdown */
.lang-dd{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 9px;border:0;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font:inherit;font-size:13px;font-weight:600;color:#fff;cursor:pointer}
.lang-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang-btn .chev{width:14px;height:14px;transition:transform .35s}
.lang-dd.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;padding:6px;border-radius:16px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 24px 50px -20px rgba(0,0,0,.6);opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.3,1.3,.5,1)}
.lang-dd.open .lang-menu{opacity:1;transform:none;pointer-events:auto}
.lang-menu a{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:11px;font-size:15px}
.lang-menu a:hover{background:#F2F2F5}.lang-menu a small{font-size:11.5px;font-weight:600;color:var(--ink-2)}
.lang-menu a[aria-current="true"]{background:#EEF4FF}
.lang-menu a[lang="ar"] span{font-family:var(--ar)}
.foot-lang{display:none}
@media (max-width:760px){
  .doors{flex-direction:column;min-height:100svh}
  .doors:hover .door,.doors .door:hover{flex-grow:1}
  .door{min-height:0;flex:1 1 50%;padding:24px 22px}
  .door.g{justify-content:flex-start;padding-top:84px}
  .door.g::after{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%,rgba(0,0,0,.35))}
  .door.s{padding-bottom:60px}
  .door h2{font-size:clamp(40px,12vw,56px);margin:4px 0 8px}
  .door p{font-size:15px}
  .door .go{margin-top:14px;padding:11px 18px;font-size:15px}
  .center{top:50%;left:0;right:0;transform:translateY(-50%);width:auto;margin:0;padding:0;display:flex;justify-content:center}
  .center p{display:none}
  .lstack{height:96px}
  .center::before{width:330px;height:230px}
  .door p{text-shadow:0 2px 12px rgba(0,0,0,.55)}
  .foot{gap:12px;font-size:12px;padding:12px}
  body.on-g .door.g,body.on-s .door.s{flex-grow:1.25}
}
@media (max-width:760px) and (max-height:700px){.door p{display:none}.lstack{height:80px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.foot .about{opacity:.85}@media (max-width:700px){.foot .about{display:none}}