:root {
  --night: #02040a;
  --deep: #07111f;
  --text: #f5f8ff;
  --muted: #aebbd0;
  --cyan: #7de6ff;
  --violet: #b99cff;
  --green: #87ffd7;
  --border: rgba(255,255,255,.16);
  --glass: rgba(8,15,27,.38);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 35%, rgba(31,72,117,.18), transparent 35%),
    linear-gradient(180deg, #02040a 0%, #050914 50%, #020309 100%);
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -6;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at center, transparent 30%, rgba(0,0,0,.35) 72%, rgba(0,0,0,.78) 100%);
}

.aurora {
  position: fixed;
  pointer-events: none;
  z-index: -4;
  filter: blur(65px);
  opacity: .27;
  mix-blend-mode: screen;
  border-radius: 45% 55% 60% 40%;
  animation: drift 18s ease-in-out infinite alternate;
}

.aurora-one {
  width: 72vw;
  height: 25vw;
  top: 5vh;
  left: -14vw;
  background: linear-gradient(90deg, transparent, rgba(65,255,206,.66), rgba(71,171,255,.54), transparent);
  transform: rotate(-12deg);
}

.aurora-two {
  width: 65vw;
  height: 22vw;
  top: 19vh;
  right: -12vw;
  background: linear-gradient(90deg, transparent, rgba(134,99,255,.55), rgba(73,229,255,.48), transparent);
  transform: rotate(10deg);
  animation-delay: -6s;
}

.aurora-three {
  width: 58vw;
  height: 16vw;
  bottom: 7vh;
  left: 17vw;
  background: linear-gradient(90deg, transparent, rgba(109,255,198,.32), rgba(133,88,255,.38), transparent);
  transform: rotate(-5deg);
  animation-delay: -11s;
}

.planet {
  position: fixed;
  z-index: -3;
  border-radius: 50%;
  pointer-events: none;
}

.planet-one {
  width: clamp(180px, 25vw, 420px);
  height: clamp(180px, 25vw, 420px);
  right: -10vw;
  bottom: -16vw;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.5) 0 1%, transparent 1.5%),
    radial-gradient(circle at 48% 40%, #27446c 0 18%, #17283f 38%, #0b1320 64%, #050810 100%);
  box-shadow:
    inset -45px -35px 70px rgba(0,0,0,.65),
    0 0 110px rgba(98,147,255,.08);
  opacity: .45;
}

.page {
  width: 100%;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}

.page.ready {
  opacity: 1;
  transform: scale(1);
}

.site-header,
.site-footer {
  position: relative;
  z-index: 5;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  min-height: clamp(58px, 8vh, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -.04em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: clamp(34px, 4.5vh, 40px);
  height: clamp(34px, 4.5vh, 40px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, #dffaff 0 8%, transparent 9%),
    linear-gradient(135deg, var(--green), var(--cyan), var(--violet));
  color: #041014;
  box-shadow: 0 0 30px rgba(125,230,255,.28);
  font-size: .84rem;
}

.language-switcher {
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  backdrop-filter: blur(18px);
  font-weight: 850;
  cursor: pointer;
}

.hero {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 20px;
}

.hero-content {
  width: min(930px, 100%);
  max-height: calc(100svh - 135px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.orbital-logo {
  width: clamp(76px, 11vh, 112px);
  height: clamp(76px, 11vh, 112px);
  position: relative;
  margin-bottom: clamp(8px, 1.6vh, 18px);
  display: grid;
  place-items: center;
}

.planet-core {
  display: grid;
  place-items: center;
  width: clamp(48px, 6.6vh, 66px);
  height: clamp(48px, 6.6vh, 66px);
  border-radius: 50%;
  color: #031019;
  font-weight: 950;
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0 5%, transparent 6%),
    linear-gradient(135deg, var(--green), var(--cyan) 48%, var(--violet));
  box-shadow:
    0 0 25px rgba(125,230,255,.45),
    0 0 70px rgba(185,156,255,.22);
  animation: breathe 4s ease-in-out infinite;
}

.orbit {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
}

.orbit-one { transform: rotate(60deg) scaleY(.46); }
.orbit-two { transform: rotate(-35deg) scaleY(.55); }

.orbit-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 14px rgba(255,255,255,.9);
}

.dot-one { animation: orbitOne 8s linear infinite; }
.dot-two { animation: orbitTwo 11s linear infinite reverse; }

.mission-label {
  color: rgba(210,225,245,.62);
  letter-spacing: .24em;
  font-size: clamp(.62rem, 1.25vh, .75rem);
  font-weight: 800;
  margin-bottom: clamp(7px, 1vh, 12px);
}

h1 {
  font-size: clamp(2.8rem, min(10.5vw, 11.5vh), 8.4rem);
  letter-spacing: -.087em;
  line-height: .88;
  text-shadow:
    0 0 30px rgba(125,230,255,.12),
    0 0 80px rgba(185,156,255,.1);
}

.signature {
  margin-top: clamp(10px, 1.7vh, 20px);
  font-size: clamp(1rem, min(2.2vw, 2.4vh), 1.34rem);
  color: #d9e3f4;
  font-weight: 700;
}

.typewriter-line {
  margin-top: clamp(8px, 1.25vh, 15px);
  min-height: 1.35em;
  font-size: clamp(1.15rem, min(3vw, 3.2vh), 2.3rem);
  font-weight: 900;
  letter-spacing: -.04em;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.type-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 5px;
  vertical-align: -.08em;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: blink .8s steps(1) infinite;
}

.lead {
  max-width: 720px;
  margin-top: clamp(10px, 1.4vh, 18px);
  color: var(--muted);
  font-size: clamp(.84rem, min(1.7vw, 1.9vh), 1.08rem);
  line-height: 1.55;
}

.coming-soon {
  width: fit-content;
  margin-top: clamp(10px, 1.6vh, 20px);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(6,11,22,.38);
  backdrop-filter: blur(18px);
  color: var(--muted);
  font-size: clamp(.78rem, 1.45vh, .92rem);
}

.pulse-ring {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 18px var(--green);
  animation: pulse 1.7s ease-in-out infinite;
}

.actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(12px, 1.8vh, 24px);
}

.button {
  min-height: clamp(40px, 5.3vh, 48px);
  padding: 0 21px;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
  transition: transform .22s ease, border-color .22s ease;
}

.button::before {
  content: "";
  position: absolute;
  inset: -150% 45% -150% -55%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transition: transform .65s ease;
}

.button:hover {
  transform: translateY(-3px);
}

.button:hover::before {
  transform: translateX(260%) rotate(18deg);
}

.button span {
  position: relative;
  z-index: 1;
}

.button.primary {
  color: #031019;
  background: linear-gradient(135deg, var(--green), var(--cyan), var(--violet));
  box-shadow: 0 0 32px rgba(125,230,255,.2);
}

.button.secondary {
  border: 1px solid var(--border);
  background: rgba(8,15,27,.4);
  backdrop-filter: blur(16px);
}

.motto {
  margin-top: clamp(10px, 1.5vh, 18px);
  color: rgba(219,228,242,.74);
  font-size: clamp(.76rem, 1.4vh, .9rem);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 800;
}

.site-footer {
  min-height: clamp(44px, 7vh, 66px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: rgba(213,223,240,.64);
  font-size: clamp(.72rem, 1.35vh, .88rem);
}

.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(17,32,55,.14), transparent 45%),
    #010206;
  transition: opacity .75s ease, visibility .75s ease;
}

