*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#FAF3E8;--dark:#1A1010;
  --paper:#FFF6E0;--ink:#3D0F28;--fuchsia:#F02484;--primary:#D01870;
}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--cream);color:var(--dark);overflow-x:hidden}

.hx{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);overflow:hidden}
.hx-top{display:flex;justify-content:space-between;align-items:center;padding:clamp(14px,3vh,26px) clamp(16px,4vw,48px)}
.hx-menu{width:48px;height:48px;padding:0;border-radius:14px;border:2.5px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.hx-menu span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--ink)}
.hx-menu:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.hx-logo img{display:block;width:clamp(120px,14vw,170px);height:auto}
/* روابط الكمبيوتر — على الموبايل بيظهر زرار القائمة بداله */
.hx-nav{display:flex;align-items:center;gap:22px;direction:ltr}
.hx-nav>a:not(.nv-ic){font-family:'Marhey','Cairo',sans-serif;font-size:18px;font-weight:600;color:var(--ink);text-decoration:none;padding:6px 2px;border-bottom:3px solid transparent;transition:border-color .15s}
.hx-nav>a:not(.nv-ic):hover,.hx-nav>a[aria-current]{border-bottom-color:var(--fuchsia)}
.nv-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);color:var(--ink);transition:transform .15s,box-shadow .15s}
.nv-ic:hover{transform:translate(-1px,-2px);box-shadow:3px 4px 0 var(--ink)}
.nv-ic svg{width:20px;height:20px}
.hx-nav a:focus-visible,.mob-box a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hx-menu{display:none}
@media (max-width:760px){.hx-nav{display:none}.hx-menu{display:flex}}
.hx-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.5vh,34px);padding:0 clamp(16px,5vw,64px) clamp(16px,3vh,32px);text-align:center}
.hx-title{font-family:'Marhey','Cairo',sans-serif;font-weight:700;font-size:clamp(32px,5vw,64px);line-height:1.25;text-wrap:balance}
.hx-title span{color:var(--fuchsia)}
.hx-sub{max-width:30em;margin-top:calc(-1 * clamp(6px,1.5vh,16px));font-size:clamp(16px,2vw,20px);line-height:1.8;color:#6E3E58}
.hx-more{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto clamp(18px,4vh,32px);font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.hx-more svg{width:26px;height:26px;animation:hx-down 1.6s ease-in-out infinite}
@keyframes hx-down{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.hx-row{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,16px)}
.hx-cta{position:relative;overflow:hidden;font-family:'Marhey','Cairo',sans-serif;font-size:19px;font-weight:600;min-height:56px;padding:0 30px;display:inline-flex;align-items:center;white-space:nowrap;background:var(--primary);color:#fff;text-decoration:none;border-radius:16px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s;animation:hx-nudge 4s ease-in-out 1.2s infinite}
.hx-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);animation:hx-shine 4s ease-in-out 1.2s infinite;pointer-events:none}
.hx-cta:hover{animation:none;transform:translate(1px,-3px);box-shadow:6px 7px 0 var(--ink)}
.hx-cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.hx-cta:focus-visible,.hx-menu:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@keyframes hx-nudge{0%,76%,100%{transform:none}80%{transform:rotate(-3deg) scale(1.05)}84%{transform:rotate(3deg) scale(1.05)}88%{transform:rotate(-2deg) scale(1.02)}92%{transform:rotate(1deg)}}
@keyframes hx-shine{0%,70%{transform:translateX(-130%)}86%,100%{transform:translateX(130%)}}
.hx-mascot{display:block;width:clamp(150px,17vw,230px);height:auto;transform-origin:50% 100%;animation:hx-bob 1.2s ease-in-out infinite}
@keyframes hx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px) rotate(-1.5deg)}}
.sc{background:var(--paper);color:var(--ink);padding:clamp(56px,9vh,96px) 16px;text-align:center;overflow:hidden}
.sc-eyebrow{font-size:14px;font-weight:700;color:#8A2A5A}
.sc-title{font-family:'Marhey','Cairo',sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,52px);line-height:1.2;margin-top:6px}
.sc-sub{max-width:34em;margin:12px auto 0;font-size:clamp(16px,2vw,19px);line-height:1.8;color:#6E3E58}
.sc-points{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px auto 0;padding:0;list-style:none}
.sc-points li{display:flex;align-items:center;gap:7px;padding:8px 14px;background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);font-size:14px;font-weight:700}
.sc-points svg{width:18px;height:18px;flex:none}
.sc-stage{position:relative;width:min(1000px,100%);aspect-ratio:1000/760;margin:clamp(24px,4vh,40px) auto 0}
.sc-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sc-arrows--m{display:none}
.sc-phone{position:absolute;left:35.5%;top:15.8%;width:29%}
.sc-mascot{position:absolute;z-index:2;left:-16%;bottom:100%;width:43%;height:auto;margin-bottom:-11%}
.sc-lock{position:absolute;z-index:2;top:-1%;right:-4%;width:14%;aspect-ratio:1;border-radius:50%;background:#FFC531;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center}
.sc-lock svg{width:52%;height:52%}
.sc-frame{padding:4.1%;border-radius:clamp(24px,4.6vw,46px);background:var(--ink);box-shadow:clamp(5px,1vw,10px) clamp(5px,1vw,10px) 0 var(--fuchsia)}
.sc-screen{position:relative;container-type:inline-size;aspect-ratio:390/844;border-radius:clamp(16px,3.4vw,34px);overflow:hidden;background:#fff}
.sc-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-notch{position:absolute;top:1.6%;left:50%;transform:translateX(-50%);width:32%;height:3.4%;border-radius:999px;background:var(--ink)}
.sc-in{animation:sc-in .45s ease}
@keyframes sc-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.sc-count{position:absolute;inset:0;pointer-events:none;font-family:'Marhey',sans-serif;color:#fff;font-size:14px;font-size:5.64cqw;line-height:1}
.sc-count span{position:absolute;top:var(--cd-y);transform:translate(-50%,-50%);font-variant-numeric:tabular-nums}
.sc-shard{position:absolute;overflow:hidden;will-change:transform}
.sc-shard>i{position:absolute;display:block;background-size:100% 100%}
.sc-count span:nth-child(1){left:80.77%}.sc-count span:nth-child(2){left:60.32%}.sc-count span:nth-child(3){left:39.62%}.sc-count span:nth-child(4){left:19.04%}
.sc-box{position:absolute;width:27%;text-align:right;background:#fff;border:2.5px solid var(--ink);border-radius:20px;box-shadow:4px 4px 0 var(--ink);padding:1.6% 1.8%}
.sc-box strong{display:block;font-size:clamp(13px,1.8vw,18px);font-weight:800}
.sc-box span{display:block;font-size:clamp(11px,1.4vw,14px);color:#6E3E58;line-height:1.6}
.sc-b1{left:4%;top:28.2%;transform:rotate(-2deg)}
.sc-b2{left:4%;top:57.4%;transform:rotate(1.5deg)}
.sc-b3{left:69%;top:9.5%;transform:rotate(1.5deg)}
.sc-b4{left:69%;top:45.3%;transform:rotate(-2deg)}
.sc-b5{left:69%;top:78.2%;transform:rotate(1deg)}
.sc-swatches{display:flex;justify-content:center;align-items:center;gap:14px;min-height:56px;margin-top:clamp(18px,3vh,28px)}
.sc-sw{width:38px;height:38px;padding:0;border-radius:50%;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;transition:width .15s,height .15s,box-shadow .15s}
.sc-sw[aria-pressed="true"]{width:46px;height:46px;box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--ink)}
.sc-sw:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.sc-name{font-family:'Marhey','Cairo',sans-serif;font-size:20px;margin-top:10px}
.sc-demo{display:inline-block;margin-top:4px;font-size:16px;font-weight:700;color:var(--primary)}
.sc-all{display:flex;align-items:center;justify-content:center;width:min(340px,100%);min-height:48px;margin:clamp(20px,3vh,28px) auto 0;border:2px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.sc-all:hover{background:var(--ink);color:var(--paper)}
.sc-all:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:700px){
  .sc-stage{aspect-ratio:360/460}
  .sc-arrows--d{display:none}.sc-arrows--m{display:block}
  .sc-phone{left:25%;top:15.2%;width:50%}
  .sc-box{width:23.5%;padding:6px 7px;border-radius:12px;box-shadow:2px 2px 0 var(--ink)}
  .sc-box strong{font-size:12.5px;line-height:1.35}
  .sc-box span{display:none}
  .sc-b1{left:.5%;top:27.8%}.sc-b2{left:.5%;top:60.4%}
  .sc-b3{left:76%;top:4.3%}.sc-b4{left:76%;top:45.6%}.sc-b5{left:76%;top:82.6%}
}
.hw{background:var(--paper);color:var(--ink);padding:clamp(48px,8vh,88px) 16px clamp(56px,9vh,96px)}
.hw-in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(28px,4vh,40px)}
.hw-title{font-family:'Marhey','Cairo',sans-serif;font-weight:700;font-size:clamp(30px,4.4vw,48px);line-height:1.25;margin-top:6px}
.hw-title span{color:#8A2A5A;background:linear-gradient(transparent 80%,#FFC531 80%,#FFC531 94%,transparent 94%)}
.hw-up{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,22px)}
.hw-items{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.hw-items li{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);font-size:15px;font-weight:700}
.hw-items svg{width:18px;height:18px;flex:none}
.hw-bar{width:min(520px,100%);height:16px;box-sizing:border-box;border:2.5px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.hw-bar i{display:block;height:100%;background:var(--fuchsia);transform-origin:right center}
.hw-step{display:flex;align-items:center;justify-content:center;gap:12px;font-family:'Marhey','Cairo',sans-serif;font-weight:700;font-size:clamp(22px,3.2vw,32px);line-height:1.3;color:var(--ink)}
.hw-s1{font-size:clamp(28px,4.2vw,44px)}
.hw-n{flex:none;width:44px;height:44px;border-radius:31%;background:#fff;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;font-size:22px}
.hw-n3{background:#FFC531}
.hw.play .hw-s2{animation:hw-pop .6s .5s both}
.hw.play .hw-items li{animation:hw-pop .6s 1.2s both}
.hw.play .hw-items li:nth-child(2){animation-delay:1.75s}.hw.play .hw-items li:nth-child(3){animation-delay:2.3s}
.hw.play .hw-items li:nth-child(4){animation-delay:2.85s}.hw.play .hw-items li:nth-child(5){animation-delay:3.4s}
.hw.play .hw-bar i{animation:hw-fill 2.9s ease-in-out 1.2s both}
.hw.play .hw-ready{animation:hw-pop .7s 4.3s both}
@keyframes hw-pop{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes hw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hw-tag{position:relative;width:min(100%,600px);margin:8px auto 0;box-sizing:border-box;padding:clamp(28px,4vw,40px) clamp(24px,4vw,40px) clamp(28px,4vw,36px) clamp(48px,7vw,64px);background:var(--fuchsia);color:#fff;border:2.5px solid var(--ink);border-radius:28px 28px 28px 90px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-2deg);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.hw-hole{position:absolute;top:24px;left:24px;width:24px;height:24px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink)}
.hw-from{font-family:'Marhey','Cairo',sans-serif;font-size:26px}
.hw-price{font-family:'Marhey','Cairo',sans-serif;font-weight:700;font-size:clamp(64px,10vw,100px);line-height:1}
.hw-price small{font-size:.32em}
.hw-rush{font-family:'Marhey','Cairo',sans-serif;font-size:clamp(22px,2.6vw,26px);line-height:1.5}
.hw-cta{margin-top:6px;font-family:'Marhey','Cairo',sans-serif;font-size:19px;font-weight:600;min-height:56px;padding:0 30px;display:inline-flex;align-items:center;background:#FFC531;color:var(--ink);text-decoration:none;border-radius:16px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .25s,box-shadow .25s,background-color .25s;animation:hw-lift 1.5s ease infinite}
@keyframes hw-lift{0%,100%{transform:translate(0,0);box-shadow:0 0 0 var(--ink)}50%{transform:translate(-4px,-4px);box-shadow:4px 4px 0 var(--ink)}}
.hw-cta:hover{animation:none;transform:translate(0,0);box-shadow:0 0 0 var(--ink);background:#F5B400}
.hw-cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.hw-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mob-menu{display:none;position:fixed;inset:0;background:rgba(61,15,40,.45);z-index:200}
.mob-menu.open{display:block}
.mob-box{background:var(--paper);padding:18px 16px 26px;border-bottom:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.mob-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.mob-close{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:18px;cursor:pointer;color:var(--ink)}
.mob-links{display:flex;flex-direction:column;gap:10px;direction:ltr}
.mob-links a{display:block;text-align:center;font-family:'Marhey','Cairo',sans-serif;font-size:20px;font-weight:600;color:var(--ink);text-decoration:none;padding:12px 0;background:#fff;border:2.5px solid var(--ink);border-radius:16px;box-shadow:3px 3px 0 var(--ink)}
.mob-social{display:flex;justify-content:center;gap:14px;margin-top:20px;direction:ltr}

h2{font-size:clamp(24px,4vw,42px);font-weight:900;line-height:1.1;letter-spacing:-1px;margin-bottom:14px}