:root {
  color-scheme: dark;
  --bg: #03050d;
  --bg-soft: #070b18;
  --surface: #0d1424;
  --surface-strong: #121c31;
  --text: #f7f9ff;
  --muted: #9aa6bf;
  --muted-strong: #d8def0;
  --line: rgba(255, 255, 255, 0.12);
  --brand: #7785ff;
  --brand-strong: #d9defe;
  --brand-soft: rgba(119, 133, 255, 0.17);
  --glow-blue: rgba(119, 133, 255, 0.30);
  --glow-violet: rgba(180, 127, 255, 0.22);
  --glow-cyan: rgba(57, 224, 255, 0.13);
  --glow-gold: rgba(255, 204, 110, 0.16);
  --firefly-core: rgba(255, 255, 224, 0.98);
  --firefly-gold: rgba(255, 218, 118, 0.82);
  --firefly-blue: rgba(154, 176, 255, 0.62);
  --ink: #f7f9ff;
  --white: #ffffff;
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2.2rem;
  --shadow-sm: 0 18px 54px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --shadow-md: 0 34px 100px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --max: 1160px;
  --header-height: 76px;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #03050d;
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(58, 73, 156, 0.30), transparent 38rem),
    radial-gradient(ellipse at 8% 18%, rgba(20, 28, 67, 0.76), transparent 35rem),
    linear-gradient(180deg, #03050d 0%, #060a15 34%, #040712 68%, #080512 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at 11% 16%, var(--glow-blue), transparent 29rem),
    radial-gradient(circle at 88% 11%, var(--glow-violet), transparent 32rem),
    radial-gradient(circle at 78% 66%, var(--glow-cyan), transparent 36rem),
    radial-gradient(circle at 19% 84%, var(--glow-gold), transparent 30rem),
    radial-gradient(circle at 52% 47%, rgba(255, 255, 255, 0.026), transparent 25rem);
  opacity: 0.98;
  transform: translate3d(0, 0, 0) scale(1.04);
  animation: aurora-flow 28s ease-in-out infinite alternate;
}

body::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.020) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.055), transparent 0.08rem),
    radial-gradient(circle at 80% 18%, rgba(255, 210, 126, 0.10), transparent 0.08rem),
    radial-gradient(circle at 62% 76%, rgba(143, 157, 255, 0.09), transparent 0.08rem);
  background-size: 4.5rem 4.5rem, 4.5rem 4.5rem, 9rem 9rem, 13rem 13rem, 16rem 16rem;
  background-position: 0 0, 0 0, 0 0, 2rem 4rem, 6rem 1rem;
  opacity: 0.34;
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  animation: starfield-drift 46s linear infinite;
}

.firefly-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  contain: strict;
}

.firefly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--firefly-core) 0 14%, hsl(var(--hue) 100% 78% / 0.94) 30%, hsl(var(--hue) 100% 64% / 0.28) 58%, transparent 72%);
  box-shadow:
    0 0 calc(var(--size) * 2.8) hsl(var(--hue) 100% 72% / 0.85),
    0 0 calc(var(--size) * 7) hsl(var(--hue) 100% 62% / 0.42),
    0 0 calc(var(--size) * 12) hsl(var(--hue) 100% 68% / 0.20);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.25);
  filter: blur(0.1px);
  animation: firefly-float var(--duration) ease-in-out var(--delay) infinite;
  will-change: transform, opacity;
}

.firefly:nth-child(3n) {
  filter: blur(0.25px);
}

.firefly:nth-child(4n) {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 12%, var(--firefly-blue) 32%, rgba(119, 133, 255, 0.20) 58%, transparent 74%);
}

body.is-menu-open {
  overflow: hidden;
}

main,
.site-footer {
  position: relative;
  z-index: 2;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1, h2, h3 {
  letter-spacing: -0.04em;
  line-height: 1.05;
}

p {
  color: var(--muted);
}

ul {
  margin: 0;
  padding: 0;
}

main:focus {
  outline: none;
}

::selection {
  background: var(--brand);
  color: #03050d;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  transform: translateY(-180%);
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-sm);
}

.skip-link:focus {
  transform: translateY(0);
}

[hidden] {
  display: none !important;
}

@keyframes aurora-flow {
  0% {
    transform: translate3d(-1.2rem, -0.8rem, 0) scale(1.04);
  }

  45% {
    transform: translate3d(1rem, 0.9rem, 0) scale(1.08);
  }

  100% {
    transform: translate3d(1.4rem, -0.7rem, 0) scale(1.05);
  }
}

@keyframes starfield-drift {
  0% {
    background-position: 0 0, 0 0, 0 0, 2rem 4rem, 6rem 1rem;
    opacity: 0.24;
  }

  50% {
    opacity: 0.38;
  }

  100% {
    background-position: 4.5rem 4.5rem, -4.5rem 4.5rem, 9rem 11rem, -10rem 17rem, 18rem -8rem;
    opacity: 0.28;
  }
}

@keyframes firefly-float {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.18);
  }

  8% {
    opacity: calc(var(--opacity) * 0.45);
  }

  17% {
    opacity: var(--opacity);
    transform: translate3d(calc(var(--dx) * 0.18), calc(var(--dy) * 0.18), 0) scale(0.95);
  }

  31% {
    opacity: calc(var(--opacity) * 0.16);
    transform: translate3d(calc(var(--dx) * 0.44), calc(var(--dy) * 0.36), 0) scale(0.58);
  }

  46% {
    opacity: calc(var(--opacity) * 0.92);
    transform: translate3d(calc(var(--dx) * 0.72), calc(var(--dy) * 0.62), 0) scale(1.18);
  }

  63% {
    opacity: calc(var(--opacity) * 0.24);
  }

  78% {
    opacity: calc(var(--opacity) * 0.76);
    transform: translate3d(calc(var(--dx2) * 0.82), calc(var(--dy2) * 0.80), 0) scale(0.86);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--dx2), var(--dy2), 0) scale(0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .firefly {
    animation: none;
  }

  .firefly-layer {
    display: none;
  }
}