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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #061a48;
  font-family: system-ui, -apple-system, sans-serif;
  color: #e8eaf0;
  gap: 2rem;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  background: #0a1630;
  border-bottom: 1px solid #1e2d55;
}

nav a {
  color: #7a8ab0;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

nav a:hover, nav a.active { color: #e8eaf0; }

svg { overflow: visible; }

@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes fill   { from { width: 0; } to { width: 120px; } }

.gear  { animation: spin 3s linear infinite; transform-origin: 110px 30px; }
.gear2 { animation: spin 3s linear infinite reverse; transform-origin: 154px 44px; }
.cone  { animation: bounce 2s ease-in-out infinite; }
.cone2 { animation: bounce 2s ease-in-out infinite; animation-delay: 0.3s; }
.stripe  { animation: pulse 2s ease-in-out infinite; }
.stripe2 { animation: pulse 2s ease-in-out infinite; animation-delay: 0.3s; }
.bar-fill { animation: fill 2s ease-out forwards, pulse 2s 2s ease-in-out infinite; }

h1 {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  animation: pulse 2.5s ease-in-out infinite;
}

p { font-size: 1rem; color: #7a8ab0; margin-top: 0.5rem; }