:root {
  --blue: #0508ff;
  --blue-2: #334bff;
  --blue-3: #7c90ff;
  --ice: #eaefef;
  --white: #ffffff;
  --ink: #030713;
  --ink-2: #07101f;
  --muted: rgba(234, 239, 239, .74);
  --soft: rgba(234, 239, 239, .52);
  --line: rgba(234, 239, 239, .15);
  --line-blue: rgba(5, 8, 255, .38);
  --glass: rgba(234, 239, 239, .07);
  --glass-2: rgba(234, 239, 239, .11);
  --radius: 28px;
  --container: min(1188px, calc(100vw - 44px));
  --font-main: "Thmanyah Sans", "ثمانية سانس", "ThmanyahSans", "Noto Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body {
  margin: 0;
  min-height: 100svh;
  color: var(--ice);
  font-family: var(--font-main);
  background:
    radial-gradient(circle at 15% 14%, rgba(5, 8, 255, .35), transparent 32%),
    radial-gradient(circle at 84% 48%, rgba(5, 8, 255, .26), transparent 30%),
    linear-gradient(145deg, #02040c 0%, #061225 45%, #02040b 100%);
  overflow-x: hidden;
  text-rendering: geometricPrecision;
}

body::selection { background: var(--blue); color: var(--white); }
a { color: inherit; text-decoration: none; }

.page {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 28px 0 38px;
}

.page::before,
.page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -5;
}

.page::before {
  background-image:
    linear-gradient(rgba(124, 144, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 144, 255, .09) 1px, transparent 1px),
    radial-gradient(circle at 16% 46%, rgba(255,255,255,.38) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 20%, rgba(5,8,255,.72) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,.28) 0 1px, transparent 1.6px);
  background-size: 88px 88px, 88px 88px, 340px 260px, 430px 310px, 520px 360px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
  opacity: .68;
  animation: gridMove 18s ease-in-out infinite alternate;
}

.page::after {
  background:
    radial-gradient(circle at 50% 40%, transparent 0 52%, rgba(0,0,0,.28) 74%, rgba(0,0,0,.65) 100%),
    linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, .46));
  z-index: -1;
  mix-blend-mode: multiply;
}

.mesh {
  position: absolute;
  width: 520px;
  aspect-ratio: 1;
  border-radius: 999px;
  z-index: -4;
  filter: blur(24px);
  opacity: .64;
  pointer-events: none;
}
.mesh-a {
  right: -160px;
  top: 14%;
  background: radial-gradient(circle, rgba(5, 8, 255, .5), transparent 66%);
  animation: floatA 10s ease-in-out infinite alternate;
}
.mesh-b {
  left: -180px;
  bottom: -180px;
  background: radial-gradient(circle, rgba(234, 239, 239, .16), rgba(5, 8, 255, .25) 34%, transparent 66%);
  animation: floatB 12s ease-in-out infinite alternate;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.topbar {
  width: var(--container);
  margin: 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  position: relative;
  z-index: 5;
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.brand img {
  width: clamp(158px, 17vw, 240px);
  height: auto;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.22));
}
.top-meta {
  direction: rtl;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(234, 239, 239, .78);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.top-meta span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 8px rgba(5,8,255,.12), 0 0 26px rgba(5,8,255,.85);
}

