html, body { margin: 0; height: 100%; background: #000; color: #fff; }
body { font-family: "Inter", system-ui, sans-serif; }
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
}
.hero {
  min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  display: grid; place-items: center;
  padding: 96px 16px;
  text-align: center;
}
.brand { display: inline-flex; cursor: pointer; }
svg { width: 52px; height: auto; overflow: visible; display: block; }
.logo {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: rotate(30deg);
}
/* Same motion as SplashView: from 30°, gentle 360° in 1.8s (ease 0.42/0/0.58/1). */
.logo.spinning { animation: spin 1.8s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
@keyframes spin {
  from { transform: rotate(30deg); }
  to   { transform: rotate(390deg); }
}
.motto {
  margin: 0;
  max-width: 100%;
  font-weight: 700;
  font-size: clamp(28px, 8vw, 88px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.tagline {
  margin: 0.6em 0 0;
  font-weight: 400;
  font-size: clamp(18px, 3vw, 32px);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 480px) { header { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .logo.spinning { animation: none; } }