/* /hello: launch teaser page. */
.hello-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass);
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.hello-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; animation: dot-blink 1.6s ease-in-out infinite; }
.hello-title { margin: 0; max-width: 14ch; font-size: clamp(40px, min(9.5vw, 10vh), 112px); line-height: .98; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.hello-title .gradient-text { background-size: 200% 100%; animation: shine 6s ease-in-out infinite alternate; }
.hello-lead { margin: 22px 0 0; max-width: 40ch; font-size: clamp(16px, 2.4vw, 21px); line-height: 1.5; color: var(--muted); text-wrap: balance; }
.hello-lead strong { color: var(--text); font-weight: 600; }

/* Staggered entrance */
.reveal { animation: reveal .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 120ms); }

@keyframes reveal { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } }
@keyframes shine { to { background-position: 100% 0; } }
@keyframes dot-blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .reveal, .hello-title .gradient-text, .hello-eyebrow-dot { animation: none; } }