.link-deck {
  width: var(--container);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  gap: 10px;
  align-items: stretch;
  position: relative;
  z-index: 5;
  padding: 10px;
  border: 1px solid rgba(234,239,239,.12);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(234,239,239,.075), rgba(234,239,239,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
.deck-label {
  min-width: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border-radius: 18px;
  background: rgba(5, 8, 255, .16);
  color: var(--ice);
  font-size: 14px;
  font-weight: 900;
  border: 1px solid rgba(5, 8, 255, .28);
}
.deck-link {
  position: relative;
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 18px 12px 48px;
  border-radius: 18px;
  background: rgba(2, 6, 16, .42);
  border: 1px solid rgba(234, 239, 239, .11);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.deck-link::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(120deg, transparent, rgba(5,8,255,.22), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.deck-link:hover {
  transform: translateY(-3px);
  border-color: rgba(5, 8, 255, .42);
  background: rgba(5, 8, 255, .11);
  box-shadow: 0 16px 48px rgba(5, 8, 255, .16);
}
.deck-link:hover::before { opacity: 1; }
.deck-link.primary {
  background: linear-gradient(135deg, rgba(5,8,255,.95), rgba(46,78,255,.78));
  border-color: rgba(111, 130, 255, .72);
  box-shadow: 0 18px 55px rgba(5,8,255,.28);
}
.deck-link strong {
  position: relative;
  z-index: 1;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
}
.deck-link small {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: rgba(234, 239, 239, .66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-link.primary small { color: rgba(255,255,255,.76); }
.deck-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  color: var(--white);
  font-weight: 900;
  z-index: 1;
}

.hero {
  width: var(--container);
  min-height: calc(100svh - 238px);
  margin: clamp(34px, 5vw, 58px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .78fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  position: relative;
  z-index: 3;
}
.hero::before {
  content: "";
  position: absolute;
  left: -8vw;
  right: -8vw;
  bottom: -70px;
  height: 185px;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(5,8,255,.22), transparent 60%),
    repeating-radial-gradient(ellipse at 50% 95%, rgba(51,75,255,.16) 0 2px, transparent 2px 22px);
  opacity: .9;
  filter: blur(.2px);
  animation: tide 8s ease-in-out infinite alternate;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding: 10px 16px;
  margin-bottom: 24px;
  border-radius: 999px;
  border: 1px solid rgba(234,239,239,.13);
  color: rgba(234,239,239,.84);
  background: rgba(234,239,239,.055);
  backdrop-filter: blur(14px);
  font-size: 14px;
  font-weight: 900;
}
.status-pill span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 7px rgba(5,8,255,.12), 0 0 22px rgba(5,8,255,.9);
  animation: pulseDot 1.8s ease-in-out infinite;
}

h1, p { margin: 0; }
h1 {
  max-width: 760px;
  display: grid;
  gap: 0;
  color: var(--white);
  font-family: var(--font-main);
  font-size: clamp(56px, 7vw, 108px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.075em;
  text-wrap: balance;
}
h1 span {
  display: block;
  text-shadow: 0 18px 54px rgba(0,0,0,.32);
}
h1 .accent {
  color: var(--blue);
  background: linear-gradient(180deg, #ffffff 0%, #eef2ff 23%, #0b22ff 24%, #0508ff 70%, #88a0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 22px 38px rgba(5, 8, 255, .34));
}
.hero-copy p {
  max-width: 630px;
  margin-top: 24px;
  color: rgba(234, 239, 239, .78);
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 700;
  line-height: 1.85;
  letter-spacing: -.035em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.action {
  min-height: 58px;
  min-width: 178px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 24px;
  border-radius: 18px;
  font-weight: 900;
  font-size: 17px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.action::before {
  content: "↗";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  font-size: 16px;
}
.action:hover { transform: translateY(-3px); }
.action-primary {
  background: linear-gradient(135deg, var(--blue), #314aff);
  color: var(--white);
  box-shadow: 0 20px 55px rgba(5, 8, 255, .32), inset 0 1px 0 rgba(255,255,255,.18);
}
.action-ghost {
  color: var(--ice);
  border: 1px solid rgba(234,239,239,.16);
  background: rgba(234,239,239,.055);
  backdrop-filter: blur(16px);
}
.action-ghost:hover {
  border-color: rgba(5,8,255,.48);
  box-shadow: 0 18px 50px rgba(5,8,255,.14);
}

.launch-panel {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.launch-panel::before {
  content: "";
  position: absolute;
  width: min(100%, 500px);
  aspect-ratio: 1;
  border-radius: 42% 58% 50% 50%;
  border: 1px solid rgba(234,239,239,.09);
  background:
    linear-gradient(135deg, rgba(5,8,255,.13), transparent 46%),
    rgba(234,239,239,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 110px rgba(5,8,255,.13);
  animation: blob 10s ease-in-out infinite alternate;
}
.panel-glass {
  position: relative;
  width: min(100%, 420px);
  min-height: 440px;
  padding: 34px;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 22px;
  border-radius: 34px;
  border: 1px solid rgba(234, 239, 239, .14);
  background:
    linear-gradient(160deg, rgba(234,239,239,.12), rgba(234,239,239,.035) 55%, rgba(5,8,255,.12)),
    rgba(5, 9, 20, .58);
  box-shadow: 0 44px 120px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(24px);
  overflow: hidden;
}
.panel-glass::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(234,239,239,.08);
  border-radius: 26px;
  pointer-events: none;
}
.panel-glass::after {
  content: "";
  position: absolute;
  inset: auto -20% -34% -20%;
  height: 54%;
  background: radial-gradient(ellipse at center, rgba(5,8,255,.32), transparent 66%);
  animation: scan 4.5s ease-in-out infinite alternate;
}
.orbit {
  position: relative;
  min-height: 236px;
  display: grid;
  place-items: center;
  z-index: 1;
}
.orbit img {
  width: 116px;
  height: 116px;
  object-fit: contain;
  padding: 18px;
  border-radius: 28px;
  background: rgba(234, 239, 239, .92);
  box-shadow: 0 24px 58px rgba(5,8,255,.28), inset 0 1px 0 rgba(255,255,255,.9);
  animation: markFloat 4.3s ease-in-out infinite;
}
.ring {
  position: absolute;
  border: 1px solid rgba(124, 144, 255, .26);
  border-radius: 50%;
  transform-origin: center;
}
.ring-one { width: 210px; height: 210px; animation: rotate 14s linear infinite; }
.ring-two { width: 280px; height: 140px; animation: rotate 18s linear infinite reverse; }
.ring-three { width: 130px; height: 280px; animation: rotate 22s linear infinite; opacity: .65; }
.ring::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 32%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 18px rgba(5,8,255,.9);
}
.panel-text {
  position: relative;
  z-index: 1;
}
.tiny {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--blue-3);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}
.panel-text strong {
  display: block;
  color: var(--white);
  font-size: clamp(24px, 2.35vw, 32px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.04em;
}
.panel-text p {
  margin-top: 10px;
  color: rgba(234,239,239,.7);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
}
.progress {
  position: relative;
  z-index: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(234,239,239,.11);
  overflow: hidden;
}
.progress span {
  display: block;
  width: 74%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--blue-3), var(--ice));
  box-shadow: 0 0 22px rgba(5,8,255,.58);
  animation: progress 3.2s ease-in-out infinite alternate;
}

@keyframes gridMove { from { transform: translate3d(0,0,0); } to { transform: translate3d(-24px,18px,0); } }
@keyframes floatA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-40px,26px,0) scale(1.08); } }
@keyframes floatB { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(52px,-28px,0) scale(1.04); } }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .68; } }
@keyframes tide { from { transform: translateY(0) scaleX(1); opacity: .68; } to { transform: translateY(-16px) scaleX(1.03); opacity: .98; } }
@keyframes blob { from { transform: rotate(-5deg) scale(.98); } to { transform: rotate(6deg) scale(1.03); } }
@keyframes scan { from { transform: translateY(0); opacity: .52; } to { transform: translateY(-26px); opacity: .9; } }
@keyframes markFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes progress { from { width: 62%; } to { width: 84%; } }

@media (max-width: 980px) {
  :root { --container: min(100vw - 28px, 720px); }
  .page { padding-top: 18px; }
  .topbar {
    min-height: auto;
    flex-direction: column;
    gap: 12px;
  }
  .brand img { width: clamp(158px, 44vw, 230px); }
  .top-meta { font-size: 13px; }
  .link-deck {
    margin-top: 18px;
    grid-template-columns: 1fr 1fr;
    border-radius: 22px;
  }
  .deck-label {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-width: 0;
    min-height: 44px;
  }
  .deck-link {
    min-height: 78px;
    padding: 13px 14px 13px 44px;
    border-radius: 16px;
  }
  .deck-link small { font-size: 11px; }
  .hero {
    min-height: auto;
    margin-top: 34px;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-copy { text-align: center; }
  .status-pill { margin-left: auto; margin-right: auto; }
  h1 {
    max-width: 100%;
    font-size: clamp(48px, 15vw, 82px);
    line-height: 1.02;
    letter-spacing: -.07em;
  }
  .hero-copy p {
    max-width: 100%;
    font-size: 17px;
    line-height: 1.85;
    margin-top: 18px;
  }
  .hero-actions {
    justify-content: center;
  }
  .action {
    flex: 1 1 160px;
    min-width: min(100%, 150px);
  }
  .launch-panel {
    min-height: auto;
    padding-bottom: 18px;
  }
  .launch-panel::before { width: 380px; max-width: 96%; }
  .panel-glass {
    width: 100%;
    min-height: 330px;
    padding: 24px;
    border-radius: 28px;
  }
  .orbit { min-height: 170px; }
  .orbit img { width: 92px; height: 92px; border-radius: 22px; }
  .ring-one { width: 160px; height: 160px; }
  .ring-two { width: 214px; height: 108px; }
  .ring-three { width: 105px; height: 214px; }
  .panel-text { text-align: center; }
}

@media (max-width: 540px) {
  :root { --container: calc(100vw - 22px); }
  body {
    background:
      radial-gradient(circle at 28% 12%, rgba(5, 8, 255, .28), transparent 34%),
      radial-gradient(circle at 82% 52%, rgba(5, 8, 255, .18), transparent 32%),
      linear-gradient(155deg, #02040c 0%, #071225 58%, #02040b 100%);
  }
  .page { padding: 16px 0 24px; }
  .topbar { gap: 8px; }
  .brand img { width: 172px; }
  .top-meta { font-size: 12px; }
  .link-deck {
    gap: 8px;
    padding: 8px;
    margin-top: 14px;
  }
  .deck-label { padding: 10px 14px; font-size: 13px; }
  .deck-link { min-height: 70px; padding: 11px 12px 11px 40px; }
  .deck-link strong { font-size: 14px; }
  .deck-link small { display: none; }
  .deck-icon { left: 12px; width: 24px; height: 24px; font-size: 13px; }
  .hero { margin-top: 26px; }
  .status-pill { font-size: 12px; min-height: 38px; padding: 9px 13px; }
  h1 { font-size: clamp(45px, 15.5vw, 68px); }
  .hero-copy p { font-size: 15px; line-height: 1.8; }
  .hero-actions { gap: 8px; margin-top: 20px; }
  .action { min-height: 52px; border-radius: 15px; font-size: 14px; padding: 12px 14px; }
  .action::before { width: 24px; height: 24px; font-size: 13px; }
  .panel-glass { min-height: 306px; padding: 20px; }
  .panel-text strong { font-size: 22px; }
  .panel-text p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}