/* The public landing page (signed out at /). From the teaser (site/public/index.html); kept as a
   file so the page needs no inline style under the strict CSP. */
/* A night sky with one firefly. Colours are tokens; motion respects reduced-motion. */
:root {
  --sky-top: #0b1020;
  --sky-low: #16213e;
  --ink: #eef1fa;
  --dim: #9aa6c4;
  --glow: #ffd166;
  --glow-hot: #fff2c4;
  --card: rgba(255, 255, 255, 0.045);
  --edge: rgba(255, 255, 255, 0.09);
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  background: radial-gradient(120% 90% at 50% 0%, var(--sky-low) 0%, var(--sky-top) 60%) fixed, var(--sky-top);
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}
.stars { position: fixed; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .5; }
main { position: relative; max-width: 640px; width: 100%; text-align: center; display: grid; gap: 28px; }
.mark { width: 132px; height: 132px; margin: 0 auto; position: relative; }
.mark svg { width: 100%; height: 100%; overflow: visible; }
.fly { transform-origin: 66px 66px; animation: drift 9s ease-in-out infinite; }
.halo { animation: breathe 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes drift { 0%,100% { transform: translate(0,0); } 25% { transform: translate(6px,-5px); } 50% { transform: translate(-3px,-9px); } 75% { transform: translate(-6px,-2px); } }
@keyframes breathe { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: .75; transform: scale(1.08); } }
h1 { margin: 0; font-size: clamp(44px, 11vw, 76px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
h1 span { color: var(--glow); text-shadow: 0 0 24px rgba(255, 209, 102, .45); }
.lede { margin: 0 auto; max-width: 34ch; font-size: clamp(18px, 4.4vw, 22px); line-height: 1.45; color: var(--ink); }
.sub { margin: -12px auto 0; max-width: 46ch; color: var(--dim); font-size: 16px; line-height: 1.55; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.item { background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 18px 10px 14px; display: grid; gap: 8px; justify-items: center; }
.item svg { width: 34px; height: 34px; }
.item b { font-size: 15px; font-weight: 600; }
.item small { color: var(--dim); font-size: 13px; line-height: 1.35; }
.soon { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--edge); color: var(--dim); font-size: 14px; }
.soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); animation: breathe 3.2s ease-in-out infinite; }
footer { color: var(--dim); font-size: 13px; opacity: .8; }
@media (max-width: 460px) { .trio { grid-template-columns: 1fr; } .item { grid-template-columns: 34px 1fr; justify-items: start; text-align: left; padding: 14px 16px; column-gap: 14px; } .item svg { grid-row: span 2; } }
@media (prefers-reduced-motion: reduce) { .fly, .halo, .soon::before { animation: none; } }
.signin { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.signin a.button { display: inline-block; padding: 10px 22px; border-radius: 999px; background: var(--glow); color: #0b1020; font-weight: 600; text-decoration: none; }
.signin a.button:focus-visible { outline: 2px solid var(--glow-hot); outline-offset: 3px; }
.sub a { color: inherit; }