@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Press+Start+2P&display=swap");

:root {
  --bg: #fff7d8;
  --bg-2: #f6fbff;
  --surface: #ffffff;
  --surface-2: #e8f7ff;
  --ink: #151537;
  --muted: #4f5478;
  --muted-dark: #3f4367;
  --line: rgba(21, 21, 55, 0.2);
  --line-dark: rgba(21, 21, 55, 0.24);
  --accent: #00b7ff;
  --accent-2: #ff38c7;
  --green: #22e86f;
  --yellow: #ffe04a;
  --red: #ff4b5f;
  --purple: #7755ff;
  --gradient-warm: linear-gradient(135deg, #00c2ff 0%, #ff38c7 48%, #ffe04a 100%);
  --gradient-soft: radial-gradient(circle at 10% 0%, rgba(0, 183, 255, 0.28), transparent 34%), linear-gradient(135deg, #fff7d8, #e8f7ff);
  --max: 1180px;
  --radius: 0;
  --display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --pixel: "Press Start 2P", system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pixel-shadow: 6px 6px 0 #000;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 6%, rgba(255,56,199,.2), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(0,183,255,.22), transparent 26%),
    radial-gradient(circle at 72% 84%, rgba(34,232,111,.13), transparent 25%),
    var(--bg);
  font-family: var(--body);
  line-height: 1.55;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background-image:
    linear-gradient(rgba(21,21,55,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,21,55,.09) 1px, transparent 1px);
  background-size: 24px 24px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .055;
  background: repeating-linear-gradient(0deg, #151537 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

body.nav-open {
  overflow: hidden;
}

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

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

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

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

button,
a,
input,
select,
textarea {
  outline-color: var(--accent);
  outline-offset: 4px;
}

::selection {
  color: #000;
  background: var(--yellow);
}