/* MKStudio home — pixel-faithful 1672-wide design. u(N) = N design pixels, scaled with the page width. */
body.home .bgfix{display:none}
body.home{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body.home>main{flex:1 0 auto;display:flex;flex-direction:column}
.stage{position:relative;width:100%;flex:1 0 auto;min-height:calc(100vw * 885 / 1672);container-type:inline-size;overflow:hidden;background:#070b1f;isolation:isolate}
.stage-in{--u:calc(100cqw / 1672);position:absolute;inset:0;direction:ltr}
.s-bg{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;z-index:0}
.s-shade{position:absolute;inset:0;z-index:1;
  background:
   radial-gradient(ellipse 40% 34% at 70% 87%,rgba(5,9,26,.78) 0,rgba(5,9,26,.5) 60%,rgba(5,9,26,0) 100%),
   linear-gradient(180deg,rgba(4,8,24,.5) 0,rgba(4,8,24,0) 13%),
   rgba(4,8,24,.2)}
.s-shade:before{content:"";position:absolute;inset:0 0 auto 0;height:78%;background:linear-gradient(90deg,rgba(4,8,24,.9) 0,rgba(4,8,24,.84) 28%,rgba(4,8,24,.62) 44%,rgba(4,8,24,.18) 58%,rgba(4,8,24,0) 68%);-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 80%,transparent 100%)}

/* robot + icon orbit (one art box so mobile can reuse the same percentages) */
.s-art{position:absolute;z-index:3;left:calc(925 * var(--u));top:calc(-24 * var(--u));width:calc(500 * var(--u));aspect-ratio:1142/1378;pointer-events:none}
.s-art .robot{display:block;width:100%;height:100%;animation:bob 7s ease-in-out infinite;will-change:transform;filter:drop-shadow(0 calc(14 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.45))}
@keyframes bob{50%{transform:translateY(-1.1%)}}
.s-orbit{position:absolute;left:-17%;top:21.5%;width:60%;aspect-ratio:3/2;pointer-events:none}
.o-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(-14deg)}
.o-ring ellipse{fill:none;stroke:#f7c948;stroke-width:1.6;opacity:.75;filter:drop-shadow(0 0 4px #ffb300)}
.o-ring .o2{stroke:#7fb2ff;stroke-width:1;opacity:.35}
.orb{position:absolute;left:0;top:0;display:block;pointer-events:auto;will-change:transform;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--a) 90%,transparent)) drop-shadow(0 0 3px color-mix(in srgb,var(--a) 70%,transparent)) drop-shadow(0 6px 8px rgba(0,0,0,.35))}
.orb img{display:block;width:100%;height:100%;border-radius:24%}

.orb[data-k=wood]{width:17%}.orb[data-k=macramea]{width:20.5%}.orb[data-k=sprite]{width:17%}.orb[data-k=editor]{width:22%}
.orb:hover{filter:brightness(1.15) drop-shadow(0 0 14px var(--a))}

