:root {
  --bg:      #01020c;
  --fg:      #eef0f8;
  --fg-dim:  #6e7590;
  --accent:  #8aabff;
  --display: "Space Grotesk", system-ui, sans-serif;
  --sans:    "Inter", system-ui, sans-serif;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: var(--sans);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

/* ── Background: NASA/ESO Milky Way — public domain ── */
/* Spitzer Space Telescope infrared panorama of the Milky Way    */
.bg-space {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('milkyway.jpg');
  background-size: cover;
  background-position: center center;
  will-change: transform;
  transform: scale(1.14);
  transition: transform 0s;
}

/* ── Star canvas (twinkling overlay) ── */
#stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Dark vignette — deepens edges, focuses center ── */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 28%,
    rgba(1, 2, 12, 0.50) 65%,
    rgba(1, 2, 12, 0.80) 100%
  );
}

/* ── Deep blue color grade (pure blue, no red) ── */
.color-grade {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 10, 50, 0.50) 0%, rgba(0, 8, 35, 0.15) 50%, rgba(0, 10, 55, 0.50) 100%),
    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(0, 25, 90, 0.25), transparent 75%);
}

/* ── Full-screen layout ── */
.stage {
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* ── Header ── */
.site-header {
  width: 100%;
  padding: 38px 52px;
  display: flex;
  justify-content: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.40em;
  color: rgba(238, 240, 248, 0.55);
  white-space: nowrap;
}

.logo-mark {
  color: var(--accent);
  font-size: 10px;
  text-shadow: 0 0 16px rgba(138, 171, 255, 0.85);
  animation: markPulse 5s ease-in-out infinite;
}

@keyframes markPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

/* ── Hero ── */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

/* ── Orbit ring ── */
.ring {
  position: relative;
  width: 188px;
  height: 188px;
  margin-bottom: 32px;
  flex-shrink: 0;
}

.ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(138, 171, 255, 0.20);
}

.ring::after {
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: 50%;
  border: 1px dashed rgba(138, 171, 255, 0.10);
  animation: spin 90s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.ring-dot {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 26px rgba(138, 171, 255, 0.55);
  top: 50%; left: 50%;
  transform-origin: -87px -3.5px;
  animation: orbit 15s linear infinite;
}

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

/* ── Coming Soon title ── */
.title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(42px, 6.5vw, 90px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.t-line {
  display: block;
  animation: riseIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.t-coming {
  color: #ffffff;
  text-shadow: 0 2px 40px rgba(138, 171, 255, 0.18);
}

.t-soon {
  font-style: normal;
  font-weight: 300;
  color: #c8d4f8;
  animation-delay: 0.14s;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* ── Company intro ── */
.intro {
  margin-top: 36px;
  max-width: 52ch;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(238, 240, 248, 0.52);
  letter-spacing: 0.01em;
  animation: riseIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both;
}

/* ── Footer ── */
.site-footer {
  width: 100%;
  padding: 26px 52px;
  border-top: 1px solid rgba(138, 171, 255, 0.07);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-label {
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 5px;
}

.footer-email {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  color: rgba(238, 240, 248, 0.80);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.22s, border-color 0.22s;
}

.footer-email:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.footer-copy {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  opacity: 0.55;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .site-header  { padding: 24px; }
  .site-footer  { padding: 20px 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; }

  .ring { width: 130px; height: 130px; margin-bottom: 20px; }
  .ring::after { inset: 16px; }
  .ring-dot { transform-origin: -59px -3.5px; }
  @keyframes orbit {
    from { transform: rotate(0deg)   translateX(-62px); }
    to   { transform: rotate(360deg) translateX(-62px); }
  }

  .intro { font-size: 14px; }
}