/* =====================================
   Base / Global
   ===================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  backface-visibility: hidden;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;

  font-family: var(--font-sans);
  color: var(--text);

  /* Flat base color only */
  background: var(--bg0);

  overflow-x: hidden;
}

/* =====================================
   Unified background gradient (BOTTOM)
   ===================================== */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3; /* ⬅️ САМЫЙ НИЖНИЙ */
  pointer-events: none;

  background:
    radial-gradient(
      1200px 700px at 20% -10%,
      rgba(76,125,255,0.10),
      transparent 60%
    ),
    radial-gradient(
      1000px 700px at 85% 10%,
      rgba(138,92,255,0.10),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--bg0),
      var(--bg1)
    );
}

/* =====================================
   Background canvas (NETWORK GRID)
   ===================================== */

#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; /* ⬅️ МЕЖДУ ГРАДИЕНТОМ И NOISE */
  pointer-events: none;
  opacity: 0.9;
}

/* =====================================
   Subtle noise (TOP BACKGROUND)
   ===================================== */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* ⬅️ ВЫШЕ CANVAS */
  opacity: 0.22;

  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* =====================================
   Sections / Layout
   ===================================== */

header,
main,
footer,
section {
  position: relative;
  z-index: 1; /* ⬅️ КОНТЕНТ ВСЕГДА ВЫШЕ */
}

section {
  margin: 0;
  padding: 96px 0;
  background: transparent;
}

.container {
  width: min(var(--max), 100%);
  margin: 0 auto;
  padding: 0 24px;
}

/* =====================================
   Typography
   ===================================== */

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.subtext {
  max-width: 70ch;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 500;
}

/* =====================================
   Media / UI
   ===================================== */

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}