/* text block */
.s-copy{display:contents}
.h-title{position:absolute;z-index:4;left:calc(150 * var(--u));top:calc(80 * var(--u));width:calc(600 * var(--u));text-align:center;font-family:'Lalezar','Cairo',sans-serif;font-weight:900;line-height:1}
.h-title span{display:block}
.h-title b{position:relative;display:block;font-weight:900;white-space:nowrap;padding:0 .04em}
.ar .t1{font-size:calc(92 * var(--u));line-height:calc(88 * var(--u))}.ar .t2{font-size:calc(80 * var(--u));line-height:calc(88 * var(--u))}
.en .t1,.en .t2{font-family:'Space Grotesk','Cairo',sans-serif;font-weight:700;letter-spacing:-.01em}
.en .t1{font-size:calc(70 * var(--u));line-height:calc(88 * var(--u))}.en .t2{font-size:calc(46 * var(--u));line-height:calc(84 * var(--u))}
.h-title b{color:#8a5a00;text-shadow:0 .012em 0 #9a6400,0 .024em 0 #8a5800,0 .036em 0 #7a4c00,0 .05em 0 #6a4100,0 .068em .01em 0 #4a2f00,0 .1em .04em .05em rgba(0,0,0,.6),0 .15em .12em .2em rgba(0,0,0,.45)}
.h-title b:after{content:attr(data-t);position:absolute;left:0;right:0;top:0;bottom:0;padding:inherit;text-align:center;text-shadow:none;background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gshine 5s linear infinite;filter:drop-shadow(0 -.01em 0 rgba(255,248,190,.9))}
.h-title .t1:after{background-image:linear-gradient(100deg,#f0bc3a 0%,#ffe27a 20%,#fff6c4 34%,#f6cf5a 50%,#e8ae2c 66%,#ffe58a 82%,#f0bc3a 100%)}
.h-title .t2{color:#555}
.h-title .t2:after{background-image:linear-gradient(100deg,#f4f0e6 0%,#ffffff 30%,#ece6d8 55%,#ffffff 80%,#f4f0e6 100%);animation-duration:7s}
@keyframes gshine{to{background-position:-260% 0}}
.swoosh{position:absolute;z-index:4;left:calc(188 * var(--u));top:calc(250 * var(--u));width:calc(458 * var(--u));height:calc(26 * var(--u));filter:drop-shadow(0 0 6px rgba(255,179,0,.6))}
.h-sub{position:absolute;z-index:4;left:calc(170 * var(--u));top:calc(270 * var(--u));width:calc(600 * var(--u));text-align:center;font-family:'Tajawal','Cairo',sans-serif;font-size:calc(25 * var(--u));line-height:calc(40 * var(--u));color:#aebcdc;font-weight:500;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.h-cta{position:absolute;z-index:4;left:calc(198 * var(--u));top:calc(330 * var(--u));width:calc(548 * var(--u));height:calc(58 * var(--u));display:flex;gap:calc(13 * var(--u));direction:ltr}
.h-cta a{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--u));height:100%;border-radius:calc(30 * var(--u));text-decoration:none;font-weight:700;font-size:calc(20 * var(--u));white-space:nowrap;font-family:'Tajawal','Cairo',sans-serif}
.b-gold{flex:0 0 calc(269 * var(--u));color:#2a1800;background:linear-gradient(180deg,#ffe58a,#ffc933 55%,#e9a30c);box-shadow:0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(255,179,0,.35),inset 0 calc(2 * var(--u)) 0 rgba(255,255,255,.55);flex-direction:row-reverse}
.b-gold i{display:block;width:calc(30 * var(--u));height:calc(30 * var(--u));color:#2a1800}.b-gold em{font-style:normal;font-size:calc(30 * var(--u));line-height:1;margin-top:calc(-3 * var(--u))}
.b-line{flex:1;color:#fff;font-weight:500!important;border:calc(1.6 * var(--u)) solid rgba(222,178,86,.7);background:rgba(8,12,30,.4);backdrop-filter:blur(4px)}
.b-gold:hover,.b-line:hover{transform:translateY(-2px);filter:brightness(1.07)}.b-line:hover{border-color:#ffc933;color:#ffd75e}
.b-gold,.b-line{transition:transform .2s,filter .2s}
.h-trust{position:absolute;z-index:4;left:calc(200 * var(--u));top:calc(405 * var(--u));width:calc(542 * var(--u));display:flex;justify-content:space-between;list-style:none;font-size:calc(14.5 * var(--u));color:#d3d8ea;direction:ltr;font-family:'Tajawal','Cairo',sans-serif}
.h-trust li{display:flex;align-items:center;gap:calc(10 * var(--u));position:relative}
.h-trust li+li:before{content:"";position:absolute;right:calc(100% + calc(36 * var(--u)));top:calc(4 * var(--u));bottom:calc(4 * var(--u));width:1px;background:rgba(255,255,255,.2)}
.h-trust svg{width:calc(24 * var(--u));height:calc(24 * var(--u));color:#f3c13a}

/* cards */
.s-cards{position:absolute;z-index:5;left:calc(236 * var(--u));top:calc(451 * var(--u));width:calc(1200 * var(--u));height:calc(246 * var(--u));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:calc(14 * var(--u))}
.h-card{position:relative;display:flex;flex-direction:column;align-items:center;padding:calc(18 * var(--u)) calc(14 * var(--u)) 0;border-radius:calc(18 * var(--u));text-align:center;cursor:pointer;
  background:linear-gradient(180deg,rgba(14,16,34,.74),rgba(8,10,24,.80));border:calc(1.4 * var(--u)) solid rgba(214,168,78,.5);
  box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.5),inset 0 0 calc(26 * var(--u)) rgba(214,168,78,.07);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);transition:transform .25s,box-shadow .25s,border-color .25s}
.h-card:hover{transform:translateY(-6px);border-color:#f0c25a;box-shadow:0 calc(16 * var(--u)) calc(38 * var(--u)) rgba(0,0,0,.6),0 0 calc(26 * var(--u)) color-mix(in srgb,var(--a) 45%,transparent),inset 0 0 calc(26 * var(--u)) rgba(214,168,78,.12)}
.h-ico{position:relative;width:calc(62 * var(--u));height:calc(62 * var(--u))}
.h-ico img{display:block;width:100%;height:100%;border-radius:22%;box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) color-mix(in srgb,var(--a) 55%,transparent)}
.h-badge{position:absolute;left:calc(100% + calc(10 * var(--u)));top:calc(0 * var(--u));width:calc(28 * var(--u));height:calc(28 * var(--u));display:grid;place-items:center;border-radius:50%;font:700 calc(13 * var(--u)) 'Space Grotesk',sans-serif;color:#f6cf5d;background:rgba(10,10,26,.85);border:calc(1.5 * var(--u)) solid rgba(214,168,78,.8)}
.h-badge.b-play{background:#e0457b;border-color:#ff8fb3;color:#fff}.h-badge.b-pen{background:#5546e6;border-color:#8b80ff;color:#fff}.h-badge.b-mic{background:#2d2260;border-color:#7a5cff;color:#fff}
.h-card h3{margin-top:calc(9 * var(--u));font:700 calc(19 * var(--u)) 'Space Grotesk','Cairo',sans-serif;color:#fff;direction:ltr;line-height:calc(27 * var(--u))}
.h-desc{margin-top:calc(3 * var(--u));font-family:'Tajawal','Cairo',sans-serif;font-size:calc(14.5 * var(--u));line-height:calc(22 * var(--u));color:#cdd1e2;font-weight:500;padding:0 calc(2 * var(--u));flex:1}
.h-open{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));align-self:stretch;margin:0 calc(1 * var(--u)) calc(11 * var(--u));height:calc(34 * var(--u));border-radius:calc(20 * var(--u));text-decoration:none;font-weight:700;font-family:'Tajawal','Cairo',sans-serif;font-size:calc(15.5 * var(--u));color:#f2c447;border:calc(1.5 * var(--u)) solid rgba(214,168,78,.85);direction:ltr;transition:.2s}
.h-open i{font-style:normal;font-size:calc(19 * var(--u));transform:scaleX(-1);display:inline-block;transform:none}
.h-open:hover{background:rgba(214,168,78,.18);color:#ffe08a}
.h-card:before{content:"";position:absolute;inset:0;border-radius:inherit}   /* whole card clickable via the link below */
.h-open:after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2}

/* about + script */
.s-about{position:absolute;z-index:4;left:calc(870 * var(--u));top:calc(714 * var(--u));width:calc(450 * var(--u));font-family:'Tajawal','Cairo',sans-serif;text-align:center;color:#e8e3d3;text-shadow:0 2px 10px rgba(0,0,0,.85)}
.a-brand{display:flex;align-items:center;justify-content:center;gap:calc(14 * var(--u));font:700 calc(30 * var(--u)) 'Space Grotesk',sans-serif;color:#fff;line-height:calc(38 * var(--u))}
.a-brand i{flex:0 0 calc(78 * var(--u));height:1.5px;background:linear-gradient(90deg,transparent,#e5b64d)}.a-brand i:last-child{transform:scaleX(-1)}
.a-brand span{color:#f5c542}
.s-about h2{margin-top:calc(4 * var(--u));font-size:calc(20 * var(--u));line-height:calc(34 * var(--u));color:#f5c542;font-weight:800}
.s-about p:last-child{margin:calc(4 * var(--u)) calc(-14 * var(--u)) 0;font-size:calc(14 * var(--u));line-height:calc(22 * var(--u));color:#e9e4d4}
.s-script{position:absolute;z-index:4;left:calc(1378 * var(--u));top:calc(750 * var(--u));width:calc(160 * var(--u));color:#f4e4b6;transform:rotate(-12deg);transform-origin:left bottom;font-family:'Aref Ruqaa','Cairo',serif;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.s-script p{font-size:calc(19 * var(--u));line-height:calc(27 * var(--u));text-align:right;direction:rtl}
.s-script svg:not(.heart){display:block;width:calc(130 * var(--u));height:calc(46 * var(--u));margin:calc(2 * var(--u)) 0 0 calc(40 * var(--u))}
.s-script .heart{position:absolute;left:calc(-8 * var(--u));top:calc(88 * var(--u));width:calc(32 * var(--u));height:calc(32 * var(--u));transform:rotate(12deg)}
html[lang=en] .s-script p{text-align:center;direction:ltr;font-family:'Aref Ruqaa',serif;font-size:calc(22 * var(--u))}

/* motion */
.rm .robot,html.rm .h-title b:after{animation:none}

/* ================= tablet / phone: stacked layout ================= */
@media(max-width:1000px){
  .stage{min-height:0;flex:0 0 auto;container-type:normal;overflow:hidden}
  .stage-in{position:relative;inset:auto;--u:1px;display:flex;flex-direction:column;align-items:center;padding:86px 20px 28px;direction:inherit}
  .s-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 20%}
  .s-shade{background:linear-gradient(180deg,rgba(4,8,24,.78) 0,rgba(4,8,24,.45) 40%,rgba(4,8,24,.7) 100%)}
  .s-copy{display:flex;flex-direction:column;align-items:center;position:relative;z-index:4;text-align:center;width:100%;max-width:640px}
  .h-title,.swoosh,.h-sub,.h-cta,.h-trust,.s-about,.s-script{position:relative;left:auto;top:auto;width:auto;max-width:100%}
  .ar .t1{font-size:clamp(54px,15vw,104px);line-height:1.1}.ar .t2{font-size:clamp(48px,13.5vw,92px);line-height:1.12}
  .en .t1{font-size:clamp(40px,11vw,76px);line-height:1.15}.en .t2{font-size:clamp(26px,7.2vw,50px);line-height:1.2}
  .h-title b{white-space:normal}
  .swoosh{width:min(86%,420px);height:24px}
  .h-sub{font-size:clamp(17px,4.4vw,24px);line-height:1.5;margin-top:4px}
  .h-cta{flex-wrap:wrap;justify-content:center;height:auto;margin-top:18px;gap:12px}
  .h-cta a{height:52px;padding:0 24px;font-size:18px;border-radius:30px}.b-gold{flex:0 0 auto}.b-gold i{width:24px;height:24px}.b-line{flex:0 0 auto}
  .h-trust{margin-top:18px;font-size:14px;gap:8px 18px;flex-wrap:wrap;justify-content:center;width:100%}.h-trust svg{width:20px;height:20px}.h-trust li+li:before{display:none}
  .s-art{position:relative;left:auto;top:auto;z-index:3;width:min(80vw,460px);margin:34px auto 0}
  .s-cards{position:relative;left:auto;top:auto;width:100%;max-width:1000px;height:auto;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px;order:3}
  .s-copy{order:1}.s-art{order:2}.s-about{order:4}.s-script{order:5}
  .h-card{padding:18px 14px 0;border-radius:18px;direction:inherit}
  .h-ico{width:76px;height:76px}.h-badge{width:30px;height:30px;font-size:13px;left:calc(100% + 8px)}
  .h-card h3{font-size:20px;margin-top:10px}.h-desc{font-size:15px;line-height:1.6;margin-top:6px}
  .h-open{height:40px;margin:12px 0 14px;font-size:16px}
  .s-about{margin-top:34px;max-width:560px}.a-brand{font-size:30px}.s-about h2{font-size:21px}.s-about p:last-child{font-size:15px;line-height:1.7}
  .s-script{margin-top:24px;transform:rotate(-6deg);transform-origin:center}.s-script p{font-size:24px;line-height:1.5;text-align:center}.s-script svg:not(.heart){margin:0 auto}.s-script .heart{display:none}
}
@media(max-width:600px){.s-cards{grid-template-columns:1fr}.h-desc{font-size:15.5px}}