:root {
  --c-deep-green: #2C7865;
  --c-orange: #FF9800;
  --c-fresh-green: #90D26D;
  --c-mint: #D9EDBF;
  --c-ink: #102E29;
  --c-body: #4A635D;
  --c-bg: #F6F7F1;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Tajawal", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --page-x: clamp(1.5rem, 5vw, 4rem);
  --page-max: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; background: var(--c-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden; font-family: var(--font); color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, p { margin: 0; }
img, svg { display: block; max-width: 100%; }

.page {
  display: flex; flex-direction: column; width: 100%; max-width: var(--page-max);
  min-height: 100vh; min-height: 100svh; margin: 0 auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(1.5rem, 4vw, 2.5rem));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--page-x));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1.25rem, 3vw, 2rem));
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--page-x));
}

.logo { width: auto; height: 40px; }

.hero {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center; gap: clamp(2rem, 3vw, 3rem); padding-block: clamp(2.5rem, 8vh, 5rem);
}
.hero__copy { container-type: inline-size; }
.hero__title { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.5rem); font-size: clamp(2rem, 7.3cqi, 3.75rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; color: var(--c-ink); }
.hero__title span { display: block; text-wrap: balance; }
.hero__title span + span { color: var(--c-deep-green); }
.hero__arabic { width: fit-content; max-width: 100%; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-family: var(--font-ar); font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-size: clamp(1.375rem, 4.3cqi, 2.125rem); font-weight: 700; line-height: 1.45; color: var(--c-ink); direction: rtl; text-align: right; unicode-bidi: isolate; }
.hero__arabic span { display: block; }
.hero__note { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); font-weight: 500; color: var(--c-body); }

.status { display: inline-flex; align-items: center; gap: 0.625rem; margin-top: clamp(1.25rem, 2.5vw, 1.75rem); padding: 0.5625rem 1.25rem 0.5625rem 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--c-ink); background: var(--c-mint); border-radius: 999px; }
.status__dot { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-orange); }
.status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-orange); animation: pulse 2.4s var(--ease) infinite; }

.stage { position: relative; justify-self: end; width: 100%; aspect-ratio: 4 / 5; }
.stage > * { position: absolute; }
.stage__glow { left: -20%; top: 0; width: 140%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217,237,191,.7) 0%, rgba(217,237,191,.25) 40%, rgba(217,237,191,0) 68%); }
.stage__disc { left: 4%; top: 37%; width: 68%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(160deg, rgba(217,237,191,.9), rgba(144,210,109,.25)); animation: pop-in 1s var(--ease) .1s both; }
.stage__trails { inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage__trails path { fill: none; stroke: var(--c-deep-green); stroke-width: 3px; stroke-linecap: round; stroke-opacity: .3; vector-effect: non-scaling-stroke; animation: trail-in .9s var(--ease) both; }
.stage__trails path:nth-child(1){animation-delay:.7s}.stage__trails path:nth-child(2){animation-delay:.8s}.stage__trails path:nth-child(3){animation-delay:.9s}
.stage__wayo { left: 0; bottom: 0; width: 76%; height: auto; animation: wayo-in 1.1s var(--ease) .15s both, bob 6s ease-in-out 1.6s infinite alternate; }
.stage__mark { left: 75%; top: 28%; width: 22%; height: auto; animation: pop-in .8s var(--ease) .95s both, float 7s ease-in-out 1.8s infinite alternate; }
.stage__orbit { left: 69%; top: 23.2%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(44,120,101,.35); border-bottom-color: transparent; border-left-color: transparent; animation: pop-in .9s var(--ease) 1.05s both, spin 40s linear 2s infinite; }
.stage__dot { left: 64%; top: 17%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: var(--c-fresh-green); animation: pop-in .8s var(--ease) 1.15s both, float 8s ease-in-out 2s infinite alternate; }
.sparkle { fill: var(--c-orange); animation: pop-in .7s var(--ease) both, twinkle 3.6s ease-in-out infinite; }
.sparkle--a { left: 94%; top: 18%; width: 6%; animation-delay: 1.2s,1.9s; }
.sparkle--b { left: 95%; top: 48%; width: 3.5%; fill: var(--c-fresh-green); animation-delay: 1.3s,2.7s; }
.sparkle--c { left: 0; top: 52%; width: 4%; fill: var(--c-deep-green); animation-delay: 1.4s,3.3s; }

.site-footer { font-size: .8125rem; color: var(--c-body); }
.reveal { animation: reveal .9s var(--ease) both; }
.hero__title.reveal{animation-delay:.35s}.hero__arabic.reveal{animation-delay:.5s}.hero__note.reveal{animation-delay:.65s}.status.reveal{animation-delay:.75s}.site-footer.reveal{animation-delay:.85s}
@keyframes reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes wayo-in{from{opacity:0;transform:translateY(8%)}to{opacity:1;transform:none}}
@keyframes bob{to{transform:translateY(-1.5%)}}
@keyframes trail-in{from{opacity:0;transform:translateX(6%)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes float{to{transform:translateY(14px)}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.6) rotate(45deg)}}
@keyframes pulse{0%{transform:scale(1);opacity:.55}80%,100%{transform:scale(2.8);opacity:0}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}}

@media (max-width:860px){
  .logo{height:34px}.hero{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(1.75rem,4vh,2.5rem);padding-block:clamp(1rem,3vh,2rem)}
  .stage{order:-1;justify-self:center;width:min(64vw,262px)}.hero__title{font-size:clamp(2rem,1.2rem + 3.6vw,3.25rem)}.hero__copy{container-type:normal}.hero__arabic{font-size:clamp(1.3125rem,1rem + 1.4vw,1.875rem)}
}
@media (max-width:860px) and (max-height:700px){.stage{width:min(42vw,158px)}.hero{gap:1.75rem;padding-block:1.25rem}.hero__title{font-size:1.875rem}.hero__arabic{margin-top:1rem;font-size:1.3125rem}.hero__note,.status{margin-top:1rem}}
@media (max-width:350px){.hero__title{font-size:1.75rem}}
@media (max-height:520px) and (orientation:landscape){.hero{grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);padding-block:1.5rem}.stage{order:0;justify-self:end;width:min(100%,160px)}.hero__title{font-size:1.875rem}.hero__arabic{font-size:1.25rem}}