:root {
  --navy: #2f5a8f;
  --navy-soft: #c9d6e6;
  --bg: #ffffff;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--navy);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.orbit {
  position: absolute;
  width: min(92vmin, 640px);
  height: auto;
  animation: spin 90s linear infinite;
}

.orbit circle {
  fill: none;
  stroke: var(--navy-soft);
  stroke-width: 1;
}

.orbit .dot { fill: var(--navy); stroke: none; }
.orbit .d2 { opacity: .6; }
.orbit .d3 { opacity: .35; }

.brand {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  animation: rise 1.2s ease-out both;
}

.logo { width: clamp(64px, 14vmin, 104px); height: auto; }

.name {
  font-size: clamp(2.2rem, 7vmin, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}

.tag {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  padding-left: .42em;
  opacity: .7;
}

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

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit, .brand { animation: none; }
}