.boot-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.boot-content {
  width: min(520px, calc(100% - 48px));
  text-align: center;
}

.boot-logo {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  border-radius: 50%;
  color: #031019;
  font-weight: 950;
  background: linear-gradient(135deg, var(--green), var(--cyan), var(--violet));
  box-shadow:
    0 0 24px rgba(125,230,255,.38),
    0 0 85px rgba(185,156,255,.18);
  animation: breathe 2.8s ease-in-out infinite;
}

.terminal {
  min-height: 1.5em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(.78rem, 2vw, .96rem);
  color: #b9c8dc;
}

.terminal-prefix {
  color: var(--green);
  margin-right: 8px;
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  margin-left: 5px;
  vertical-align: -.13em;
  background: var(--cyan);
  animation: blink .7s steps(1) infinite;
}

.progress {
  width: 100%;
  height: 3px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--cyan), var(--violet));
  box-shadow: 0 0 15px rgba(125,230,255,.5);
  transition: width .35s ease;
}

@keyframes drift {
  0% { transform: translate3d(-2%, -2%, 0) rotate(-9deg) scale(1); }
  100% { transform: translate3d(5%, 4%, 0) rotate(7deg) scale(1.08); }
}

@keyframes breathe {
  0%,100% { transform: scale(.98); filter: brightness(.95); }
  50% { transform: scale(1.035); filter: brightness(1.08); }
}

@keyframes pulse {
  0%,100% { transform: scale(.85); opacity: .55; }
  50% { transform: scale(1.1); opacity: 1; }
}

@keyframes orbitOne {
  from { transform: rotate(0deg) translateX(48px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(48px) rotate(-360deg); }
}

@keyframes orbitTwo {
  from { transform: rotate(0deg) translateX(39px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(39px) rotate(-360deg); }
}

@keyframes blink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}

@media (max-width: 720px) {
  .brand-name { display: none; }

  .site-header {
    width: min(100% - 28px, 1200px);
  }

  .hero {
    padding: 0 14px;
  }

  .hero-content {
    max-height: calc(100svh - 105px);
  }

  .site-footer {
    width: min(100% - 28px, 1200px);
    min-height: 44px;
    font-size: .69rem;
  }

  .site-footer span:last-child {
    text-align: right;
  }

  .planet-one {
    opacity: .28;
  }

  .aurora {
    opacity: .21;
  }
}

@media (max-height: 700px) {
  .orbital-logo {
    display: none;
  }

  .site-header {
    min-height: 54px;
  }

  .site-footer {
    min-height: 40px;
  }

  .mission-label {
    margin-bottom: 5px;
  }
}

@media (max-height: 580px) {
  .lead {
    display: none;
  }

  .motto {
    display: none;
  }

  .coming-soon {
    margin-top: 8px;
  }

  .actions {
    margin-top: 10px;
  }
}

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