:root {
  --amber: #F6A623;
  --amber-soft: #ffc777;
  --cream: #FFF4E0;
  --bg-1: #1c1407;
  --bg-2: #0e0a04;
  --muted: rgba(255, 244, 224, 0.72);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--cream);
  background: radial-gradient(circle at 50% 28%, var(--bg-1) 0%, var(--bg-2) 75%);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
}

.card {
  width: 100%;
  max-width: 460px;
  text-align: center;
}

/* mic glyph — gentle breathing glow */
.logo {
  display: inline-block;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px rgba(246, 166, 35, 0.45));
  animation: glow 2.8s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 8px rgba(246, 166, 35, 0.35)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(246, 166, 35, 0.65)); }
}

h1 {
  margin: 0;
  font-size: 2.8rem;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.tagline {
  margin: 6px 0 28px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--amber-soft);
}

/* animated soundwave equalizer */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 72px;
  margin: 8px auto 28px;
}
.wave span {
  width: 7px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  animation: bounce 1.2s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { height: 12px; opacity: 0.6; }
  50%      { height: 64px; opacity: 1; }
}
/* stagger each bar so it reads as a travelling wave */
.wave span:nth-child(1)  { animation-delay: -1.10s; }
.wave span:nth-child(2)  { animation-delay: -0.95s; }
.wave span:nth-child(3)  { animation-delay: -0.80s; }
.wave span:nth-child(4)  { animation-delay: -0.65s; }
.wave span:nth-child(5)  { animation-delay: -0.50s; }
.wave span:nth-child(6)  { animation-delay: -0.35s; }
.wave span:nth-child(7)  { animation-delay: -0.20s; }
.wave span:nth-child(8)  { animation-delay: -0.35s; }
.wave span:nth-child(9)  { animation-delay: -0.50s; }
.wave span:nth-child(10) { animation-delay: -0.65s; }
.wave span:nth-child(11) { animation-delay: -0.80s; }
.wave span:nth-child(12) { animation-delay: -0.95s; }
.wave span:nth-child(13) { animation-delay: -1.10s; }

.soon {
  display: inline-block;
  margin: 0;
  padding: 8px 18px;
  border: 1px solid rgba(246, 166, 35, 0.5);
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--amber-soft);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 166, 35, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(246, 166, 35, 0.12); }
}

.foot {
  margin-top: 44px;
  font-size: 0.85rem;
  color: rgba(255, 244, 224, 0.45);
}
.foot a {
  color: rgba(255, 244, 224, 0.7);
  text-decoration: none;
}
.foot a:hover { text-decoration: underline; }

/* document pages (privacy policy, etc.) — scrollable, left-aligned */
body.doc {
  display: block;
  place-items: initial;
  overflow: auto;
  background-attachment: fixed;
}
.policy {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 24px 72px;
  text-align: left;
  line-height: 1.65;
}
.policy .back {
  display: inline-block;
  margin-bottom: 24px;
  color: var(--amber-soft);
  text-decoration: none;
  font-weight: 600;
}
.policy .back:hover { text-decoration: underline; }
.policy h1 { font-size: 2rem; }
.policy h2 {
  margin-top: 2em;
  font-size: 1.2rem;
  color: var(--amber-soft);
}
.policy .updated {
  margin-top: -4px;
  color: rgba(255, 244, 224, 0.5);
  font-size: 0.9rem;
}
.policy .lead { color: var(--cream); }
.policy p, .policy li { color: var(--muted); }
.policy ul { padding-left: 1.2em; }
.policy li { margin: 6px 0; }
.policy a { color: var(--amber-soft); }
.policy .foot { margin-top: 56px; text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .logo, .wave span, .soon { animation: none; }
}

@media (max-width: 460px) {
  h1 { font-size: 2.2rem; }
}