@import url("base.css");

:root {
  --font-display: "Syne", system-ui, sans-serif;
  --bg: #0c0c10;
  --text: #ffffff;
  --text-muted: #9ca3af;
  --accent: #22d3ee;
  --glow: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
  --grid-line: rgba(255, 255, 255, 0.03);
  --badge-bg: rgba(255, 255, 255, 0.06);
  --badge-text: #e5e7eb;
  --badge-border: rgba(255, 255, 255, 0.12);
  --progress-track: rgba(255, 255, 255, 0.08);
  --progress: 78%;
}

.bg-mesh {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(at 20% 30%, rgba(139, 92, 246, 0.25) 0%, transparent 50%),
    radial-gradient(at 80% 20%, rgba(34, 211, 238, 0.2) 0%, transparent 45%),
    radial-gradient(at 60% 80%, rgba(244, 114, 182, 0.2) 0%, transparent 45%),
    var(--bg);
  z-index: 0;
}

.bg-grid, .bg-glow, .bg-icons { display: none; }

h1.logo-wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 14vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: center;
  gap: 0.02em;
  animation: fade-up 0.8s var(--ease-out) both;
}

.logo-wordmark .d { color: #8b5cf6; }
.logo-wordmark .b { color: #3b82f6; }
.logo-wordmark .r { color: #22c55e; }
.logo-wordmark .o { color: #f97316; }
.logo-wordmark .s { color: #ec4899; }

.subtitle {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  animation: fade-up 0.8s 0.08s var(--ease-out) both;
}

.progress-fill {
  background: linear-gradient(90deg, #8b5cf6, #3b82f6, #22c55e, #f97316, #ec4899);
  background-size: 200% 100%;
  animation: progress-shimmer 2.5s ease-in-out infinite, rainbow-slide 4s linear infinite;
}

@keyframes rainbow-slide {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

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