@import url("base.css");

:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --bg: #061418;
  --text: #e8f4f8;
  --text-muted: #6b8f9a;
  --accent: #2dd4bf;
  --accent-2: #38bdf8;
  --glow: radial-gradient(circle, rgba(45, 212, 191, 0.3) 0%, transparent 70%);
  --grid-line: rgba(45, 212, 191, 0.06);
  --badge-bg: rgba(45, 212, 191, 0.1);
  --badge-text: #5eead4;
  --badge-border: rgba(45, 212, 191, 0.25);
  --progress-track: rgba(255, 255, 255, 0.06);
  --progress: 70%;
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 0.35rem;
  animation: fade-up 0.8s 0.05s var(--ease-out) both;
}

.globe-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(100vmin, 500px);
  height: min(100vmin, 500px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  color: var(--accent);
  opacity: 0.15;
}

.globe {
  width: 100%;
  height: 100%;
  animation: spin-slow 60s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.routes {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: -1rem 0 1.5rem;
  font-size: 1.5rem;
  color: var(--accent);
  opacity: 0.5;
  animation: fade-up 0.8s 0.35s var(--ease-out) both;
}

.routes span {
  animation: route-move 2s ease-in-out infinite;
}

.routes span:nth-child(2) { animation-delay: 0.3s; }
.routes span:nth-child(3) { animation-delay: 0.6s; }

@keyframes route-move {
  0%, 100% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(8px); opacity: 1; }
}

.domain {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  opacity: 0.6;
}