/* ───────── Reset & base ───────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #06081a;
  --ink: #eef1ff;
  --ink-faint: #6b7299;

  --brand-1: #1e2bd6; /* deep royal */
  --brand-2: #4f7bff; /* mid blue   */
  --brand-3: #5ed7ff; /* cyan       */
  --brand-4: #7a52ff; /* violet     */

  --font-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
  position: relative;
}

img {
  display: block;
  max-width: 100%;
}

/* ───────── Aurora background ───────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(
      ellipse at top,
      rgba(30, 43, 214, 0.35),
      transparent 60%
    ),
    linear-gradient(180deg, #06081a 0%, #04061a 60%, #020416 100%);
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.65;
  will-change: transform;
}

.orb-1 {
  width: 620px;
  height: 620px;
  left: -120px;
  top: -160px;
  background: radial-gradient(circle, var(--brand-1), transparent 65%);
  animation: drift1 22s ease-in-out infinite alternate;
}

.orb-2 {
  width: 540px;
  height: 540px;
  right: -140px;
  top: 10%;
  background: radial-gradient(circle, var(--brand-4), transparent 65%);
  animation: drift2 26s ease-in-out infinite alternate;
}

.orb-3 {
  width: 700px;
  height: 700px;
  left: 30%;
  bottom: -260px;
  background: radial-gradient(circle, var(--brand-3), transparent 70%);
  opacity: 0.4;
  animation: drift3 30s ease-in-out infinite alternate;
}

@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(60px, 40px, 0) scale(1.08); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-50px, 60px, 0) scale(1.06); }
}
@keyframes drift3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-40px, -50px, 0) scale(1.05); }
}

/* Subtle grain so the gradients don't band */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ───────── Layout ───────── */
.page {
  min-height: 100dvh;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 28px 36px;
  display: flex;
  flex-direction: column;
}

/* ───────── Hero ───────── */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 44px;
  padding: 48px 0;
}

.mark-wrap {
  position: relative;
}

.mark-wrap::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle,
    rgba(94, 215, 255, 0.32),
    transparent 60%
  );
  filter: blur(50px);
  z-index: -1;
}

.mark {
  width: clamp(140px, 22vw, 220px);
  height: auto;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.wordmark {
  width: clamp(260px, 38vw, 460px);
  height: auto;
  /* Wordmark ships in dark navy on transparent — invert to white for the
     dark background, with a soft cyan halo so it sits in the lighting. */
  filter: brightness(0) invert(1)
    drop-shadow(0 0 28px rgba(94, 215, 255, 0.22));
  -webkit-filter: brightness(0) invert(1)
    drop-shadow(0 0 28px rgba(94, 215, 255, 0.22));
}

/* ───────── Footer ───────── */
.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ink-faint);
  padding-top: 24px;
}

/* ───────── Responsive ───────── */
@media (max-width: 640px) {
  .page {
    padding: 22px 20px 28px;
  }

  .hero {
    gap: 36px;
    padding: 36px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb,
  .mark {
    animation: none !important;
  }
}