/* Reset defaults */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  background-color: #000;
  /* Dark background to fit premium VR aesthetic */
  overflow-x: hidden;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Canvas styling to cover the entire viewport fixed in place behind scroll flow */
#scroll-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 1;
  pointer-events: none;
  /* Let pointer events pass through to allow window scrolling */
}

/* Section 1: Video 2 Scroll Area */
.spacer-section.first {
  height: 1000vh;
  position: relative;
}

/* Section 2: Black Spacer Section with Pricing App */
.spacer-section.black {
  min-height: 100vh;
  background-color: #0c0c0e;
  position: relative;
  z-index: 2;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Sits over fixed elements if needed, keeping layout clean */
}

/* Section 3: Video 2 Headset Scroll Area with Layout Overlay */
.spacer-section.second {
  height: 1000vh;
  position: relative;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Hide default scrollbar for a cleaner premium look, while keeping standard scroll functionality */
body::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.card {
  background-color: #000000;
  border: 2px solid #212121;
  border-radius: 24px;
  opacity: 45%;
}

.card .top-label {
  color: #fff !important;
  font-size: 12px;
}

/* Glassmorphism helpers for Section 3 */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.section3_content {
  height: 1800px !important;
}