@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

@import './variables.css';
@import './reset.css';
@import './layout.css';
@import './components.css';
@import './responsive.css';

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}

.glow-orb--hero {
  width: 600px;
  height: 400px;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
}

.glow-orb--left {
  width: 300px;
  height: 300px;
  background: rgba(34, 211, 238, 0.06);
  left: -150px;
  top: 50%;
}

.glow-orb--right {
  width: 300px;
  height: 300px;
  background: rgba(56, 189, 248, 0.06);
  right: -150px;
  top: 30%;
}