:root {
  --bg: #050814;
  --bg-2: #0a1024;
  --ink: #eef2ff;
  --ink-2: #a9b4d0;
  --ink-3: #6b7796;
  --line: rgba(160, 180, 255, 0.12);
  --glass: rgba(18, 26, 52, 0.55);
  --glass-strong: rgba(22, 32, 64, 0.78);
  --sky: #38bdf8;
  --violet: #8b5cf6;
  --teal: #2dd4bf;
  --rose: #fb7185;
  --amber: #fbbf24;
  --ok: #34d399;
  --radius: 18px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 8px; }

/* Aurora sky shared by both pages */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1200px 600px at 50% 120%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(900px 500px at 50% -10%, rgba(139, 92, 246, 0.14), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.aurora {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  filter: blur(80px); opacity: 0.35; mix-blend-mode: screen;
  animation: drift 26s ease-in-out infinite alternate;
}
.aurora.a1 { background: radial-gradient(circle, var(--sky), transparent 65%); top: -30vmax; left: -20vmax; }
.aurora.a2 { background: radial-gradient(circle, var(--violet), transparent 65%); top: -20vmax; right: -30vmax; animation-duration: 32s; animation-delay: -8s; }
.aurora.a3 { background: radial-gradient(circle, var(--teal), transparent 65%); bottom: -40vmax; left: 10vmax; opacity: 0.22; animation-duration: 38s; animation-delay: -15s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vmax, 4vmax, 0) scale(1.1); }
  100% { transform: translate3d(-4vmax, 8vmax, 0) scale(0.95); }
}

/* Drifting cloud banks */
.clouds { position: absolute; inset: 0; }
.cloud {
  position: absolute; left: -40vw; width: 60vw; height: 18vw; min-height: 120px;
  background: radial-gradient(closest-side, rgba(200, 220, 255, 0.10), transparent);
  border-radius: 50%; filter: blur(24px);
  animation: sail linear infinite;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(210, 225, 255, 0.10), transparent);
}
.cloud::before { width: 55%; height: 140%; left: 15%; top: -45%; }
.cloud::after { width: 45%; height: 120%; left: 48%; top: -30%; }
.cloud.c1 { top: 8%; animation-duration: 90s; }
.cloud.c2 { top: 38%; animation-duration: 130s; animation-delay: -60s; transform: scale(1.4); opacity: 0.8; }
.cloud.c3 { top: 70%; animation-duration: 110s; animation-delay: -30s; opacity: 0.6; }
.cloud.c4 { top: 55%; animation-duration: 160s; animation-delay: -100s; transform: scale(0.8); }
@keyframes sail { from { translate: 0 0; } to { translate: 180vw 0; } }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: 0.02em; }
.brand img { width: 30px; height: 30px; }
.brand span b { font-weight: 650; background: linear-gradient(90deg, var(--sky), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}