.page {
  position: relative;
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  min-height: 100svh;
  isolation: isolate;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
  opacity: 0.5;
  transform: translate3d(calc(var(--mx) * -6px), calc(var(--my) * -6px), 0);
}

.bg-aurora {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(110px);
  mix-blend-mode: screen;
  will-change: transform;
}

.bg-aurora--one {
  top: -18%;
  left: -8%;
  background: radial-gradient(circle at 30% 30%, var(--glow-strong), transparent 70%);
  animation: auroraDriftA 26s var(--ease-in-out) infinite alternate;
}

.bg-aurora--two {
  top: 8%;
  right: -14%;
  background: radial-gradient(circle at 60% 40%, var(--indigo-400) 0%, transparent 65%);
  opacity: 0.35;
  animation: auroraDriftB 32s var(--ease-in-out) infinite alternate;
}

.bg-aurora--three {
  bottom: -22%;
  left: 22%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle at 50% 50%, var(--glow-soft), transparent 70%);
  opacity: 0.5;
  animation: auroraDriftC 22s var(--ease-in-out) infinite alternate;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}


.site-header {
  position: relative;
  z-index: 10;
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
}

.hero-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-8);
}

.hero-content {
  max-width: 640px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 360px;
}

.hero-inner--center {
  position: relative;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  max-width: 720px;
}

.hero-visual--ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.site-footer {
  position: relative;
  z-index: 10;
}

.footer-inner {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-soft);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}