/* Chainiac holding page: one stylesheet for the home page and the two legal pages. No scripts, no cookies, no trackers. */
:root {
  --ink: #fff;
  --ink-soft: rgba(255, 255, 255, 0.78);
  --night: #170a38;
  --mint: #3dffb8;
  --mint-deep: #20e8a0;
  --purple: #7a1fe8;
  --violet: #a46bff;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--night);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- the moving mint and purple colour behind the glass ---------- */
.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #2a1060 0%, var(--night) 70%); }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 1; will-change: transform; }
.b1 { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle at 35% 35%, var(--purple) 0%, var(--purple) 20%, transparent 70%); animation: drift1 22s ease-in-out infinite alternate; }
.b2 { width: 56vmax; height: 56vmax; right: -16vmax; top: 4vmax; background: radial-gradient(circle at 60% 40%, var(--mint) 0%, var(--mint) 18%, transparent 70%); animation: drift2 26s ease-in-out infinite alternate; }
.b3 { width: 58vmax; height: 58vmax; left: 8vmax; bottom: -30vmax; background: radial-gradient(circle at 50% 50%, var(--violet), transparent 66%); animation: drift3 30s ease-in-out infinite alternate; }
.b4 { width: 44vmax; height: 44vmax; right: 4vmax; bottom: -16vmax; background: radial-gradient(circle at 50% 50%, var(--mint-deep) 0%, var(--mint-deep) 16%, transparent 68%); animation: drift4 24s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(34vmax, 22vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-30vmax, 26vmax) scale(0.9); } }
@keyframes drift3 { to { transform: translate(30vmax, -30vmax) scale(1.2); } }
@keyframes drift4 { to { transform: translate(-36vmax, -20vmax) scale(1.1); } }

/* ---------- frosted glass ---------- */
.glass {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
  background-color: rgba(30, 12, 70, 0.34); /* a tint under the frost keeps white text readable over the bright mint */
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 30px 80px rgba(8, 2, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  border-radius: 36px;
}

main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px 24px; }

/* ---------- home page ---------- */
.hero { width: min(560px, 100%); padding: 48px 32px 44px; text-align: center; }
.logo { width: 92px; height: 92px; border-radius: 22.4%; box-shadow: 0 14px 34px rgba(8, 2, 30, 0.45); display: block; margin: 0 auto 22px; }
.beta { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #0e3d2c; background: linear-gradient(90deg, var(--mint), #b9ffe3); box-shadow: 0 6px 20px rgba(67, 245, 180, 0.35); }
h1 { margin: 18px 0 8px; font-size: clamp(40px, 9vw, 60px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; text-shadow: 0 2px 24px rgba(20, 5, 60, 0.45); }
.soon { margin: 0; font-size: clamp(20px, 4.6vw, 26px); font-weight: 700; color: var(--ink); text-shadow: 0 2px 18px rgba(20, 5, 60, 0.5); }
.note { margin: 16px auto 0; max-width: 34ch; color: var(--ink-soft); font-size: 15px; }

/* ---------- footer ---------- */
footer { position: relative; z-index: 1; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); text-align: center; font-size: 14px; color: var(--ink-soft); }
footer nav { display: inline-flex; gap: 22px; margin-left: 14px; }
footer a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 6px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }
footer a:hover, footer a:focus-visible { border-bottom-color: var(--mint); outline: none; }
@media (max-width: 520px) { footer nav { display: flex; justify-content: center; margin: 8px 0 0; } }

/* ---------- legal pages ---------- */
.doc { width: min(780px, 100%); padding: 40px 36px 44px; align-self: flex-start; }
.doc .back { display: inline-block; margin-bottom: 18px; color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 14px; }
.doc .back:hover { color: var(--ink); }
.doc h1 { font-size: clamp(30px, 6vw, 40px); margin: 0 0 6px; }
.doc .updated { margin: 0 0 22px; color: var(--ink-soft); font-size: 14px; }
.doc h2 { margin: 30px 0 8px; font-size: 20px; letter-spacing: -0.01em; }
.doc p, .doc li { color: rgba(255, 255, 255, 0.9); }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 12px; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc a { color: var(--mint); }
body.legal main { align-items: flex-start; }
@media (max-width: 520px) { .doc { padding: 28px 22px 32px; border-radius: 28px; } .hero { padding: 40px 22px 36px; } }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background-color: rgba(30, 12, 70, 0.78); } }