:root {
  --bg-dark: #f8fcfd; /* Light premium background */
  --bg-panel: #ffffff;
  --accent-cyan: #00adb5; /* Refined cyan */
  --accent-blue: #0f2c59; /* Deep trust blue */
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.05);
  --shadow-soft: 0 20px 40px rgba(15, 44, 89, 0.08);
}

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

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Tweak the canvas so it acts as an overlay/3D object container without blocking clicks */
#webgl-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5; /* Above background, below text */
  pointer-events: none; 
}

h1, h2, h3, h4, .display {
  font-family: 'Syne', sans-serif;
  text-transform: uppercase;
}

/* Reusable buttons */
.btn-primary {
  display: inline-block;
  background: var(--accent-cyan);
  color: white !important;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--accent-blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}