html {
  scroll-behavior: smooth;
}

body {
  background:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("./image_1.png") center/cover fixed no-repeat;
}

.hero-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85));
  pointer-events: none;
}

.glass {
  background: rgba(11, 18, 28, 0.58);
  border: 1px solid rgba(0, 191, 255, 0.35);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.metal-btn {
  background: linear-gradient(180deg, #b8f0ff 0%, #00bfff 42%, #0099ff 100%);
  box-shadow: 0 0 0 1px rgba(201, 244, 255, 0.9), 0 12px 30px rgba(0, 153, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.metal-btn:hover {
  filter: brightness(1.08);
}

.metal-outline {
  border: 1px solid rgba(0, 191, 255, 0.65);
  box-shadow: inset 0 0 0 1px rgba(0, 191, 255, 0.25);
}