@font-face {
  font-family: Cairo; src: url('../fonts/cairo-arabic.woff2') format('woff2');
  font-style: normal; font-weight: 200 1000; font-display: swap;
  unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face {
  font-family: Cairo; src: url('../fonts/cairo-latin.woff2') format('woff2');
  font-style: normal; font-weight: 200 1000; font-display: swap;
}
:root {
  color-scheme: dark;
  --navy: #0B2E65;
  --sky: #4FC3F7;
  --surface: #F5F9FF;
  --supporting: #5F6B7A;
  --navy-rgb: 11, 46, 101;
  --sky-rgb: 79, 195, 247;
  --surface-rgb: 245, 249, 255;
  --text-on-navy: rgba(var(--surface-rgb), .82);
  --line-on-navy: rgba(var(--surface-rgb), .22);
  --line-on-light: rgba(var(--navy-rgb), .14);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { background: var(--navy); }
body {
  margin: 0; min-width: 280px; min-height: 100svh;
  color: var(--surface); background: var(--navy);
  font: 14px/1.6 Cairo, Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a, input { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
/* A single broad wash: no blur filters, particles or extra orbital rings. */
.ambient {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden;
}
.ambient::before {
  content: ""; position: absolute; inset: -15%;
  background: radial-gradient(ellipse at 50% 22%, rgba(var(--sky-rgb), .13), transparent 48%);
  animation: atmosphere 20s ease-in-out infinite alternate;
}
.page {
  position: relative; width: min(calc(100% - 32px), 500px);
  margin: auto; padding: 25px 0 22px;
}
.hero { text-align: center; position: relative; padding-bottom: 24px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-on-navy); font-size: 11px; letter-spacing: .2px;
}
.eyebrow span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--sky);
}
.orbit-scene { width: min(100%, 480px); margin: -3px auto 0; }
.orbit { display: block; width: 100%; height: auto; overflow: hidden; }
h1 {
  font: 700 35px/1.15 Arial, sans-serif; letter-spacing: .24em;
  margin: 0; padding-left: .24em;
}
.eyebrow { animation: arrive .65s var(--ease) both; }
@keyframes arrive { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
@keyframes atmosphere { to { transform: translate3d(3%, 3%, 0); opacity: .65; } }
@media (min-width: 760px) {
  body { display: grid; place-items: center; }
  .page { padding-top: 27px; padding-bottom: 25px; }
  .hero { padding-bottom: 27px; }
  .orbit-scene { margin-top: -8px; margin-bottom: 0; }
  h1 { font-size: 39px; }
}
@media (max-width: 374px) {
  .page { padding-top: 20px; }
  .hero { padding-bottom: 20px; }
  h1 { font-size: 32px; }
}
@media (max-height: 540px) and (min-width: 600px) {
  body { display: block; }
  .page { padding-top: 16px; }
  .orbit-scene { width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The complete original wordmark is the visible heading; retain the textual h1 for assistive technology. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.orbit-scene { width: 100%; max-width: 500px; margin: 0 auto; }
@media (min-width: 760px) { .orbit-scene { margin-top: 0; margin-bottom: 0; } }

/* Lettering never enters, fades or moves. Only the two original drawing layers animate. */
.logo-animation, #logo-lettering { animation: none !important; translate: none; }
@media (prefers-reduced-motion: no-preference) { .logo-drawing { visibility: hidden; } }