* { box-sizing: border-box }

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--txt);
  background-color: var(--bg-2);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Full-page background layer — fixed so it covers the entire viewport at all scroll positions */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 80% -5%, rgba(96,165,250,.25), transparent 60%),
    radial-gradient(ellipse 60% 45% at -5% 20%, rgba(52,211,153,.15), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
}

.bg-surface {
  background: linear-gradient(180deg, rgba(15,25,50,0.9), rgba(10,15,30,0.95));
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23n)" opacity="0.35"/></svg>');
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.glow {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(34,211,238,.25), transparent 60%);
  filter: blur(40px);
  opacity: .7;
  pointer-events: none;
  z-index: -1;
  animation: float 12s ease-in-out infinite;
}
.glow.g1 { left: -180px; top: 140px }
.glow.g2 { right: -220px; top: 300px; animation-delay: -6s }

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

.section-block { margin: 72px 0 }
.section-title { margin: 0 0 12px }
.section-desc { margin: 0 0 20px }