/* Grid Background Pattern - Light & Dark Theme */
.grid-background {
  background-color: #f8f8f9;
  opacity: 0.99;
  background-image: linear-gradient(#ffffff 2px, transparent 2px), linear-gradient(90deg, #ffffff 2px, transparent 2px), linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, #f8f8f9 1px);
  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

.dark .grid-background {
  background-color: #6b7280;
  background-image: linear-gradient(#757d8a 2px, transparent 2px), linear-gradient(90deg, #757d8a 2px, transparent 2px), linear-gradient(#707884 1px, transparent 1px), linear-gradient(90deg, #707884 1px, #6b7280 1px);
}

/* Logo Dark/Light Theme Toggle */
.dark .logo-light { display: none; }
.dark .logo-dark { display: block; }
.logo-dark { display: none; }

/* Hero Diagonal Section */
.hero--diagonal {
  position: relative;
  background-color: transparent;
  min-height: 20vh;
  padding: 1vh 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.hero--diagonal::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: calc(100% + 100px);
  clip-path: polygon(0% 0%, 100% 50px, 100% 100%, 0% calc(100% - 50px));
  background-color: #1463b5ff;
}

.hero--diagonal .hero__content {
  position: relative;
  z-index: 1;
}